Bootstrap Container-Fluid - Remove Margins The Right Way (Overflow)

bootstrap container-fluid - remove margins the right way (overflow)

To be specific about your question:

The .row has a negative left and right margin equal to the left/right padding value of the col-*-*, that is why there are horizontal scrollbars when you fiddle with the grid without understanding how it works. If you manipulate the column classes with zero padding on the left and right or with some other value, the negative margin on the .row must be equal to the the padding on the left and right of the column classes. The .container also has padding that matches the value of the column classes to prevent the scrollbars.

So the answer is: .container-fluid > .row -- make the margin:0 on the left and right if you remove the padding on the left and right of the column classes. If all is zero, then you can just adjust the .container or .container fluid with zero padding on the left and right, but if you use different values > 15px L & R, then it's a different story as the .container/.container-fluid will need to be adjusted if the left and right padding on the columns is greater than 15px.

There are no margins on the col-*-* it's padding which is quite different when you use box-sizing:border-box globally as Boostrap 3 does.

If you want a tight grid, remove all padding on the left and right of all column classes and then remove the negative margin on the left and right of the .row, and then you can remove the left and right padding on the .container.

DEMO: http://jsbin.com/jeqase/2/

Removes all padding and negative margin for a tight grid and full width of the .container with any surrounding element (body, html, whatever) with the class .alt-grid:

.alt-grid [class*="col-"] {padding-left:0;padding-right:0}
.alt-grid .row {margin-left:0;margin-right:0}

/* container adjusted */
.alt-grid .container {width:100%;max-width:none;padding:0;}

You can also do this with .container-fluid - the only thing to zero out is the left and right padding.

Bootstrap 4 container fluid unwanted margins

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/

Remove default padding-left and padding-right in container-fluid while from Bootstrap 5

The problem is that styles.css should follow bootstrap.min.css in the HEAD tag. Once this is done the .container-fluid padding override you've set will take precedence...

<head>
  <meta charset="utf-8">
  <title>TinDog</title>

  <!-- Added Ubuntu & Montserrat font from Google font -->
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@900&family=Ubuntu&display=swap" rel="stylesheet">

  <!-- Added CSS bootstrap -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">

  <!-- Added CSS-->
  <link rel="stylesheet" href="css/styles.css">

</head>

https://codeply.com/p/3VrA65Nv72

Also see: How can I override Bootstrap CSS styles?

How do I remove spacing around elements inside .container-fluid?

Change the class name .container-fluid to something else as that is a bootstrap predefined class.

You can change the class name to anything else you want.

Codepen: https://codepen.io/manaskhandelwal1/pen/mdrzqOM

Cant seem to get rid of padding with of fluid container in Bootstrap 4

Add the class no-gutters to the row to get rid of the gutters.

That's how you remove that unwanted margin in Bootstrap 4.

Your content, ANY content, must then always go into a Bootstrap column.

Only Bootstrap columns may be direct children of Bootstrap rows. No exceptions.

And if you only need one column, just use the col class for that.

You may also need to add the px-0 (horizontal padding 0) to the container like so:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div id="top-banner-vid" class="container-fluid px-0">    <div class="row no-gutters">        <div class="col">            <video class="embed-responsive embed-responsive-16by9" autoplay loop muted>                <source class="embed-responsive-item" src="http://www.icutpeople.com/wp-content/themes/icutpeople/assets/video/waynesworld.mp4" type="video/mp4">                Your browser does not support the video tag.            </video>        </div>    </div></div>

Bootstrap Container-Fluid - Remove Margins The Right Way (Overflow)