Bootsrap 4.5 navbar full width

Bootsrap 4.5 navbar full width
0

#1

I’m trying to create a basic navbar but it’s not fitting the full width of my page nor is it responding to any color classes, her’s the code for my header

<body>
<div class="container-fluid">
    <header>
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <a class="navbar-brand" href="#">Logo</a>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav">
                    <li class="nav-item"><a class="nav-link" href="newPage.html">Home</a></li>
                    <li class="nav-item"><a class="nav-link" href="about.html">About</a></li>
                    <li class="nav-item"><a class="nav-link" href="contact.html">Contact</a></li>
                </ul>
            </div>
        </nav>
    </header>

Any idea of what i am doing wrong?


#2

Below is the .container-fluid rule set.

.container-fluid {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

That is, you have to either place the .navbar outside the .container-fluid or over-write the padding-left and padding-right property of the .container-fluid to get the desired result. Another way is to wrap the .container-fluid with another div so that the navbar remains as if it is inside .contianer-fluid while you may color the wrapper to make the navbar look like taking the whole width of the viewport like so

<body>
  <div class="header-nav">
   <div class="container-fluid">
    <header>
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <!---  -->
        </nav>
     </header>
   </div>
 </div>
</body>