Twitter Bootstrap - Full Width 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)

Navbar fixed to top but not full-width

You can override Bootstrap's positioning by setting it to fixed - use absolute if you don't want it to scroll with the page:

.navbar {
    position: fixed !important;
    top: 0px;
    width: 940px;
}

(consider giving it an ID if you plan on using multiple navbars)

Bootstrap 4: Full width collapsible navbar with different color to main navbar

To get this, don't use the default bg-light class - it applies !important which we want to avoid...

We can get this using a simple media query for this?

working snippet:

nav {  background-color: lightpink}
@media screen and (max-width:595px) {  nav {    background-color: lightgreen  }}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

<nav class="navbar  navbar-light floating navbar-expand-sm cm-navbar" id="mj-topbar">  <div class="container">    <a class="navbar-brand nb-brand" href="/index.php">My Brand</a>    <button type="button" class="navbar-toggler nb-hamburger-button" data-toggle="collapse" data-target="#collapseCoreNav" aria-controls="collapseCoreNav" aria-expanded="true" aria-label="Toggle Navigation">    <span class="navbar-toggler-icon"></span></button>    <div class="navbar-collapse collapse show" id="collapseCoreNav">      <ul class="navbar-nav ml-auto">        <li class="nav-item">          <a class="btn_ tdbLink fa-angle-right_ nav-link" href="/">Home</a>        </li>        <li class="nav-item">          <a class="btn_ tdbLink fa-angle-right_ nav-link" href="/login.php">Login</a>        </li>      </ul>    </div>  </div></nav>
<s

Full width navbar logo Bootstrap

    Please write navbar-brand like this inside of navbar-header
<div class="container-fluid">   
 <div class="navbar-header">
          <a class="navbar-brand" href="#"></a>
        </div>
</div>

navbar full-width of screen bootstrap 4.5

This may help. You must not have written any 'script'

 <head>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
    </head>
    <body>
      <nav class="navbar navbar-expand-sm bg-light navbar-light">
      <!-- Brand/logo -->
      <a class="navbar-brand" href="#">
        <img src="bird.jpg" alt="logo" style="width:40px;">
      </a>

      <!-- Links -->
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Contact</a>
        </li>
      </ul>
    </nav>
    </body>

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>