Open In App

Bootstrap 5 Horizontal Gutters

Improve
Improve
Like Article
Like
Save
Share
Report

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:

 <div class="row gx-5">
    ...
 </div>

Example 1: Let us see an example of Horizontal gutters.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <!-- Bootstrap CDN -->
    <link rel="stylesheet" 
        href=
        crossorigin="anonymous">   
    <script src=
        crossorigin="anonymous"
    </script>    
</head>
<body class="m-2">
    <h1 class="text-success"> GeeksforGeeks</h1>
    <h3>Bootstrap5 Horizontal Gutters</h3>
  
    <div class="container-fluid overflow-hidden 
                bg-dark">
        <div class="row gx-5">
            <div class="col-6">
                <div class="p-2 border 
                        bg-light m-3">
                    GeeksforGeeks 
                </div>
            </div>
            <div class="col-6">
                <div class="p-2 border 
                         bg-light m-3">
                    GeeksforGeeks 
                </div>
            </div>
        </div>
    </div>
</body>
</html>


Output:

 

Example 2: Let us see another example of Horizontal gutters.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <!-- Bootstrap CDN -->
    <link rel="stylesheet"
        href=
        crossorigin="anonymous">    
    <script src=
        crossorigin="anonymous">
    </script>   
</head>
  
<body class="m-2">
    <h1 class="text-success"> GeeksforGeeks</h1>
    <h3>Bootstrap5 Horizontal Gutters</h3>
  
    <div class="container-fluid overflow-hidden 
                bg-info">
        <div class="row gx-5">
            <div class="col-3">
                <div class="p-2 border 
                    bg-light m-3">
                    JAVA
                </div>
            </div>
            <div class="col-3">
                <div class="p-2 border 
                    bg-light m-3">
                    PYTHON
                </div>
            </div>
            <div class="col-3">
                <div class="p-2 border 
                    bg-light m-3">
                    HTML
                </div>
            </div>
            <div class="col-3">
                <div class="p-2 border 
                    bg-light m-3">
                    CSS
                </div>
            </div>
        </div>
    </div
</body>
</html>


Output:

 

Reference: https://getbootstrap.com/docs/5.0/layout/gutters/#horizontal-gutters



Last Updated : 15 Dec, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads