Bootstrap 3: Navbar Not Full Width

I'm currently trying to create a Navbar with 100% width in Bootstrap, but it isn't working like it should. How can I scale the Navbar to 100% width?

Solution 1:

Remove .row and .col-md-12 divs – they add padding. You only need to use them when you divide content in columns.

Solution 2:

I think this code looks fine as per your requirements.

<divstyle="border: 1px solid"><navclass="navbar navbar-default"role="navigation"><div><divclass="navbar-header"><buttontype="button"class="navbar-toggle"data-toggle="collapse"data-target="#bs-example-navbar-collapse-2"><spanclass="sr-only">Toggle navigation</span><spanclass="icon-bar"></span><spanclass="icon-bar"></span><spanclass="icon-bar"></span></button><aclass="navbar-brand"href="#">Bootflat</a></div></div></nav></div>

Please see here

Solution 3:

You don't need the row and the grid col divs since the navbar will be at a full width at all times and you are using .container-fluid. Try this:

<navclass="navbar navbar-default"role="navigation"><divclass="container-fluid"><divclass="navbar-header"><buttontype="button"class="navbar-toggle"data-toggle="collapse"data-target="#bs-example-navbar-collapse-2"><spanclass="sr-only">Toggle navigation</span><spanclass="icon-bar"></span><spanclass="icon-bar"></span><spanclass="icon-bar"></span></button><aclass="navbar-brand"href="#">Bootflat</a></div></div></nav>

Solution 4:

As happened to me, if you want it with the full width on the top (sticky). Adding fixed-top class to the nav will do.

<navclass="navbar fixed-top navbar-light bg-light"><aclass="navbar-brand"href="#">Fixed top</a></nav>

Solution 5:

Just add the following css code body{padding:0;margin:0}. It worked for me.

Hope this helps.

Share