Bootstrap 3 inline navbar inside grid - html

Question

I made simple bootstrap navbar, but how to get it to fit in grid system, I would like to be col-md-8 or other cause I am new to this grid system, I know how to make simple stuff but not this.
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Flatie</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
Here is the JsFiddle

Answer 1

wrap it in a div with class of row or even better wrap all your code in a div of class container. like below:
<div class="container">
<div class="row">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Flatie</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div><!--end of row-->
<div class="row">add other contain</div>
</div><!--end of container-->

Answer 2

By default nav element gets full width but if you want to include it in the grid system then include Nav element inside element having classes as per the grid system i.e. col-md-8, col-xs-6 etc..
for e.g.
'<div class="col-md-8"> <nav class="navbar navbar-default navbar-fixed-top" role="navigation">'...
... Your nav menu Code
'</nav></div><div class="col-md-4"></div>'

Answer 3

Ok I did it, I wrapped the container in a row, I gave the container a class col-md-8 and centered.
In css id did this with centered:
.centered {
margin: 0 auto;
float: none
}
margin 0 auto is to center
float none is because col-md-8 has float left.