

Bootstrap 4 is a free [HTML](https://www.educative.io/answers/catalog-html), [CSS](https://www.educative.io/answers/catalog-css), and [JavaScript](https://www.educative.io/answers/javascript-style-guide) framework which enables programmers to create responsive, mobile-first websites. It includes design templates for typography, forms, buttons, navigation, and other interface elements that are based on CSS and (optionally) JavaScript.





The [Bootstrap](https://www.educative.io/answers/what-is-bootstrap) grid system prioritizes mobile-first design and is responsive. Classes in bootstrap let us specify how much space there should be between the content and the column. 





<h2>Gutters in bootstrap</h2>

In a bootstrap grid, gutters are the intervals between columns. They are the voids between the components. They are positioned so that each column has an additional 30 pixels on both sides. Gutters are the padding between columns, used to space responsively and align content in the bootstrap grid system.





Gutters are created by horizontal padding when padding-left and padding-right are being set on each column and the negative margin is set to offset that at the start and the end of each row to align content. Gutters can be responsibly adjusted using specific to modify the gutters.





<h2>Types of gutters</h2>



<h3>Horizontal gutters</h3>




Horizontal gutter widths are controlled by the gx- classes adjusting the container or the container-fluid parents if larger gutters are used to avoid unwanted overflow. An example is shown below.





<html>
 <head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
 </head>
 <body>
   <div class="container px-4">
  <div class="row gx-5">
    <div class="col">
     <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
  </div>
</div>


  <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
 </body>
</html>

codemirror

### Explanation

* **Lines 6–8**: A container is created with a row class controlled by horizontal classes `gx-5` thereby adjusting the container.

* **Lines 8–12**: Two columns are created. Each with a padding of *3* and a background color `light` , aligned with the text **custom column padding**.

<h2>Vertical gutters</h2>




The gx- classes can also be used to control the vertical gutter widths. The vertical gutters can also cause some overflow below the row at the end of the page. An example is shown below.





<html>
 <head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
 </head>
 <body>
   <div class="container overflow-hidden">
  <div class="row gy-5">
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
  </div>
</div>


<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
 </body>
</html>

## Explanation

* **Lines 6–7**: A container class is created with a hidden overflow and a row controlled by vertical gutter widths `gy-5`.

* **Lines 8-21**: Four-column classes are created and padded with a background image *light* and the text **custom column padding**.

<h2>Row-column gutters</h2>




Gutters can also be added to row columns by using responsive row columns and responsive gutter classes. An example is shown below.





<html>
 <head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
 </head>
 <body>
   <div class="container">
  <div class="row row-cols-2 row-cols-lg-5 g-2 g-lg-3">
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
  </div>
</div>


<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
 </body>
</html>


## Code explanation

* **Lines 6–7:** A container is being created with a row-column and responsive gutter classes `g-2` and `g-lg-3`.

* **Lines 8–39:** 10-column classes are padded and styled with the background colour *light* with the text **Row-column**.

What are gutters in Bootstrap?

Gutters in Bootstrap are paddings between columns in a grid, ensuring responsive spacing and alignment using horizontal, vertical, and row-column classes.