CODEWITHSUNDEEP
cssnavigationtwitter-bootstrapresponsive-designcentering
opengrid
opengrid

Reputation: 1944

Center Navbar in Twitter Bootstrap 2.0

Suppose we have the following markup for navigation bar using Twitter Bootstrap 2.0.

<div class="navbar navbar-fixed-top">
  <div class="navbar-inner pull-center">
      <ul class="nav">
      <li class="active"><a href="#">HOME</a></li>                        
      <li><a href="#contact">CONTACT</a></li>
      </ul>        
  </div>
</div>

What is the best way to center .nav inside navbar-inner?

I only came up with adding my own CSS styles:

@media (min-width: 980px) {
    .pull-center {
        text-align: center;
    }
    .pull-center > .nav {
        float:none;
        display:inline-block;
        *display: inline; *zoom: 1;
        height: 32px;
    }
}

Upvotes: 23

Views: 30118

Answers (5)

Tim Baas
Tim Baas

Reputation: 6185

To align it in the center with a dynamic width, I used the following:

HTML:

<div class="navbar">
  <div class="navbar-inner">
    <ul class="nav">
      ....
    </ul>
  </div>
</div>

CSS:

.navbar .navbar-inner {
    text-align: center;
}
.navbar .navbar-inner .nav {
    float: none;
    display:inline-block;
}

Didn't test it, but I guess only display:inline-block; could be a problem, which is supported in all browsers except for IE7 and lower..

http://caniuse.com/inline-block

Upvotes: 4

Cristian Florin Zlatea
Cristian Florin Zlatea

Reputation: 1181

<div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container">
            <ul class="nav">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
    </div>
</div>

Upvotes: 3

Emiliano Poggi
Emiliano Poggi

Reputation: 24836

I have found this useful and clean:

<div class="navbar navbar-fixed-top">
  <div class="container">
      <ul class="nav">
      <li class="active"><a href="#">HOME</a></li>                        
      <li><a href="#contact">CONTACT</a></li>
      </ul>        
  </div>
</div>

where, css is:

.container {left:auto;right:auto}

This will center the div on the base of the width of your current navbar.

Responsiveness is managed apart.

Upvotes: 0

s_t_e_v_e
s_t_e_v_e

Reputation: 2526

Just using the container class as per http://twitter.github.com/bootstrap/components.html#navbar is centering my nav; however, it is fixed width and the formatting is off (the height of the nav bar is increased and its very possible something I'm doing wrong).

It would be nice to have the nav centered in a fluid, percentage-based width, with a minimum width, based on some minimum supported device screen size, and nowrap. (I'm a newbie wrt the responsive media queries and perhaps that is the better alternative to percentage based.)

Still investigating the minimum width and nowrap, but another alternative to the bootstrap container class fixed width is to add a child of the navbar-inner. I would like to know if there is a built-in bootstrap solution such as the row-fluid and spanN classes, but I haven't been able to get that formatted correctly within the nav either.

<div style="margin-left: 15%; margin-right: 15%;">

Upvotes: 1

James Lawruk
James Lawruk

Reputation: 31383

Override the width of the container within the navbar from auto to 960px.

.navbar-inner .container {width:960px;}

Upvotes: 5

Related Questions