Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Twitter Bootstrap - full width navbar

Following the example of TB, I have a navbar that is marked up as follows:

<div class="container">     <div class="navbar">         <div class="navbar-inner">                    <!-- nav bar items here -->         </div>     </div> </div> 

I'd like this to span the full width of the screen and not have any rounded corners -- similar to static top styling of the navbar.

I can't seem to find how to do this in TB. If there isn't a way, what CSS would I need to override TB and not break responsiveness?

like image 660
StackOverflowNewbie Avatar asked Oct 26 '12 11:10

StackOverflowNewbie


People also ask

How do I make the navigation bar full width in bootstrap?

Approach 1: In Bootstrap 4, full width dropdown in Navbar might be possible by adding CSS properties either internally or externally based on conveniences. Focus on class dropdown and dropdown-menu only. Now, make top margin of dropdown-menu as zero pixel and add width to 100%.

How can I make my navbar width 100%?

So if you want full-width you either have to wrap your navbar in a row (inside your container) or you just don't use container 's at all. Show activity on this post.

What is navbar toggler?

Navbar togglers are left-aligned by default, but should they follow a sibling element like a .navbar-brand , they'll automatically be aligned to the far right. Reversing your markup will reverse the placement of the toggler. Below are examples of different toggle styles.


1 Answers

Just change the class container to container-fullwidth like this :

<div class="container-fullwidth"> 
like image 114
Arnaud Bouchot Avatar answered Nov 10 '22 07:11

Arnaud Bouchot