CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
mofeeta
mofeeta

Reputation: 1189

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

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.

Upvotes: 87

Views: 87884

Answers (8)

Farab Alipanah
Farab Alipanah

Reputation: 401

‌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.

Upvotes: 1

Rafiqul Islam
Rafiqul Islam

Reputation: 961

Try This:

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

Upvotes: 0

Vinayak Bhat
Vinayak Bhat

Reputation: 341

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.

Upvotes: 18

Ali Qorbani
Ali Qorbani

Reputation: 1263

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 .

Upvotes: 1

Balsa Bojic
Balsa Bojic

Reputation: 172

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>

Upvotes: 2

Cagatay Kalan
Cagatay Kalan

Reputation: 4126

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>

Upvotes: 21

rahulm
rahulm

Reputation: 744

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%;">

Upvotes: 2

Andres I Perez
Andres I Perez

Reputation: 75409

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/

Upvotes: 221

Related Questions