Bootstrap 5 Row Columns Gutters
Last Updated :
15 Dec, 2022
Bootstrap 5 Row columns gutters are used to create responsive space in our grid in the Bootstrap 5 framework.
Bootstrap 5 Row columns gutter Class:
- row-cols-*: This class is used to set the number of columns that best render your content and layout.
Note: * can have values like 1, 2, 3, and so on.
Syntax:
<div class="row row-cols-2">
...
</div>
Example 1: let us see an example of a row-column gutter.
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 Row columns gutters</h3>
<div class="container">
<div class="row row-cols-lg-5
row-cols-2
g-lg-3">
<div class="col">
<div class="p-3 border
bg-primary">
GFG 1
</div>
</div>
<div class="col">
<div class="p-3 border
bg-secondary">
GFG 2
</div>
</div>
<div class="col">
<div class="p-3 border
bg-success">
GFG 3
</div>
</div>
<div class="col">
<div class="p-3
border bg-danger">
GFG 4
</div>
</div>
<div class="col">
<div class="p-3 border
bg-warning">
GFG 5
</div>
</div>
<div class="col">
<div class="p-3 border
bg-info">
GFG 6
</div>
</div>
<div class="col">
<div class="p-3 border
bg-dark">
GFG 7
</div>
</div>
<div class="col">
<div class="p-3 border
bg-light">
GFG 8
</div>
</div>
<div class="col">
<div class="p-3 border
bg-warning">
GFG 9
</div>
</div>
<div class="col">
<div class="p-3 border
bg-danger">
GFG 10
</div>
</div>
</div>
</div>
</body>
</html>
|
Output:
Example 2: let us see another example of a row-column gutter.
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 Row columns gutters</h3>
<div class="box">
<div class="row row-cols-2
row-cols-lg-5
g-2 g-lg-3">
<div class="col border">
GeekforGeeks
</div>
<div class="col border">
GeekforGeeks
</div>
<div class="col border">
GeekforGeeks
</div>
<div class="col border">
GeekforGeeks
</div>
<div class="col border">
GeekforGeeks
</div>
<div class="col border">
GeekforGeeks</div>
<div class="col-4 col-lg-2
border">
GeekforGeeks
</div>
<div class="col-4 col-lg-2
border">
GeekforGeeks
</div>
<div class="col-4 col-lg-2
border">
GeekforGeeks</div>
<div class="col-4 col-lg-2
border">
GeekforGeeks</div>
<div class="col-4 col-lg-2
border">
GeekforGeeks
</div>
<div class="col-4 col-lg-2
border">
GeekforGeeks
</div>
</div>
</div>
</body>
</html>
|
Output:
Reference:https://getbootstrap.com/docs/5.0/layout/gutters/#row-columns-gutters
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...