htmlcssbootstrap-5bootstrap-grid

Empty space on the right when using the bootstrap 5.3.3 grid with 'row w-100'

I tried to use Bootstrap grid, but I encountered a problem. When I'm running the following code:

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>Card Gallery</title>
      <link href="
         https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
         rel="stylesheet" />
   </head>
   <body>
         <div class="row " style="height: 200px; background: gray; padding: 20px">
            <div class="col-4" style="background-color: brown;"></div>
            <div class="col-8" style="background-color: blue;"></div>
         </div>
      <script src="
         https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
   </body>
</html>

a horizontal scroll appearsenter image description here

to fix this, I added the 'w-100' class on the 'row' element

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>Card Gallery</title>
      <link href="
         https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
         rel="stylesheet" />
   </head>
   <body>
         <div class="row w-100" style="height: 200px; background: gray; padding: 20px">
            <div class="col-4" style="background-color: brown;"></div>
            <div class="col-8" style="background-color: blue;"></div>
         </div>
      <script src="
         https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
   </body>
</html>

but now I have space on the right. enter image description here

How to remove the scroll in the first case or remove the space on the right in the second case?

Solution

  • You are missing a Bootstrap container to wrap around the row. In Bootstrap, rows meant to be under containers (and/or possibily also under card-body in Bootstrap 4). Without that you will face the problem of not having the negative margins of the rows (accounting for being under container) being canceled out with the padding of the container. If you want a 100% width container just use container-fluid.

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />

<div class="container-fluid">
  <div class="row " style="height: 200px; background: gray; padding: 20px">
    <div class="col-4" style="background-color: brown;"></div>
    <div class="col-8" style="background-color: blue;"></div>
  </div>
</div>

    That being said, if you really don't want to change your HTML structure for some reason, add g-0 on the row.

    As for why the scrollbar or the empty space appears, you can check out this detailed explanation. In short it's because margins don't grow/shrink the width of the container (body in your original code), but only effects the row's width itself (which is affected by w-100).