Open In App

Bootstrap 5 Gutters

Last Updated : 15 Dec, 2022
Improve
Improve
Like Article
Like
Save
Share
Report

Bootstrap 5 Gutters are used to give padding between columns,  responsively space, and align content to the grid system.

How gutters works?

  • Using the .padding-right and .padding-left classes, we can add padding to the right and left of each column. Gutters, which are produced by horizontal padding, are spaces between the content of columns.
  • Gutters begin at a width of 1.5 rem (24 px).

Bootstrap 5 Gutters:

  • Horizontal gutters: Horizontal gutter is used for horizontal padding between columns, responsively space, and aligning content to the grid system.
  • Vertical gutters: Vertical gutter is used for vertical padding between columns.
  • Horizontal & vertical Gutters: In bootstrap 5, horizontal & vertical gutters are used to give horizontal & vertical padding between columns.
  • Row columns gutters: This gutter is used to create responsive space in our grid.
  • No gutters: No gutters remove margin and padding from rows and columns.

Example 1: Let us see an example of vertical width by using the .gy-* class.

HTML




<!DOCTYPE html>
<html>
  
<head>
   <!-- Bootstrap CDN -->
    <link rel="stylesheet"
          href=
          crossorigin="anonymous">
</head>
  
<body class="m-2">
    <h1 class="text-success">GeeksforGeeks</h1>
    <h3>Bootstrap5 Gutters</h3>
   
    <div class="section overflow-hidden">
        <div class="gy-5">
            <div class="col-4 border">
                Vertical align
            </div>
            <div class="col-4 border">
                Vertical align
            </div>
            <div class="col-4 border">
                Vertical align
            </div>
            <div class="col-4 border">
                Vertical align
            </div>
        </div>
    </div>
</body>
</html>


Output:

Bootstrap 5 Gutters

Example 2: Let us see an example of horizontal width by using the .gx-* class.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <!-- Bootstrap CDN -->
    <link rel="stylesheet" 
          href=
          crossorigin="anonymous">
</head>
  
<body class="m-2">
    <h1 class="text-success">GeeksforGeeks</h1>
    <h3>Bootstrap5 Gutters</h3>
    <div class="container">
        <div class="g-0">
            <div class="col-4 border">GFG-1</div>
            <div class="col-4 border">GFG-2</div>
            <div class="col-4 border">GFG-3</div>
            <div class="col-4 border">GFG-4</div>
        </div>
    </div>
     
    <br><br>
    <p>
      <b>There is no margin and padding between rows</b>
    </p>
</body>
</html>


Output:

Bootstrap 5 Gutters

Bootstrap 5 Gutters

Reference: https://getbootstrap.com/docs/5.0/layout/gutters/



Previous Article
Next Article

Similar Reads

Bootstrap 5 Layout Gutters
Gutters are the gaps between the columns in bootstrap's grid layout. The gutter modifier classes can be used to change the widths of the gutters. There are 3 primary gutter modifier classes that are listed below: Bootstrap5 Layout Gutter Modifier Classes: g-*: This class is used to set the width of the gutter.gx-*: This class is used to set the wid
2 min read
Bootstrap 5 Horizontal Gutters
Bootstrap 5 Horizontal gutters are used for padding between columns, responsively space, and aligning content to the grid system. Bootstrap 5 Horizontal Gutter Class: gx-*: This class controls the horizontal widths of gutters. Note: (*) is used for numeric numbers like 1,2,3,4,5,6, etc. Syntax: &lt;div class="row gx-5"&gt; ... &lt;/div&gt; Example
2 min read
Bootstrap 5 Vertical Gutters
Vertical gutters: Vertical gutter is used for padding between columns, responsively space, and aligning content to the grid system. Bootstrap 5 Vertical Gutter Class: gy-*: This class is used to control the vertical widths of gutters. Note: (*) is used for numeric numbers like 1,2,3,4,.. etc. Syntax: &lt;div class="gy-3"&gt; ... &lt;/div&gt; Note:
2 min read
Bootstrap 5 Horizontal & Vertical Gutters
Horizontal &amp; vertical Gutters in bootstrap 5 are used to give padding between columns, responsively space, and align content to the grid system. Bootstrap 5 Horizontal &amp; vertical Gutter Class: g-*: This class controls the horizontal gutter widths. Note: (*) is used for numeric numbers like 1,2,3,4,5,6, etc. Syntax: &lt;div class="row g-2"
2 min read
Bootstrap 5 No Gutters
Bootstrap 5 No gutters remove margin and padding from .row and columns. Bootstrap 5 No gutter Class: g-0: This class is used to remove the gutter between our columns and rows. Syntax: &lt;div class="g-0"&gt; ... &lt;/div&gt; Example 1: let us see an example of no gutters. C/C++ Code &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;!-- Bootstrap
1 min read
Bootstrap 5 Row Columns Gutters
Bootstrap 5 Row columns gutters are used to create responsive space in our grid in the Bootstrap 5 framework. Bootstrap 5 Row columns gutter Class: row-cols-*: This class is used to set the number of columns that best render your content and layout. Note: * can have values like 1, 2, 3, and so on. Syntax: &lt;div class="row row-cols-2"&gt; ... &lt;
2 min read
Bootstrap 5 Grid Columns and Gutters
Bootstrap 5 is a very popular CSS Framework, that offers a complete range of tools and elements for creating responsive and mobile-first websites. Its robust grid structure, which enables developers to make flexible and adaptable layouts, is one of its main characteristics. In this article, we will see the two tools of bootstrap5 which are grid col
3 min read
Bootstrap 5 Change the gutters
Bootstrap 5 Change the gutters uses $spacer to make the $gutters SASS map. The gutters are used to give padding between the columns, responsively space, and align content to the grid system. Below is the list of default values of the $gutters map: $grid-gutter-width: 1.5rem; $gutters: ( 0: 0, 1: $spacer * .25, 2: $spacer * .5, 3: $spacer, 4: $space
3 min read
ReactJS MDBootstrap Gutters Layout
MDBootstrap is a Material Design and bootstrap-based react UI library that is used to make good-looking webpages with its seamless and easy-to-use component. In this article, we will know how to use Gutters Layout in ReactJS MDBootstrap. Gutters Layout is used to set the padding between columns in the Bootstrap grid system is used to responsively s
2 min read
Foundation CSS XY Grid Gutters
Foundation CSS is an open-source and responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to layout stunning responsive websites, apps, and emails that appear amazing and can be accessible to any device. In this article, we will discuss the XY Grid frame in Foundation CSS. In Foundation CSS, the XY Grid Gutt
2 min read