Question 230705 in Html Question posted in
Some basic documentation can be found here.

Html – How to increase Bootstrap column gap in a row beyond .g-5 with Vanilla CSS?

Am building a simple landing page using bootstrap. I need to increase column gap in the row. I know we can increase the gap by customizing sass spacing mixin but since website am building includes couple of sections I want to keep it simple without build process. I have used g-5 classname on row which gives like 32px or 40px gap between columns. How to increase it further using CSS.

 <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>
Tags:

2

Answers


  1. 0

    To increase the gap between Bootstrap columns without using custom SASS or a build process, you can apply some custom CSS.

    <style>
  .custom-gap-row {
    margin: 0 -15px; /* Adjust this value to control the gap */
  }
  .custom-gap .col-lg-4 {
    padding: 0 15px; /* Corresponding padding to counteract negative margin */
  }
</style>

<div class="container mt-5 pt-5">
  <div class="row text-light g-5 fs-1 custom-gap-row">
    <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>

    In this solution, I’ve added a negative horizontal margin to the .custom-gap-row class and corresponding padding to the .col-lg-4 elements. This creates the illusion of increased spacing between columns while keeping them within the same row and maintaining the layout.

    You can adjust the negative margin value as needed to control the gap between columns.

    Login or Signup to reply.
  2. 0

    To increase the column gap in the row using CSS, you can use the grid-column-gap property. This property specifies the space between columns in a grid layout.

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

.row {
  text-light;
  g-5;
  fs-1;
  grid-column-gap: 50px;
}
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search