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 width of the gutter in the horizontal direction.
- gy-*: This class is used to set the width of the gutter in the vertical direction.
* can range from 0-5
Syntax:
<div class="container"> <div class="row g-3"> <div class="col"> ... </div> <div class="col"> ... </div> </div> </div>
Example 1: In this example, we used the horizontal gutter classes to change the spacing between the bootstrap’s grid columns.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin = "anonymous" > </ head > < body > < div > < div class = "text-center" > < h1 class = "text-success" > w3wiki </ h1 > < strong >Bootstrap 5 Layout Gutters</ strong > </ div > < div class = "container text-center" > < div class = "row gx-5" > < div class = "col-6" > < div class = "p-4 border bg-danger" > Column 1 </ div > </ div > < div class = "col-6" > < div class = "p-4 border bg-success" > Column 2 </ div > </ div > </ div > < div class = "row gx-2" > < div class = "col-4" > < div class = "p-4 border bg-info" > Column 1 </ div > </ div > < div class = "col-4" > < div class = "p-4 border text-bg-dark" > Column 2 </ div > </ div > < div class = "col-4" > < div class = "p-4 border bg-warning" > Column 3 </ div > </ div > </ div > </ div > </ div > </ body > </ html > |
Output:
Example 2: In this example, we use the gutter modifier class which sets both horizontal and vertical gutter.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin = "anonymous" > </ head > < body > < div class = "container" > < div class = "text-center" > < h1 class = "text-success" > w3wiki </ h1 > < strong >Bootstrap 5 Layout Gutters</ strong > </ div > < div class = "container text-center" > < div class = "row g-3" > < div class = "col-6" > < div class = "p-4 border bg-danger" > Column 1 </ div > </ div > < div class = "col-6" > < div class = "p-4 border bg-success" > Column 2 </ div > </ div > < div class = "col-4" > < div class = "p-4 border bg-info" > Column 1 </ div > </ div > < div class = "col-4" > < div class = "p-4 border text-bg-dark" > Column 2 </ div > </ div > < div class = "col-4" > < div class = "p-4 border bg-warning" > Column 3 </ div > </ div > < div class = "col-6" > < div class = "p-4 border text-bg-secondary" > Column 1 </ div > </ div > < div class = "col-6" > < div class = "p-4 border bg-primary" > Column 2 </ div > </ div > </ div > </ div > </ div > </ body > </ html > |
Output:
Reference: https://getbootstrap.com/docs/5.2/forms/layout/#gutters