Open In App

Bootstrap 5 Row Columns Gutters

Last Updated : 23 Jul, 2025
Comments
Improve
Suggest changes
Like Article
Like
Report

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:

<div class="row row-cols-2">
    ...
</div>

Example 1: let us see an example of a row-column gutter.

HTML 
<!DOCTYPE html>
<html>

<head>
    <!-- Bootstrap CDN -->
    <link rel="stylesheet" 
        href=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
        crossorigin="anonymous">  
    <script src=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"
        crossorigin="anonymous"> 
    </script>    
</head>

<body class="m-2">
    <h1 class="text-success">GeeksforGeeks</h1>
    <h3>Bootstrap5 Row columns gutters</h3>

    <div class="container">
        <div class="row row-cols-lg-5
                row-cols-2 
                g-lg-3">

            <div class="col">
                <div class="p-3 border 
                    bg-primary">
                    GFG 1
                </div>
            </div>
            <div class="col">
                <div class="p-3 border 
                    bg-secondary">
                    GFG 2
                </div>
            </div>
            <div class="col">
                <div class="p-3 border
                        bg-success">
                    GFG 3
                </div>
            </div>
            <div class="col">
                <div class="p-3 
                    border bg-danger">
                    GFG 4
                </div>
            </div>
            <div class="col">
                <div class="p-3 border 
                        bg-warning">
                    GFG 5
                </div>
            </div>
            <div class="col">
                <div class="p-3 border 
                    bg-info">
                    GFG 6
                </div>
            </div>
            <div class="col">
                <div class="p-3 border 
                    bg-dark">
                    GFG 7
                </div>
            </div>
            <div class="col">
                <div class="p-3 border 
                        bg-light">
                    GFG 8
                </div>
            </div>
            <div class="col">
                <div class="p-3 border 
                        bg-warning">
                    GFG 9
                </div>
            </div>
            <div class="col">
                <div class="p-3 border 
                    bg-danger">
                    GFG 10
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Output:

Example 2: let us see another example of a row-column gutter.

HTML 
<!DOCTYPE html>
<html>

<head>
    <!-- Bootstrap CDN -->
    <link rel="stylesheet" 
        href=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
        crossorigin="anonymous">   
    <script src=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"
        crossorigin="anonymous"> 
    </script>    
</head>

<body class="m-2">
    <h1 class="text-success">GeeksforGeeks</h1>
    <h3>Bootstrap5 Row columns gutters</h3>

    <div class="box">
        <div class="row row-cols-2 
            row-cols-lg-5 
            g-2 g-lg-3">
            <div class="col border">
                GeekforGeeks
            </div>
            <div class="col border">
                GeekforGeeks
            </div>
            <div class="col border">
                GeekforGeeks
            </div>
            <div class="col border">
                GeekforGeeks
            </div>
            <div class="col border">
                GeekforGeeks
            </div>
            <div class="col border">
                GeekforGeeks</div>
            <div class="col-4 col-lg-2 
                    border">
                GeekforGeeks
            </div>
            <div class="col-4 col-lg-2 
                    border">
                GeekforGeeks
            </div>
            <div class="col-4 col-lg-2 
                    border">
                GeekforGeeks</div>
            <div class="col-4 col-lg-2 
                    border">
                GeekforGeeks</div>
            <div class="col-4 col-lg-2 
                    border">
                GeekforGeeks
            </div>
            <div class="col-4 col-lg-2 
                    border">
                GeekforGeeks
            </div>       
        </div>
    </div>
</body>
</html>

Output:

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


P
pokhrajverma6266
Improve
Article Tags :

Explore

Lightbox