Junaid Junaid - 1 year ago 199
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

center align

2) As
should NOT be like
or something like that. I want it to be
width: auto;
because number of
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>

... Other div


Answer Source

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;


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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download