Bootstrap 5 Gutters

Bootstrap 5 gutter system is an essential feature that allows you to add spacing between columns in your layout. The gutter system helps to create a more visually appealing design by separating content and making it easier to read.

The gutter system in Bootstrap provides various classes that allow you to control the gutter size between columns. The default gutter size is 1.5rem, but you can change this value using the appropriate classes.

The size of gutters can be from value 0 to 5.

• .gy-0 to .gy-5 classes are used to control the vertical gutter widths.
• .gx-0 to .gx-5 classes are used to control the horizontal gutters widths.
• .g-0 to .g-5 classes are used to control both vertical and horizontal gutters.

To add gutters between the columns, apply the appropriate gutter classes. Bootstrap 5 provides .g-* classes for both horizontal and vertical gutters. Use .g-0 for no gutters. Use .g-1, .g-2, .g-3, …, and .g-5 for increasing gutter sizes. These classes provide an easy way to adjust the gutter size and create consistent spacing between columns.

<div class="container text-center">
  <div class="row g-2">
    <div class="col-6">
      <div class="placeholder">Column 1</div>
    </div>
    <div class="col-6">
      <div class="placeholder">Column 2</div>
    </div>
    <div class="col-6">
      <div class="placeholder">Column 3</div>
    </div>
    <div class="col-6">
      <div class="placeholder">Column 4</div>
    </div>
  </div>
</div>

In the above code snippet, the .g-2 class is applied to the .row element, creating a small gutter size of 2 between the columns.

Horizontal Gutters

Using horizontal gutters allows you to control and adjust the spacing between columns horizontally in your layout. Use the .gx-* classes to add horizontal gutters. The x stands for "x-axis" or horizontal. The * represents a number from 0 to 5, indicating the horizontal gutter size. Similarly, use .gx-0 for no horizontal gutters and .gx-1, .gx-2, .gx-3, .gx-4, or .gx-5 for increasing horizontal gutter sizes. For example:

<div class="container text-center">
  <div class="row gx-3">
    <div class="col-6">
      <div class="placeholder">column 6</div>
    </div>
    <div class="col-6">
      <div class="placeholder">column 6</div>
    </div>
  </div>
</div>

However, when using larger horizontal gutters, it's important to adjust the parent container to prevent unwanted overflow. This can be achieved by applying a matching padding utility. For instance, consider the following example where we've increased the gutter size and adjusted the padding using .px-4:

<div class="container px-4 text-center">
  <div class="row gx-5">
    <div class="col">
        <div class="placeholder">Column 1</div>
    </div>
    <div class="col">
        <div class="placeholder">Column 2</div>
    </div>
  </div>
</div>

In the above code snippet, the .container element has the .px-4 class, which adds horizontal padding of size 4. This adjustment ensures that the increased gutter size does not cause overflow or affect the overall layout negatively.

By combining the .gx-* classes for horizontal gutters with appropriate padding utilities, such as .px-*, you can effectively manage the gutter widths and maintain the desired layout structure without any unwanted issues.

There is another solution to prevent unwanted overflow. You need to add a wrapper around the .row with the .overflow-hidden class:

<div class="container overflow-hidden text-center">
  <div class="row gx-5">
    <div class="col">
     <div class="placeholder">Column 1</div>
    </div>
    <div class="col">
      <div class="placeholder">Column 2</div>
    </div>
  </div>
</div>

By utilizing the .overflow-hidden class, you can effectively handle and manage overflowing content due to wider gutters, ensuring a neat and contained layout..

Vertical Gutters

To control the vertical gutter within a row when columns wrap to new lines, you can utilize the .gy-* classes. The * represents a number from 0 to 5, indicating the gutter size. These classes allow you to adjust the vertical gutter size.

Example

Here's an example of using vertical gutters:

<div class="container text-center">
  <div class="row gy-2">
    <div class="col-12">
      <div class="placeholder">Column 12</div>
    </div>
    <div class="col-12">
      <div class="placeholder">Column 12</div>
    </div>
  </div>
</div>

In the provided code snippet, a small vertical gutter of size 2 is applied between the columns within the row.

When using larger vertical gutters, it's important to note that, like horizontal gutters, vertical gutters can cause overflow below the .row element, especially at the end of a page.

In such cases, a solution is to add a wrapper around the .row element with the .overflow-hidden class. This class helps prevent any potential overflow issues by ensuring that the content remains within the designated area..

Here's an example of how you can implement this solution:

<div class="container overflow-hidden text-center">
  <div class="row gy-5">
    <div class="col-12">
      <div class="placeholder">Column 12</div>
    </div>
    <div class="col-12">
      <div class="placeholder">Column 12</div>
    </div>
  </div>
</div>

In the above code snippet, the .overflow-hidden class is applied to a wrapper .container surrounding the .row element. This wrapper ensures that any potential overflow caused by vertical gutters is contained and does not affect the layout or extend beyond the designated area.

Mixing Gutters : .g-*, .gx-* and .gy-*

You can also combine horizontal and vertical gutters by using both .gy-* and .gx-* classes on the row element. This allows you to control both the horizontal and vertical spacing between columns in a grid layout. For example, you might use the .gx-2 class to add a horizontal gutter of size 0.5rem or the .gy-4 class to add a vertical gutter of size 1.5rem. Here's the code for combining horizontal and vertical gutters.

<div class="container text-center">
  <div class="row gx-2 gy-4">
    <div class="col-6">
      <div class="placeholder">Column 1</div>
    </div>
    <div class="col-6">
      <div class="placeholder">Column 2</div>
    </div>
    <div class="col-6">
      <div class="placeholder">Column 3</div>
    </div>
    <div class="col-6">
      <div class="placeholder">Column 4</div>
    </div>
  </div>
</div>

In the code snippet above, the .gx-2 class is applied to the .row element to create a small horizontal gutter of size 2 between the columns. The .gy-4 class is also applied to the .row element to create a small vertical gutter of size 4 between the rows.

By combining the .gx-* classes and the .gy-* classes on the same .row element, you can achieve a grid layout with both horizontal and vertical gutters. Adjust the gutter sizes by selecting the desired .gx-* and .gy-* classes based on your design requirements.

This allows you to have full control over the horizontal and vertical spacing between columns, providing a flexible and customizable grid layout in Bootstrap.

Responsive Gutters

You can create responsive gutters by using the responsive suffixes available for gutter classes. These suffixes allow you to define different gutter sizes based on different screen sizes.

To apply responsive gutters, use the appropriate gutter classes along with responsive suffixes. The suffixes are based on screen size breakpoints:

• sm for small
• md for medium
• lg for large
• xl for extra large
• xxl for xx-large screens

To define different gutter sizes for different screen sizes, use the following classes:

• .g-{breakpoint}-*: Use this class to specify the gutter size for a specific breakpoint. Replace {breakpoint} with the desired breakpoint name, such as sm, md, lg, xl, or xxl. Replace * with a number from 0 to 5, indicating the gutter size. For example, g-md-2 sets a medium gutter size of 2 for the md breakpoint.
• .gx-{breakpoint}-*: Use this class to control the horizontal gutters for a specific breakpoint.
• .gy-{breakpoint}-*: This class controls the vertical gutters for a specific breakpoint.

Here's an example demonstrating the usage of responsive gutters:

<div class="container text-center">
  <div class="row g-2 g-md-4 gx-lg-5">
    <div class="col">
      <div class="placeholder">Column 1</div>
    </div>
    <div class="col">
      <div class="placeholder">Column 2</div>
    </div>
  </div>
</div>

In the above code snippet, a small gutter size of 2 is set for the default (xs) breakpoint, a larger gutter size of 4 is set for the md breakpoint, and a large horizontal gutter size of 5 is set for the lg breakpoint.

By utilizing the responsive gutter classes, you can dynamically adjust the spacing between columns based on different screen sizes, ensuring an optimal and visually pleasing layout across various devices.

No Gutters

You have the option to remove gutters (spacing between columns) from your grid layout using the .g-0, .gx-0, and .gy-0 classes. These classes allow you to create a layout without any gutters, resulting in columns that are tightly packed together. Here's how you can achieve a no-gutter layout:

<div class="container text-center">
  <div class="row g-0">
    <div class="col">
      <div class="placeholder">Column 1</div>
    </div>
    <div class="col">
      <div class="placeholder">Column 2</div>
    </div>
  </div>
</div>

In the above example, the .g-0 class is applied to the .row element, indicating that there should be no gutters between the columns.

Use the .gy-0 class to remove the vertical gutter, .gx-0 class to remove the horizontal, and .g-0 class to remove both horizontal and vertical gutters widths.

<div class="container text-center">
  <div class="row gx-0 gy-4">
    <div class="col-6">
      <div class="placeholder">column 1</div>
    </div>
    <div class="col-6">
      <div class="placeholder">column 2</div>
    </div>
    <div class="col-6">
      <div class="placeholder">column 3</div>
    </div>
    <div class="col-6">
      <div class="placeholder">column 4</div>
    </div>
  </div>
</div>

In the above example, the .gx-0 class is applied to the .row element, indicating that there should be no horizontal gutters between the columns.

In summary, Bootstrap 5 gutter system is a simple yet powerful way to add spacing between columns in your layout. With the ability to define different gutter sizes and responsive breakpoints, you can create a visually appealing and functional website that looks great on any screen size.