”;
This chapter will discuss about Bootstrap gutters. Gutter provides padding between your columns. Gutters are used to responsively space and align content.
How it works
-
Gutters are generated by horizontal padding, and are spaces between the column content. Align the content using padding-right and padding-left on each column.
-
Gutters begin at a width of 1.5 rem (24px), hence allows us to align grid to the scale of padding and margin spacers.
-
Adjust gutters with breakpoint-specific classes to change horizontal, vertical, and all other gutters.
Horizontal gutters
.gx-* classes manage the widths of horizontal gutters, and if larger gutters are used, the parent .container or .container-fluid may require adjustment to prevent overflow. This can be done using a padding utility, such as .px-4 as demonstarted in below example.
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Gutters</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container px-4 text-center mt-2">
<div class="row gx-5">
<div class="col">
<div class="p-2 bg-info">First Column</div>
</div>
<div class="col">
<div class="p-2 bg-warning">Second Column</div>
</div>
</div>
</div>
</body>
</html>
Using overflow functionality
Adding a wrapper with the .overflow-hidden class to .row is another option.
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Gutters</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container overflow-hidden text-center">
<div class="row gx-5 mt-2">
<div class="col">
<div class="p-2 bg-info">First Column</div>
</div>
<div class="col">
<div class="p-2 bg-warning">Second Column</div>
</div>
</div>
</div>
</body>
</html>
Vertical gutters
-
The vertical gutter is used for responsive spacing, padding between columns, and aligning content with the grid.
-
Use .gy-* classes to control vertical gutter widths in a row when column wrapping occurs.
-
They can cause some overflow below the .row at the end of a page, like the horizontal gutters. To fix this, add a wrapper with .overflow-hidden class around a .row.
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Gutters</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container overflow-hidden text-center mt-2">
<div class="row gy-5">
<div class="col-6">
<div class="p-2 bg-info">First Column</div>
</div>
<div class="col-6">
<div class="p-2 bg-warning">Second Column</div>
</div>
<div class="col-6">
<div class="p-2 bg-info">Third Column</div>
</div>
<div class="col-6">
<div class="p-2 bg-warning">Fourth Column</div>
</div>
</div>
</div>
</body>
</html>
Horizontal and vertical gutters
To control the horizontal and vertical grid gutters, use .g-* classes. Use smaller gutter width. So, we won”t need of .overflow-hidden wrapper class.
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Gutters</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container text-center">
<div class="row g-2 mt-2">
<div class="col-6">
<div class="p-2 bg-info">First Column</div>
</div>
<div class="col-6">
<div class="p-2 bg-warning">Second Column</div>
</div>
<div class="col-6 ">
<div class="p-2 bg-info">Third Column</div>
</div>
<div class="col-6">
<div class="p-2 bg-warning">Fourth Column</div>
</div>
</div>
</div>
</body>
</html>
Row columns gutters
Gutter classes can be added to row columns with responsive design. Responsive row columns and responsive gutter classes are used in the example below:
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Gutters</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container text-center">
<div class="row row-cols-2 row-cols-lg-3 g-2 g-lg-3 mt-2">
<div class="col">
<div class="p-3 bg-info">First Row column</div>
</div>
<div class="col">
<div class="p-3 bg-warning">Second Row column</div>
</div>
<div class="col">
<div class="p-3 bg-info">Third Row column</div>
</div>
<div class="col">
<div class="p-3 bg-warning">Fourth Row column</div>
</div>
<div class="col">
<div class="p-3 bg-info">Fifth Row column</div>
</div>
<div class="col">
<div class="p-3 bg-warning">Sixth Row column</div>
</div>
</div>
</div>
</body>
</html>
No gutters
-
Remove gutters between columns with .g-0 in grid classes. This removes negative margins from .row and horizontal padding from immediate children columns.
-
Remove the parent .container or .container-fluid to create an edge-to-edge design and add .mx-0 to the .row to prevent overflow.
-
No gutters eliminates margin and padding for both row and columns.
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Gutters</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="row g-0 text-center mt-2">
<div class="col-sm-4 col-md-6 p-2 bg-info">First Column</div>
<div class="col-4 col-md-3 p-2 bg-warning">Second Column</div>
</div>
</body>
</html>
”;