Twitter Bootstrap: Center Pills

by

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

Leave a Comment