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

html

responsive-design

css

bootstrap

byAlex Kataev·Feb 11, 2025

To center Bootstrap tabs, flex your CSS muscles with the flexbox paradigm. Here is a CSS snippet that demonstrates this:

.center-tabs {
  display: flex;
  justify-content: center; /* Time to flex... in the center! */
}

Now, cradle your nav-tabs with the comforting arms of the center-tabs class:

<div class="center-tabs">
  <ul class="nav nav-tabs">
    <!-- Your tabs go here -->
  </ul>
</div>

And... that's it! Gronk!… I mean voila! Your tabs now grace the very center of the page.

The many paths to centeredness — or, options abound!

Suppose you are not besotted with the flexbox technique or are dealing with constraints that require a different route, worry not. Bootstrap is nothing, if not versatile, offering multiple alternatives to reach the coveted centered tab look. Scuffle through these handy choices and pick the one that catches your fancy.

Handhold 1: `text-align` & `inline-block` — old school, but cool!

If your soul yearns for a non-flexbox strategy, the classic duo of text-align and display: inline-block has your back.

.center-tabs-inline {
  text-align: center;
}
.nav-tabs > li {
  float: none; /* Float? No, thank you. I would rather walk... */
  display: inline-block; /* Stand in a line, but stand out, you know! */
}

Snatch this CSS and swaddle your tab in the center-tabs-inline class:

<div class="center-tabs-inline">
  <ul class="nav nav-tabs">
    <!-- ... -->
  </ul>
</div>

This traces a direct route to center city without any flex detours.

Handhold 2: IE7 compatibility — because we care!

Internet Explorer 7 — or the browser that must not be named — requires special handling. If you are daring enough to nurture backward compatibility with IE7, this code should help:

.center-tabs-ie7 {
  text-align: center;
  *zoom: 1; /* Help IE7 see the world a bit clearly! */
}

Don't forget to include the center-tabs-ie7 in your HTML universe:

<div class="center-tabs-ie7">
  <ul class="nav nav-tabs">
    <!-- ... -->
  </ul>
</div>

Phew! Now, even IE7 can see your beautifully centered tabs!

Handhold 3: Embrace the Bootstrap grid system!

Another eye-catching method involves the Bootstrap grid system which centers tabs while being responsive:

<div class="row">
  <div class="col-sm-4 col-sm-offset-4">
    <ul class="nav nav-tabs">
      <!-- ... -->
    </ul>
  </div>
</div>

This approach uses off-the-shelf Bootstrap classes, ensuring responsive behavior in addition to center alignment. It's as convenient as ordering tacos for delivery.

Coat your journey with Unicorn Dust — `margin` magic!

And then, there are times when direct margin manipulation is the charm:

.center-tabs-margin {
  width: fit-content;
  margin-left: auto; /* Attain Nirvana effortlessly! */
  margin-right: auto; /*... and without breaking a sweat! */
}

Inject your HTML with this charm with the center-tabs-margin class:

<div class="center-tabs-margin">
  <ul class="nav nav-tabs">
    <!-- ... -->
  </ul>
</div>

All set! Your tabs are centered as perfectly as a levitating guru. You have indeed attained margin enlightenment!

Responsive Centering — tips from a wandering minstrel

Centering items in responsive layouts is a fine art, indeed. Let's dive into some insights that have served many a traveler well.

Media queries

Media queries — our benevolent allies — are at your service for tweaking styles per viewport size.

@media (max-width: 768px) {
  .nav-tabs > li {
    /** 
      * Dreaming of a beach vacation... 
      * Mimosa in hand, feet up...
      * Damn! Time to get back to work! 😄
      **/
    float: none;
    display: inline-block;
  }
}

Harness Bootstrap's `flex` utilities

Bootstrap offers in-built flex utilities like d-flex and justify-content-center to help you strut your centeredness with style.

<div class="d-flex justify-content-center">
  <ul class="nav nav-tabs">
    <!-- ... -->
  </ul>
</div>

The magic wand of "nav-justified" class

Magic isn't lost yet! The 🧙-crafted .nav-justified class can be used to disperse your tabs evenly and center them within their container:

<ul class="nav nav-tabs nav-justified">
  <!-- ... -->
</ul>

Trouble in Paradise: Potential Pitfalls

Let's face it — sometimes things just don't go as expected. Tabs overflow or wrap in funky ways or clicking a tab causes it to shift positions, or your responsive design behaves more like a rebel than a well-mannered kid. Fear not! Here are tips to get back on track: