Bootstrap 4 container fluid unwanted margins [dupl

Question

This question already has answers here:

Bootstrap 4 correct way to use row and col classes [duplicate] (1 answer)

Bootstrap - do we have to use rows and columns? (2 answers)

Closed 2 years ago.

I'm writing a page in html using Bootstrap 4.2. I would like to have a horizontal navigation bar at the top of the page, that occupies the whole width of the page, and remains static during navigation.

I tried to use a few divs with the class "container-fluid". The problem is that a margin appears on the left and right side of the bar

Here is an example of what I get in jsfiddle

<div class="container-fluid">
      <div class="sticky-top shadow" id="containerMain">
        <div class="container-fluid bg-secondary text-light p-1">
          <div class="row align-items-center ">
            Line number one content here
          </div>
        </div>
        <div class="container-fluid filters bg-light align-items-center">
          <div class="row p-1">
            Line number two content here
          </div>
        </div>
      </div>
    </div>

Does anyone know how to make these unwanted margins disappear? I tried without the "container-fluid" class, but then the margin appears on the right side, with a horizontal scroll that I don't want either.

Thank you very much in advance,

Answer 1

I think the bootstrap "row" class adds some margin (15px). Maybe you can add an own class to make margin: 0. Or delete the row class

I wish that helped!

Thank you.

Answer 2

Not sure if this is what you're looking for:

Here's the jFiddle

  <nav class="fixed-top navbar-light bg-light m-0 p-0">
  <div class="container-fluid">
    <div class="row text-center text-light bg-secondary p-1">
      <div class="col">
        Line number 1 content here
      </div>
    </div>
     <div class="row text-center text-secondary bg-light p-1">
      <div class="col">
        Line number 2 content here
      </div>
    </div>
  </div>
 </nav>

Answer 3

container-fluid has padding-left and padding-right of 15px which is the gap you're seeing. You could overwrite it by adding the class px-0 which is padding of 0 for left and right. And you would then have to overwrite the 15px margins of the row with a mx-0 class.

But if it's a nav that you want, then what you should be using is the nav component of Bootstrap: https://getbootstrap.com/docs/4.1/components/navbar/