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 {
float:none;
display:inline-block;
*display:inline; /* ie7 fix */
*zoom:1; /* hasLayout ie7 trigger */
vertical-align: top;
}
.center.navbar-inner {
text-align:center;
}
.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)
