Reputation: 40633
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?
Upvotes: 28
Views: 127832
Reputation: 46
Put your <nav>
element out from the <div class='container-fluid'>
.
Ex :-
<nav>
......nav content goes here
<nav>
<div class="container-fluid">
<div>
........ other content goes here
</div>
</div>
Upvotes: 2
Reputation: 39
Just replace <div class="container">
with <div class="container-fluid">
, which is the container with no margins on both sides.
I think this is the best solution because it avoids some useless overriding and makes use of built-in classes, it's clean.
Upvotes: 1
Reputation: 56
You have to add col-md-12 to your inner-navbar. md is for desktop .you can choose other options from bootstrap's list of options . 12 in col-md-12 is for full width .If you want half-width you can use 6 instead of 12 .for e.g. col-md-6.
Here is the solution to your question
<div class="container">
<div class="navbar">
<div class="navbar-inner col-md-12">
<!-- nav bar items here -->
</div>
</div>
</div>
Upvotes: 0
Reputation: 1993
Just change the class container to container-fullwidth like this :
<div class="container-fullwidth">
Upvotes: 37
Reputation: 1078
I'm very late to the party but this answer pulls up top in Google search results.
Bootstrap 3 has an answer for this built in, set your container div in your navbar to container-fluid
and it'll fall to screen width.
Like so:
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="/">More Stuff</a></li>
</ul>
</div>
</div>
</div>
Upvotes: 14
Reputation: 432
I know I'm a bit late to the party, but I got around the issue by tweaking the CSS to have the width span 100%, and setting l/r margins to 0px;
#div_id
{
margin-left: 0px;
margin-right: 0px;
width: 100%;
}
Upvotes: 0
Reputation: 26504
Not sure if the navbar-static-top
class was available prior to version 2.2.2 but I think you can accomplish your goal with the following:
<div class="navbar navbar-static-top">
<div class="navbar-inner">
<ul class="nav">
<li class="active"><a href="#">Test1</a></li>
<li><a href="#">Test2</a></li>
<li><a href="#">Test3</a></li>
<li><a href="#">Test4</a></li>
<li><a href="#">Test5</a></li>
</ul>
</div>
</div>
<div class="container">
...
</div>
I put together a jsFiddle as an example.
Upvotes: 26
Reputation: 2457
To remove the border-radius on the corners add this style to your custom.css file
.navbar-inner{
-webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0;
}
Upvotes: 0
Reputation: 5897
You can override some css
body {
padding-left: 0px !important;
padding-right: 0px !important;
}
.navbar-inner {
border-radius: 0px !important;
}
The !important
is needed just in case you link the bootstrap.css
after your custom css.
And add your nav html out of a .container
Upvotes: 0
Reputation: 14381
Put the navbar out of your container:
<div class="navbar">
<div class="navbar-inner">
<!-- nav bar items here -->
</div>
</div>
<div class="container">
</div>
EDIT:
Here is one that I did with responsive navbar. The code fits the document body:
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<!-- Be sure to leave the brand out there if you want it shown -->
<a class="brand" href="#">Project name</a>
<!-- Everything you want hidden at 940px or less, place within here -->
<div class="nav-collapse">
<!-- .nav, .navbar-search, .navbar-form, etc -->
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li class="divider-vertical"></li>
<li><a href="#">Link</a></li>
<li class="divider-vertical"></li>
<li><a href="#">Link</a></li>
</ul>
<ul class="nav pull-right">
<li><a href="#">Log out</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="span12">
</div>
</div>
</div> <!-- end container -->
<script type="text/javascript" src="/assets/js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="/assets/js/bootstrap.min.js"></script>
Upvotes: 24
Reputation: 3200
You need to push the container down the navbar.
Please find my working fiddle here http://jsfiddle.net/meetravi/aXCMW/1/
<header>
<h2 class="title">Test</h2>
</header>
<div class="navbar">
<div class="navbar-inner">
<ul class="nav">
<li class="active"><a href="#">Test1</a></li>
<li><a href="#">Test2</a></li>
<li><a href="#">Test3</a></li>
<li><a href="#">Test4</a></li>
<li><a href="#">Test5</a></li>
</ul>
</div>
</div>
<div class="container">
</div>
Upvotes: 1