Bootstrap. Center-block does not work as expected.

Question

JSFIddle . I want to do center alignment using bootstrap. All I want is 2 things.

1) Make the alignment ul in the center

2) Since ul width should NOT be 20% or something like that. I want it to be width: auto; , because the number li is dynamic.

I tried the following code

  <div class="col-xs-12 col-md-8"> <div class="center-block"> <ul class="nav nav-pills"> <li class="active"><a class="link-text-bright-blue" href="#2015-14" data-toggle="tab" aria-expanded="false"><h5>2015 &amp; 2014</h5></a></li> <li class=""><a class="link-text-bright-blue" href="#2013" data-toggle="tab" aria-expanded="false"><h5>2013</h5></a></li> <li class=""><a class="link-text-bright-blue" href="#2012" data-toggle="tab" aria-expanded="false"><h5>2012</h5></a></li> <li class=""><a class="link-text-bright-blue" href="#2011" data-toggle="tab" aria-expanded="false"><h5>2011</h5></a></li> <li class=""><a class="link-text-bright-blue" href="#2006-2010" data-toggle="tab" aria-expanded="false"><h5>2006 - 2010</h5></a></li> </ul> </div> <div> ... Other div </div> </div> 

Answer 1

Isn’t it justified what nav does?

Also remember that when using .center-block you need to add float:none; since it is missing in bootstrap

Center the ul

 .center-block { display: table; margin: 0 auto; } 

http://jsfiddle.net/DTcHh/3384/

Note. you are missing a div in jsfiddle for a string class

Answer 2

try the following: http://jsfiddle.net/DTcHh/3371/

 body { margin: 10px; } .navbar { border: 1px solid transparent; margin-bottom: 20px; min-height: 50px; position: relative; text-align: center; width: 100%; } .navbar-nav { display: inline-block; float: none !important; margin: 0; } .navbar-right { display: inline-block; float: none !important; } .navbar-collapse.collapse { display: inline-block !important; float: none !important; height: auto !important; margin: 0 auto !important; overflow: hidden; padding: 0; text-align: center; } .container { max-width: 100%; } .navbar-header { display: inline-block; float: left !important; } 

Answer 3

.center-block only works with a div or tag with a specific width.

Otherwise, you need to add float: none; in css .center-block{} .

It is also possible with align or text-align =center; but know that a central unit has been created so as not to.

Note that bootstrap css already includes the following in the .center-block class:

 // Class .center-block { display: block; margin-left: auto; margin-right: auto; } // Usage as a mixin .element { .center-block(); }