bootstrap 3 - how do I place the brand in the center of the navbar

Question

I am using Bootstrap 3   I would like a navbar with only the brand in it   No other links or anything else  And I want the brand to be in the center   How can I accomplish this   The following css doesn t work    navbar-brand       text-align  center

User · Answer

Another option is to use nav-justified     lt nav class  navbar navbar-default  role  navigation  gt     lt div class  navbar-header  gt       lt button type  button  class  navbar-toggle  data-toggle  collapse  data-target   navbar-collapse  gt         lt span class  icon-bar  gt  lt  span gt         lt span class  icon-bar  gt  lt  span gt         lt span class  icon-bar  gt  lt  span gt       lt  button gt         lt  div gt     lt div class  navbar-collapse collapse  gt       lt ul class  nav nav-justified  gt         lt li gt  lt a href     class  navbar-brand  gt Brand lt  a gt  lt  li gt       lt  ul gt     lt  div gt   lt  nav gt    CSS   navbar-brand       float none      Bootply  Alternate example

User · Answer

To fix the overlap  you only need modify the  navbar-toggle in your own css styles  something like this  it works for me    navbar-toggle  z-index  10

User · Answer

I used two classes to achieve this and maintain responsiveness navbar-brand-left and navbar-brand-center  Keep in mind it utilises Sass   Less Bootstrap for line height  otherwise specify a hardcode px   rem height   HTML   lt nav class  navbar navbar-default  gt     lt div class  container-fluid  gt        lt div class  navbar-header  gt         lt button type  button  class  navbar-toggle collapsed  data-toggle  collapse  data-target   bs-example-navbar-collapse-1  aria-expanded  false  gt           lt span class  sr-only  gt Toggle navigation lt  span gt           lt span class  icon-bar  gt  lt  span gt           lt span class  icon-bar  gt  lt  span gt           lt span class  icon-bar  gt  lt  span gt         lt  button gt         lt a href     class  navbar-brand-left visible-xs visible-sm  gt Brand lt  a gt       lt  div gt        lt div class  collapse navbar-collapse text-center  id  bs-example-navbar-collapse-1  gt         lt ul class  nav navbar-nav  gt           lt li gt  lt a href     gt About lt  a gt  lt  li gt           lt li gt  lt a href     gt How it works lt  a gt  lt  li gt         lt  ul gt         lt a href     class  navbar-brand-center hidden-xs hidden-sm  gt Brand lt  a gt         lt ul class  nav navbar-nav navbar-right  gt           lt li gt  lt a href     gt Log in lt  a gt  lt  li gt           lt li gt  lt a href     gt Start now lt  a gt  lt  li gt         lt  ul gt       lt  div gt  lt  --   navbar-collapse -- gt     lt  div gt  lt  --   container-fluid -- gt   lt  nav gt    CSS   navbar-brand-left       display  inline-block      margin  0      padding  0      line-height   navbar-height      navbar-brand-center       display  inline-block      margin  0 auto      padding  0      line-height   navbar-height

User · Answer

In bootstrap  simply use mx-auto class along with navbar-brand

User · Answer

If you have no other links  then there is no use for navbar-header      HTML    lt nav class  navbar navbar-inverse navbar-static-top  gt       lt div class  container  gt        lt a class  navbar-brand text-center center-block  href     gt Navbar Brand lt  a gt           lt  nav gt    CSS    navbar-brand     float  none       However  if you do want other links here s a very effective approach that allows that  https   stackoverflow com a 34149840 3123861

User · Answer

css    navbar-header       float  left      padding  15px      text-align  center      width  100      navbar-brand  float none     html    lt nav class  navbar navbar-default  role  navigation  gt     lt div class  navbar-header  gt       lt a class  navbar-brand  href     gt Brand lt  a gt     lt  div gt   lt  nav gt

User · Answer

Use these classes  navbar-brand mx-auto  All other solutions overcomplicate the matter

User · Answer

Just create this class and add it to your element to be centered    navbar-center     margin-left  auto    margin-right  auto

[twitter-bootstrap-3] bootstrap 3 - how do I place the brand in the center of the navbar?

Bootply

Examples related to twitter-bootstrap-3