Bootstrap 5 Grid Columns and Gutters
Last Updated :
22 Sep, 2023
Bootstrap 5 is a very popular CSS Framework, that offers a complete range of tools and elements for creating responsive and mobile-first websites. Its robust grid structure, which enables developers to make flexible and adaptable layouts, is one of its main characteristics. In this article, we will see the two tools of bootstrap5 which are grid columns and gutters.
Grid Columns
In the Bootstrap 5 grid system, the page can be divided into 12 columns and it is very helpful in making responsive designs. It helps us in organizing the page content. The predefined classes of bootstrap5 are used to define the column width and its behavior. The different breakpoints that are available in Bootstrap 5, which divides the column into different widths are:
- “sm” = (576px and up)
- “md” = (768px and up)
- “lg” = (992px and up)
- “xl” = (1200px and up)
- “xxl” = (1400px and up)
The syntax for writing grid columns is given below.
Syntax:
col-[breakpoint]-[value]
In the above syntax “breakpoint” refers to the device size and “value” refers to the number of columns.
Example 1:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<link href=
rel="stylesheet"
integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
</head>
<body>
<div class="row">
<div class="col-md-3 bg-success">
GeeksforGeeks 1
</div>
<div class="col-md-3"> Space </div>
<div class="col-md-3 bg-success">
GeeksforGeeks 2
</div>
</div>
</body>
</html>
|
Output:
In this above example “col-md-3” means that each column should span 3 columns out of 12 columns available on medium-sized devices.
-660.png)
Example 2:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<link href=
rel="stylesheet"
integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-4 col-md-4 bg-success">
Geeksforgeeks 1
</div>
<div class="col-sm-4 col-md-6 bg-primary">
Geeksforgeeks 2
</div>
</div>
</div>
</body>
</html>
|
Output:
In this above example “col-sm-4” means that each column should span 4 columns out of 12 columns available on small devices and “col-md-4” , “col-md-6” defines the column width for medium devices.
On Small Devices
-660.png)
On Medium Devices
-660.png)
Gutters
Gutters describe the spacing between columns that is horizontal. You can adjust the distance between columns by using classes that Bootstrap 5 offers to add gutters between columns.
The various types of gutters in Bootstrap 5 are:
- Horizontal gutters: It used to give horizontal space between columns.
- Vertical gutters: It used to give Vertical space between columns.
- Horizontal & vertical gutters: It used to give horizontal and vertical space between columns.
- Row column gutters: It used to give space between rows and columns.
- No gutters: It is used to remove margins and padding from rows and columns.
Syntax:
gx-[value] //Horizontal gutters
gy-[value] //Vertical gutters
g-[value] //Horizontal & vertical gutters
g-[size]-[value] //Row column gutters
g-0 //No gutters
Example 1:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<link href=
rel="stylesheet"
integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row gx-3">
<div class="col">
<div class="bg-success">
Geeksforgeeks 1
</div>
</div>
<div class="col">
<div class="bg-success">
Geeksforgeeks 2
</div>
</div>
</div>
</div>
</body>
</html>
|
Output:
In the above example, “gx-3” there should be a space of (3 * 0.25rem) = 0.75rem between the columns.
-660.png)
Example 2:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<link href=
rel="stylesheet"
integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row g-3">
<div class="col-6">
<div class="bg-success">
Geeksforgeeks 1
</div>
</div>
<div class="col-6">
<div class="bg-success">
Geeksforgeeks 2
</div>
</div>
<div class="col-6">
<div class="bg-success">
Geeksforgeeks 3
</div>
</div>
<div class="col-6">
<div class="bg-success">
Geeksforgeeks 4
</div>
</div>
</div>
</div>
</body>
</html>
|
Output :
-660.png)
Share your thoughts in the comments
Please Login to comment...