Bootstrap3 Navbar fill content - html

Question

I would like to fit navbar options in all the container like this:
Tried using this website methods, but couldn't get it working, it broke my responsive.
Can anyone please explain me best way using bootstrap?
Thank you

Answer 1

i created a fiddle for you take a look, it may help you.
use margin for doing this
.navbar.navbar-default.navbar-fixed-top {
margin: 6px 10px 0px 5px;
}
#blue{background-color:blue !important; height: 57px;}
.navbar-collapse.in,
.navbar-collapse.collapsing {
clear: left;
}
.navbar.navbar-default.navbar-fixed-top {
margin: 6px 10px 0px 5px;
}
#blue{background-color:blue !important; height: 57px;}
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div id="blue">
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header pull-left">
<a class="navbar-brand" href="index.php">xxx</a>
</div>
<div class="navbar-header pull-right">
<button type="button" class="navbar-toggle"
data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<p class="navbar-text">
<b> '.$username.' </b>
Logout
</p>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
<!-- Post Info -->
<div style='position:fixed;bottom:0;left:0;
background:lightgray;width:100%;'>
About this SO Question: <a href='http://stackoverflow.com/q/18900593/1366033'>navbar float right moves div to new line</a><br/>
Find documentation: <a href='http://getbootstrap.com/css/'>Get Bootstrap 3.0</a><br/>
Fork This Skeleton Here <a href='http://jsfiddle.net/KyleMit/kcpma/'>Bootrsap 3.0 Skeleton</a><br/>
External JS File: <a href='http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js'>bootstrap.min.js</a><br/>
External Style Sheet: <a href='http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js'>bootstrap.min.css</a><br/>
External Fonts / Icons: <a href='http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css'>font-awesome.min.css</a>
<div>
</div>
fiddle here