Bootstrap 4: How to Have a Full Width Navbar with The Content in a Container (Like The So Navbar)

Bootstrap 4: How to have a full width navbar with the content in a container (Like the SO Navbar)?

Wrap an element around the .container element.

@import url( 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css' );
#primary-nav {  background-color: skyblue;}

<div id="primary-nav">
  <div class="container">      <ul class="nav">      <li class="nav-item">        <a href="#" class="nav-link">Home</a>      </li>      <li class="nav-item">        <a href="#" class="nav-link">Contact</a>      </li>      <li class="nav-item">        <a href="#" class="nav-link">About</a>      </li>    </ul>          </div>  </div>

Bootstrap navbar doesn't fill the whole width

This is due to the Bootstrap responsive design. Read about disabling responsiveness here -> http://getbootstrap.com/getting-started/#disable-responsive

I dont know how far you want to go regarding resetting responsiveness, if your concern just is the navbar you could perhaps be satisfied with

.container {
    width: 100%;
    white-space: nowrap;
}

see demo -> http://jsfiddle.net/gfpua400/

It will of course still break if the width of the parent element (here the body) is too small to fit all your .icon-bar <span> elements, but this is just normal HTML rendering I guess you are aware of (can still be prevented too though)

Get bootstrap navbar full-width with centered text

Everything is fine, You just need to put your <div class="container"> inside <nav>.

Try this:

body {    background-color: #4D4D4D;}
.navbar-collapse {  text-align:center;  background-color: #1B1B1B;}
.navbar-nav {    display:inline-block;    float:none;}
ul.nav.navbar-nav > li > a {    color : #C44632;}
#content {    width: 70%;    margin: 0 auto;    background-color: #2E2E2E;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

                <nav class="navbar navbar-inverse">                    <!-- Brand and toggle get grouped for better mobile display -->                    <div class="container">                    <div class="navbar-header">                        <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">                            <span class="sr-only">Toggle navigation</span>                            <span class="icon-bar"></span>                            <span class="icon-bar"></span>                            <span class="icon-bar"></span>                        </button>
                    </div>                    <!-- Collection of nav links, forms, and other content for toggling -->                    <div id="navbarCollapse" class="collapse navbar-collapse">                        <ul class="nav navbar-nav">                            <li class="active"><a href="#">Accueil</a></li>                            <li class="dropdown">                                <a data-toggle="dropdown" class="dropdown-toggle" href="#">Matériel <b class="caret"></b></a>                                <ul class="dropdown-menu">                                    <li><a href="#">Optiques</a></li>                                    <li class="divider"></li>                                    <li><a href="#">Monture</a></li>                                    <li class="divider"></li>                                    <li><a href="#">Capteurs Photo</a></li>                                    <li class="divider"></li>                                    <li><a href="#">Accessoires</a></li>                                </ul>                            </li>                            <li class="dropdown">                                <a data-toggle="dropdown" class="dropdown-toggle" href="#">Photographies <b class="caret"></b></a>                                <ul class="dropdown-menu">                                    <li><a href="#">Planétaire</a></li>                                    <li class="divider"></li>                                    <li><a href="#">Ciel Profond</a></li>                                    <li class="divider"></li>                                    <li><a href="#">Autres</a></li>                                </ul>                            </li>                            <li><a href="#">Article</a></li>                            <li><a href="#">Données Météo</a></li>                            <li><a href="#">Contact</a></li>                            <li><a href="#">Qui suis-je ?</a></li>                        </ul>                    </div>                </div>            </nav>

Cols in navbar display not in full width container

You could add a class to your row like so:

EDIT: As ZimSystem pointed out, there is a w-100 class in bootstrap, so just do:

<div class="row w-100">
   Your Elements
</div>

This should get you 100% of the containers width.

Working sample: https://www.bootply.com/J5gKTedgPr

Bootstrap 4 Navbar and content fill height flexbox

Instead of using h-100 on the yellow content area, add an extra CSS class to make it flex-grow:1 in height...

.flex-fill {
  flex:1 1 auto;
}

https://www.codeply.com/go/xBAMfbHqbN

<div class="container-fluid h-100 d-flex flex-column">
    <nav class="navbar navbar-expand-sm s-navbar">
        <a class="brand navbar-brand" href="/">Brand</a>
        <button class="navbar-toggler s-btn-hamburger order-first s-color-icons" aria-expanded="true" aria-controls="navbar-test" aria-label="Toggle navigation" type="button" data-target="#navbar-test" data-toggle="collapse">
            <span class="navbar-toggler-icon k-icon k-icon-md k-i-hamburger"></span>
        </button>
        <div class="navbar-collapse s-menu-content collapse show" id="navbar-test">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" id="dropdown1" aria-expanded="false" aria-haspopup="true" data-toggle="dropdown">Menu Item</a>
                    <div class="dropdown-menu" aria-labelledby="dropdown1">
                        <a class="dropdown-item" href="/Device">Sub menu</a>
                    </div>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/Test">Test</a>
                </li>
            </ul>
        </div>
    </nav>
    <div class="row flex-fill">
        <main class="col" style="background-color: yellow"></main>
    </div>
</div>

Note: The flex-fill utility class will be included in the next Bootstrap 4.1 release:
https://github.com/twbs/bootstrap/commit/2137d61eacbd962ea41e16a492da8b1d1597d3d9

(Updated Bootstrap 4.1 demo)

Related question: Bootstrap 4: How to make the row stretch remaining height?

How to make Bootstrap nav bar the same width with div

Container are required when using the default grid system. The two most common containers are:

.container, which sets a max-width for the page content
.container-fluid, which will take the full width of the screen
.container-{breakpoint}, which behaves like .container-fluid until it reaches the breakpoint then behaves like a .container.

You will find more details in the very clear documentation.
If we consider the second solution, putting your content in a div.container-fluid fixes the problem:

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand logo" href="#">my logo</a>
</nav>
<div class="container-fluid">  
  <div class="row">
    <div class="col-10" style="padding: 0px; background-color: lightgreen; height: 100vh">
    </div>
    <div class="col-2" style="padding: 0; background-color: lightblue; height: 100vh">
    </div>
  </div>
</div>

Bootstrap 4: How to Have a Full Width Navbar with The Content in a Container (Like The So Navbar)