Bootstrap 5 Horizontal Gutters
Bootstrap 5 Horizontal gutters are used for padding between columns, responsively space, and aligning content to the grid system.
Bootstrap 5 Horizontal Gutter Class:
- gx-*: This class controls the horizontal widths of gutters.
Note: (*) is used for numeric numbers like 1,2,3,4,5,6, etc.
Syntax:
<div class="row gx-5">
...
</div>
Example 1: Let us see an example of Horizontal gutters.
HTML
<!DOCTYPE html>
< html >
< head >
< link rel = "stylesheet"
href =
crossorigin = "anonymous" >
< script src =
crossorigin = "anonymous" >
</ script >
</ head >
< body class = "m-2" >
< h1 class = "text-success" > GeeksforGeeks</ h1 >
< h3 >Bootstrap5 Horizontal Gutters</ h3 >
< div class="container-fluid overflow-hidden
bg-dark">
< div class = "row gx-5" >
< div class = "col-6" >
< div class="p-2 border
bg-light m-3">
GeeksforGeeks
</ div >
</ div >
< div class = "col-6" >
< div class="p-2 border
bg-light m-3">
GeeksforGeeks
</ div >
</ div >
</ div >
</ div >
</ body >
</ html >
|
Output:
Example 2: Let us see another example of Horizontal gutters.
HTML
<!DOCTYPE html>
< html >
< head >
< link rel = "stylesheet"
href =
crossorigin = "anonymous" >
< script src =
crossorigin = "anonymous" >
</ script >
</ head >
< body class = "m-2" >
< h1 class = "text-success" > GeeksforGeeks</ h1 >
< h3 >Bootstrap5 Horizontal Gutters</ h3 >
< div class="container-fluid overflow-hidden
bg-info">
< div class = "row gx-5" >
< div class = "col-3" >
< div class="p-2 border
bg-light m-3">
JAVA
</ div >
</ div >
< div class = "col-3" >
< div class="p-2 border
bg-light m-3">
PYTHON
</ div >
</ div >
< div class = "col-3" >
< div class="p-2 border
bg-light m-3">
HTML
</ div >
</ div >
< div class = "col-3" >
< div class="p-2 border
bg-light m-3">
CSS
</ div >
</ div >
</ div >
</ div >
</ body >
</ html >
|
Output:
Reference: https://getbootstrap.com/docs/5.0/layout/gutters/#horizontal-gutters
Last Updated :
15 Dec, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...