Junaid Junaid - 4 months ago 40
HTML Question

Bootstrap .center-block not working as expected

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
li
s 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

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

Comments