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 to animate two divs in html / css to make a semi-circle transition?

    CSS: How do I prevent the background color of div from going behind the image it is sitting above?

    How to create vertical list of items in CSS?

    how to add an image on a div without losing previous content in CSS hover effect

    How can I show an absolutely positioned div inside a fixed positioned div?

    How to create a level 4 submenu with this css?

    How can I absolutely position a block of multi-line text relative to the bottom of the last line?

    How to get page-header and nav-pills to appear on the same line

    background image of div element can't show in php file

    How to visually identify the viewbox of a SVG with CSS?

    Pure CSS3 slideshow repeats the last 4 slides?

    How to add a css transition color change for a link/div background

    LESS: How to specify current tag with nesting?

    How to format an HTML table using CSS for printing?

    How to target a specific element of a div in CSS?

    How can I put CSS and HTML code in the same file?

    How to vertically center in yui-pure-css?

    How to add a shadow for underline (bottom border) in css

    How do I get the (element with the) highest CSS z-index in a document?

    Cannot get Font Awesome Images to Show

    How to make a line in a table with CSS

    How to have different alignments in one div(nav)?

    How do I get Internet Explorer to do a better job displaying images

    How to style diff implementation for PHP with CSS

    How can I force browsers to reload cached CSS files when using Asp.Net Themes? [duplicate]

    How does one right-justify bootstrap pills with css

    How to contol a CSS property with Javascript

    How do we write a CSS “block-level-style” within an inline style attribute tag?

    How to force CSS to be displayed on empty element following whitespace

    How to work with dynamic container in Isotope?