Bodil132 Bodil132 - 3 months ago 4x
HTML Question

Why does this happen with .row and .container-fluid in bootstrap?

Thank you for taking a look at my question which is: I'm trying to create two boxes that have the .row class and they are both in a .container-fluid wrapping. Whenever I do this there's a weird space on the right, I don't know if this is a margin that bootstrap adds but from what I understand .container-fluid is supposed to be full screen?


The two boxes are yellow and white, the container-fluid is pink/magenta.


<div class="container-fluid">
<div class="row" style="background-color: #EFF3CD; width:100%; height:350px;"></div>

<div class="row" style="background-color: #FFF; width:100%; height:350px;"></div>

Any insights into why this is happening would be great and highly appreciated!


As @Tom suggests, the width of the row elements is "determined" (via css) for you as part of the package. So when one sets the width explicitly even to 100% they are working against what bootstrap is doing. The rose row is the required 30px wider than the blue. I believe that would be true even without the bootstrap javascript but I added it for completeness.

<link rel="stylesheet" href="" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<div class="container-fluid">
  <div class="row" style="background-color: aliceblue; width:100%; height:50px;"></div>
  <div class="row" style="background-color: mistyrose; height:50px;"></div>
  <div class="row" style="background-color: aliceblue; width:100%; height:50px;"></div>

<script src=""></script>
<script src="" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>