Bootstrap .center-block not working as expected

Question

JSFIddle. I want to make the center align using bootstrap. All I want 2 things

1) Make the ul center align

2) As ul's width should NOT be like 20% or something like that. I want it to be width: auto; because number of lis is dynamic.

I tried 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

is it not what justified nav does?

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

Make the ul center align

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

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

Note: you were missing a div in your jsfiddle for the row class

Answer 2

The .center-block only works within a div or tag with a defined width.

Otherwise, you'll have to add float: none; to the css .center-block{}.

It is posibble also with align or text-align =center;, but know that center-block was created for not to do this.

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

// Class
.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

// Usage as a mixin
.element {
  .center-block();
}