Bootstrap 5 No Gutters

Last Updated : 28 Apr, 2025

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:

<div class="g-0">
    ...
</div>

Example 1: let us see an example of no gutters.

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">
</head>

<body class="m-2">
    <h1 class="text-success">GeeksforGeeks</h1>
    <h3>Bootstrap5 No 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 class="col-4 border">GFG-4</div>
            <div class="col-4 border">GFG-6</div>
        </div>
   </div>   
    <br><br>
    <p><b> There is no margin and padding between rows</b></p>
</body>
</html>

Output:

 

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

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">
</head>

<body class="m-2">
    <h1 class="text-success">GeeksforGeeks</h1>
    <h3>Bootstrap5 No Gutters</h3>

    <div class="container">
        <div class="row 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 class="col-4 border">GFG-5</div>
            <div class="col-4 border">GFG-6</div>
            <div class="col-4 border">GFG-7</div>
            <div class="col-4 border">GFG-8</div>
            <div class="col-4 border">GFG-9</div>
            <div class="col-4 border">GFG-10</div>
        </div>
    </div>
    <br><br>
    <p><b> There is no margin and padding between rows </b></p>
</body>
</html>

Output:

 

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

Comment

Explore