<p>A simple landing page is being built using bootstrap. I need to increase the column spacing in the rows. I know we can increase the spacing with a custom sass spacing mixin, but since the website I'm building contains several sections, I want to keep it simple and not require a build process. I used g-5 class names on the rows, which provides 32px or 40px spacing between columns. How to increase it further using CSS. </p> <pre class="brush:php;toolbar:false;"><div class="container mt-5 pt-5"> <div class="row text-light g-5 fs-1"> <div class="col-lg-4"> <div class="bg-dark p-5">column</div> </div> <div class="col-lg-4"> <div class="bg-dark p-5">column</div> </div> <div class="col-lg-4"> <div class="bg-dark p-5">column</div> </div> </div> </div></pre>

.container {
  mt-5;
  pt-5;
}

.row {
  text-light;
  g-5;
  fs-1;
  grid-column-gap: 50px;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<div class="container mt-5 pt-5">
  <div class="row text-light g-5 fs-1">
    <div class="col-lg-4">
      <div class="bg-dark p-5">column</div>
    </div>
    <div class="col-lg-4">
      <div class="bg-dark p-5">column</div>
    </div>
    <div class="col-lg-4">
      <div class="bg-dark p-5">column</div>
    </div>
  </div>
</div>