49

My question is how you can center the pills?

I've tried to add center block around and also to change the float:left to float:center but nothing helps.

pzp
  • 6,249
  • 1
  • 26
  • 38
glenn
  • 491
  • 1
  • 4
  • 3
  • There is no such thing as 'float:center' oh if there was. So many developers would have so much time left in their lives. There are a few techniques to centre tabs if you google for it, but in the case of twitter-bs might need a fair bit of customising – Rich Standbrook Aug 24 '11 at 22:29

7 Answers7

84

This has gotten much simpler! You just need to use the text-center class on the container, and apply display:inline-block to the ul. Just make sure you have a line break or paragraph tag separating the nav from any other elements within the container.

Done! 2 class additions, 1 line of CSS (don't modify the bootstrap css file!).

HTML:

<div class="col-md-12 text-center">
    <p>Copyright stuff</p>
    <ul class="nav nav-pills center-pills">
        <li><a href="#">Footer nav link</a></li>
        <li><a href="#">Footer nav link</a></li>
    </ul>
</div>

CSS:

.center-pills { display: inline-block; }


Edit 2015: As Artur Beljajev has brought up, Flexbox support is now common enough that you may want to use that instead:

.center-pills {
    display: flex;
    justify-content: center;
}
Preston Badeer
  • 2,658
  • 1
  • 20
  • 21
  • This worked better for me than broox solution. With broox solution I was having a weird placement of the pills (one was always below). Thanks for sharing :) – markdrake Mar 05 '14 at 06:25
  • Any idea why adding this style would leave a space below (as if there's padding)? – Rachel S Feb 10 '16 at 20:37
  • @RachelS Which style are you using? Do you have a jsfiddle I can look at? – Preston Badeer Feb 11 '16 at 22:48
  • Note, I used Flexbox version and it didn't work when content was in mobile display port. The original answer worked though. – Terry May 18 '17 at 15:18
  • @Terry Thanks for pointing that out. What did it do? What mobile view mode or device did you use? – Preston Badeer May 20 '17 at 00:19
  • @PrestonBadeer I was just using Chrome and emulating a mobile device, but basically it didn't have a 'block' display and was appearing to the right of the preceding `
    `. Maybe I should have placed the `
    ` with above styles *inside* the tab-content div?
     – Terry May 22 '17 at 13:23
  • Make sure you're using the flex layout setting you want as well (row or column). Flexbox can be tricky! – Preston Badeer May 26 '17 at 04:07
54

If you'd like variable width pills in a variable width container, I'd suggest using the inline-block display type and adding a class to the pill container.

Here is how I extended bootstrap for centering pills.

CSS:

.centered-pills { text-align:center; }
.centered-pills ul.nav-pills { display:inline-block; }
.centered-pills li { display:inline; }
.centered-pills a { float:left; }
* html .centered-pills ul.nav-pills { display:inline; } /* IE6 */
*+html .centered-pills ul.nav-pills { display:inline; } /* IE7 */

HTML:

<div class="row">
  <div class="span12 centered-pills">
    <ul class="nav nav-pills">
      <li><a href="#">derek</a></li>
      <li><a href="#">brooks</a></li>
      <li><a href="#">is</a></li>
      <li><a href="#">super</a></li>
      <li class="active"><a href="#">awesome</a></li>
    </ul>
  </div>
</div>
broox
  • 3,538
  • 33
  • 25
  • Added `ul.nav-pills` to the 3rd and 4th selectors in case you happen to have other lists insided of the centered-pills element like I did. `.centered-pills ul.nav-pills li { display:inline; } .centered-pills ul.nav-pills li a { float:left; } ` – anztenney Feb 29 '16 at 18:30
25

Or flexbox approach:

.nav-pills {
    display: flex;
    justify-content: center;
}
Artur INTECH
  • 6,024
  • 2
  • 37
  • 34