Get a free trial // Grow your CSS skills // Land your dream job

Bootstrap: Full-width navbar with centered menu items

  • Q_A
    # June 12, 2013 at 12:34 pm

    A quick Bootstrap tutorial for those wanting a navbar that will span the entire width of the page at any screen size and align the menu items to the center.

    **1. Reset The BODY Padding.**

    body {
    padding: 0px;

    **2. Specify Centering Styles.**

    .center {
    margin-left: auto;
    margin-right: auto;
    .center.navbar .nav,
    .center.navbar .nav > li {
    *display:inline; /* ie7 fix */
    *zoom:1; /* hasLayout ie7 trigger */
    vertical-align: top;
    .center.navbar-inner {
    .center .dropdown-menu {
    text-align: left;
    .navbar-inner {
    margin: 0 auto;

    **3. Call Centering Styles.** Use ‘navbar-static-top’ OR ‘navbar-fixed-top’ depending on your needs. Center both this DIV and the DIV inside it having the class ‘navbar-inner’ as shown below. Scale your browser window to test the layout.

    **4. Add Your Own Padding.**
    In my case I padded the container classes because my navbar resides outside of a container DIV and all of my content resides inside containers.
    You can use media queries to specify different amounts of padding for different screen widths.

    @media (max-width: 767px) {
    .container,.container-fluid {
    padding-left: 10px;
    padding-right: 10px;

    ※ Since these styles are designed to override styles in bootstrap.css and bootstrap-responsive.css be sure to link your stylesheet after those.

    (Bootstrap v2.3.2, JQuery v1.7.2)

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed