Bootstrap 5 Row Columns Gutters
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> <!-- Bootstrap CDN --> <link rel="stylesheet" href= "https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" crossorigin="anonymous"> <script src= "https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js" crossorigin="anonymous"> </script> </head> <body class="m-2"> <h1 class="text-success">w3wiki</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> <!-- Bootstrap CDN --> <link rel="stylesheet" href= "https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" crossorigin="anonymous"> <script src= "https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js" crossorigin="anonymous"> </script> </head> <body class="m-2"> <h1 class="text-success">w3wiki</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"> GeekforBeginner </div> <div class="col border"> GeekforBeginner </div> <div class="col border"> GeekforBeginner </div> <div class="col border"> GeekforBeginner </div> <div class="col border"> GeekforBeginner </div> <div class="col border"> GeekforBeginner</div> <div class="col-4 col-lg-2 border"> GeekforBeginner </div> <div class="col-4 col-lg-2 border"> GeekforBeginner </div> <div class="col-4 col-lg-2 border"> GeekforBeginner</div> <div class="col-4 col-lg-2 border"> GeekforBeginner</div> <div class="col-4 col-lg-2 border"> GeekforBeginner </div> <div class="col-4 col-lg-2 border"> GeekforBeginner </div> </div> </div> </body> </html> |
Output:
Reference:https://getbootstrap.com/docs/5.0/layout/gutters/#row-columns-gutters
Contact Us