How can I center Twitter-Bootstrap 3 navbar buttons?


Tags: css,twitter-bootstrap,centering,navbar

Problem :

How can I center the buttons in the jsFiddle I set up so that the buttons are equally spaced and centered within and through-out the navbar?

http://jsfiddle.net/3GQyq/3/

I have tried different methods such as

display:inline-block;margin:0 auto; text-align:center;

But I cannot get it to work.

If you could give a little explanation instead of just fixing the CSS as I want to learn so I do not have to keep coming back here.

EDIT:

http://img1.123freevectors.com/wp-content/uploads/icon_big/038_icon_beautiful-navigation-bar-free-vector.jpg Just like how they are centered here ^.



Solution :

Bootstrap 3 has a new 'nav-justified' class for this purpose. No extra CSS required:

<div class="container">
  <h3 class="text-muted">Project name</h3>
  <ul class="nav nav-justified">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Projects</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Downloads</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>

Demo: http://bootply.com/72519


    CSS Howto..

    How does the CSS Block Formatting Context work?

    How to style using d3's .style() method instead of using CSS in style tags for .axis path {}?

    show different content in multiple css popups

    Do I need to use float:clear to have content show where I want it to show?

    How to implement small text list search functionality using CSS attribute selectors

    How to create tooltip with one element in CSS

    How to set background color based on YAML front matter (Jekyll)

    draggable without jquery ui: how to stop dragging the not-draggable and type-able elements?

    How to underline gaps created with CSS columns property?

    How can I have a CSS style different for IE6?

    How to use Javascript to close css drop down menu on outside click?

    How can I make my form take only a limited space?

    How do I access font features in CSS?

    How to hide a div from another div using CSS

    How can you keep the “theme” of your website and add new dynamic pages? [closed]

    How to bundle Angular 2 component css?

    How to use a lower resolution image for mobile?

    How to disable fixed header on Mobile with CSS

    How to create different shape in css?

    How to use a CSS sprite for a Repeating background image?

    How to create a progress dialog when switching the webpages?

    Applying new css to elements with jQuery, how to add transition?

    how to include css and js files to php template?

    How to rotate a div

    How to style focus on jquery ui dialog widget?

    How can I clip and transform an image, adding rounded corners and perspective?

    how to use css align control one row

    How to use Pseudo-Elements : before & :after to create end caps

    PNG background image not showing in IE 8< using html5?

    How to select nth sibling after specific class based on any number multiple with CSS? [duplicate]