Bootstrap 4 navbar full width?

[mrchow19910319]

Have no idea how to make navbar full width here. 

Do I have to change the CSS of the page? 

Or there is a class I can use in bootstrap? 

 

https://codepen.io/zhouxiang19910319/pen/ZxmZQd?editors=1100

 

 

 

[Cruorzy]

Remove the container-fluid class or put the nav-bar above it.

 

<nav class="navbar navbar-dark bg-dark">
  <a class="navbar-brand sticky-top" href="#">Start Bootstrap</a>        
</nav>

 

[mrchow19910319]

5 minutes ago, Cruorzy said:

Remove the container-fluid class or put the nav-bar above it.

 

<nav class="navbar navbar-dark bg-dark">
  <a class="navbar-brand sticky-top" href="#">Start Bootstrap</a>        
</nav>

 

wait.... why container-fluid stopped it being full width??? wasnt it supposed to make the whole page responsive?? 

[Cruorzy]

Just keep you to the docs, css might conflict and alot of trial and error

[HarryNyquist]

5 hours ago, mrchow19910319 said:

wait.... why container-fluid stopped it being full width??? wasnt it supposed to make the whole page responsive?? 

container-fluid makes the page 100% wide on all viewport sizes. container has the responsive breakpoints built-in so as you resize the viewport, it changes the max-width of the <div> to various different pixel widths (the exact widths are here)

A navbar is fluid by default, so it should go above any containers, and you apply the responsive classes to the navbar items to make things change (documentation for that here)