Wolfgang Hall Wolfgang Hall - 2 years ago 96
HTML Question

Centering a navbar in bootstrap

I've encountered problem with Bootstrap where I can't center my navbar on the page. The nav remains off-center, therefore my CSS is incorrect. Has anyone faced a similar problem with centering a navbar using Bootstrap.

Here is the html:

<div class="container-fluid" id="main-section">
<div class="jumbotron" class="col-md-8 col-md-offset-2">
<div class="row">
<div >
<h1 id="name-lead">Title</h1>
<p class="lead">
<ul class="nav navbar-nav">
<li><a href="#">home</a></li>
<li><a href="#">link2</a></li>
<li><a href="#">link3</a></li>
<li><a href="#">link4</a></li>

here is the CSS:

.jumbotron {
background: none;
text-align: center;
margin-top: 75px;
margin-bottom: 75px;

.jumbotron .nav ul {
display: inline-block;

.jumbotron .nav ul li {
display: inline;

Answer Source

Just add this to your CSS

.navbar-nav {
   float: none;
   display: inline-block;

Example here

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download