0

I have a web page that uses Bootstrap 3. In this page, I have several tabs. At this time, the tabs are left-aligned across the top. You can see yourself in this Bootply. I'm trying to figure out how to make the tabs appear in the center of the tab strip. As of right now, it looks like this:

+-------+-------+
| Tab 1 | Tab 2 |
+       +-------+--------------------------------------------------+
| content                                                          |
|                                                                  |
|                                                                  |
|                                                                  |
+------------------------------------------------------------------+

However, I'm trying to make it look like this:

                          +-------+-------+
                          | Tab 1 | Tab 2 |
+-------------------------+       +--------------------------------+
| content                                                          |
|                                                                  |
|                                                                  |
|                                                                  |
+------------------------------------------------------------------+

I tried using the text-center class without success. I know the ul is a block-level element so it fills the width of its container. For that reason, I tried setting float:left on the ul. But that didn't work either. Once again, the Bootply is here. The code looks like this:

<div class="container-fluid">
    <div class="container">
        <ul class="nav nav-tabs" role="tablist">
            <li role="presentation" class="active"><a href="#first" aria-controls="first" role="tab" data-toggle="tab">First Tab</a></li>
            <li role="presentation"><a href="#second" aria-controls="second" role="tab" data-toggle="tab">Second Tab</a></li>
        </ul>
    </div>
</div>

<div class="container">
    <div class="row">
        <div class="col-xs-12">
            <div class="tab-content">
                <div role="tabpanel" class="tab-pane active" id="first">
                    <h2>First Tab</h2>
                </div>

                <div role="tabpanel" class="tab-pane" id="second">
                    <h2>Second Tab</h2>
                </div>
            </div>
        </div>
    </div>
</div>

I'm not sure how to get the tabs to center.

Some User
  • 5,257
  • 13
  • 51
  • 93

3 Answers3

1

i think this is what you are looking for https://stackoverflow.com/a/9422253/5168300

copying this answer

nav-tabs list items are automatically floated to the left by the bootstrap so you have to reset that and instead display them as inline-block, and to center menu items we have to add the attribute of text-align:center to the container, like so:

CSS

.nav-tabs > li, .nav-pills > li { float:none; display:inline-block; *display:inline; /* ie7 fix */ zoom:1; /* hasLayout ie7 trigger */ }

.nav-tabs, .nav-pills { text-align:center; }

here: http://jsfiddle.net/U8HGz/2/

Edit: patched version that works in IE7+ provided by user @My Head Hurts down in the comments below.

Community
  • 1
  • 1
Khalid Hussain
  • 56
  • 1
  • 4
0

You will have to update the css for ul.nav-tabs and the li, like so:

ul.nav-tabs {
  text-align: center;
}
ul.nav-tabs li {
  float: none;
  display: inline-block;
}

Here's a link to a fiddle: https://jsfiddle.net/m0nk3y/pwyumb3k/

Gene Parcellano
  • 5,799
  • 5
  • 36
  • 43
0

you can try this code

HTML:

   <ul class=" ul-center" role="tablist">
           <li><a href="#">Item 1</a>    </li>
           <li><a href="#">Item 2</a>    </li>  
    </ul>

CSS:

.ul-center{
  margin:0;
  padding:0;
  clear:both;
  text-align:center;
}
.ul-center li{
  display:inline-block;
  padding:10px 20px;
  background-color:#fff;
  margin:0;
}

LIVE DEMO : https://jsfiddle.net/czd60374/1/

Saravanan Kasi
  • 676
  • 6
  • 21