How do I center the twitter bootstrap tabs on the page?

Question

I'm using twitter bootstrap to create togglable tabs. Here is the css I'm using:

<div class="container">
  <ul class="nav nav-tabs">
    <li><a href="#home" data-toggle="tab">Home</a></li>
    <li><a href="#profile" data-toggle="tab">Profile</a></li>
    <li><a href="#messages" data-toggle="tab">Messages</a></li>
    <li><a href="#settings" data-toggle="tab">Settings</a></li>
  </ul>
</div>

This html displays the tabs correctly, but pulled to the left (which is what is supposed to happen). I've tried tinkering with the CSS to get the tabs to center on the page, but no luck yet. I thought someone with more css experience would know how to do this.

As a note, there is another question about centering nav pills, which I tried, but it didn't work with just plain nav tabs.

Thanks.

possible duplicate of [Twitter Bootstrap: Center Pills](http://stackoverflow.com/questions/7165423/twitter-bootstrap-center-pills) — Marijn, Mar 18 '14 at 09:54

score 221 · Accepted Answer · edited Oct 16 '12 at 16:00

221

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;
}

Demo: http://jsfiddle.net/U8HGz/2/show/ Edit here: http://jsfiddle.net/U8HGz/2/

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

Demo: http://jsfiddle.net/U8HGz/3/show/ Edit here: http://jsfiddle.net/U8HGz/3/

edited Oct 16 '12 at 16:00

kikito

51,734
32
149
189

answered Feb 23 '12 at 22:17

Andres I Perez

75,075
21
157
138

3

If you add `*display: inline; *zoom: 1;` then this will also work in IE7 (`display: inline-block` is not supported). http://jsfiddle.net/U8HGz/3/ – My Head Hurts Feb 24 '12 at 00:19
1

@MyHeadHurts oh waoh, thanks so much, didn't pay no mind to older versions of IE since i started working on supporting IE8+ only, but your fix is sound and required since the bootstrap officially supports IE7+. Updated my answer. – Andres I Perez Feb 24 '12 at 00:42
What if it should only affect .nav-tabs? – Anders Metnik Oct 31 '12 at 13:41
1

@AndersMetnik you can exchange the targetted classes to whatever nav selector you prefer, even a custom class or id. – Andres I Perez Oct 31 '12 at 22:10
1

Why would anyone accept this answer,as it modifies the base css rules? – Sachin Sharma Apr 05 '16 at 06:54
So this works in IE and Firefox for me but not Google Chrome. Thoughts on how to make Chrome show the tabs centered? – Retro Dec 13 '16 at 05:16

score 21 · Answer 2 · answered Jun 19 '15 at 14:17

Accepted answer is perfect. It can be further customized so that you can use it side by side with the standard left aligned tabs.

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

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

To use it, add "centered" class to your tabs element

<ul class="nav nav-tabs centered" >
..
</ul>

score 18 · Answer 3 · edited Jul 25 '18 at 18:09

Adding the class nav-justified works for me. This not only center aligns the tabs but it also spreads them nicely at the top.

<ul class="nav nav-tabs nav-justified">
    <li><a href="#Page1">Page1</a></li>
    <li><a href="#Page2">Page2</a></li>
    <li><a href="#Page3">Page3</a></li>
    <li><a href="#Page4">Page4</a></li>
  </ul>

Even though the accepted answer works well, I found the above more natural to Bootstrap.

rahulm · Answer 4 · 2014-05-15T00:32:55.350

2

Simply adding

margin-left:50%;

when I set up my tabs, worked for me.

For e.g.

<ul class="nav nav-tabs" style="margin-left:50%; margin-right:50%;">

edited May 15 '14 at 00:32

answered May 15 '14 at 00:20

rahulm

734
5
10

this unfortunately does not respect the widths or stacking needed to properly let them align. – noinput Feb 17 '15 at 20:39

Balsa Bojic · Answer 5 · 2015-09-25T11:47:37.130

You can just use bootstrap grid to center your nav-tabs. Since bootstrap grid is divided on 12 equals columns, you can easily use 4 columns for your navigation with 4 columns offset:

<div class="col-sm-4 col-sm-offset-4">.

Therefore your are getting your navigation in the middle of the page (also responsive solution) with 4 columns free on the left and the right side.

I found grid really useful for making responsive web pages. Good luck!

<div class="row-fluid">
  <div class="col-sm-12">
    <div class="col-sm-4 col-sm-offset-4">
      <ul class="nav nav-tabs">
        <li><a href="#home" data-toggle="tab">Home</a></li>
        <li><a href="#profile" data-toggle="tab">Profile</a></li>
        <li><a href="#messages" data-toggle="tab">Messages</a></li>
        <li><a href="#settings" data-toggle="tab">Settings</a></li>
      </ul>
    </div>
  </div>
</div>

score 1 · Answer 6 · answered Jul 24 '18 at 06:03

if you use bs4 simply you can add justify-content-center class to your nav-tabs to center it on page. if you want your tabs to be justified (full-with) add nav-justified class to it, in this case if you have 3 items in your nav each of them has 33% with. if 5 items is there each one have 20% with.

another way is simply to add text-center if you are use bs3 .

score 1 · Answer 7 · answered May 19 '20 at 11:35

1

‌Bootstrap itself has a class for this regard named nav-justified. Simply add it like this:

<ul class="nav nav-tabs nav-justified">

If you want to align center content of <li> as well, make its disply: inline-block.

answered May 19 '20 at 11:35

Farab Alipanah

351
4
2

score 0 · Answer 8 · answered Oct 20 '19 at 10:30

0

Try This:

<ul class="nav nav-tabs justify-content-center">

answered Oct 20 '19 at 10:30

Rafiqul Islam

931
11
14

How do I center the twitter bootstrap tabs on the page?

8 Answers8

Linked

Related