csstwitter-bootstrapresponsive-designbootstrap-4twitter-bootstrap-4

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


I am using Bootstrap 4.

How do I make a navbar like the SO navbar?

With the content aligned like a "container" but the width of a "container-fluid" in bootstrap 4?

I want the width of the "fixed-top" navbar setting without it being fixed-top and the navbar content in a "container".

I would provide an example but I'm trying to make something exactly like the navbar at the top of this page.


Solution

  • 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>