BootStrap5 Grid system Responsive classes
Grid system Responsive classes help to create a responsive layout using predefined six tiers classes of bootstrap 5 by customizing the size of columns with extra-small (xs), small (sm), medium (md), large (lg), or extra large (xl).
Bootstrap 5 Grid system Responsive Options:
- All breakpoints: When you need a particularly sized column, you can use this component of responsive classes. This provides .col and .col* classes to specify a numbered class.
- Stacked to horizontal: To create a basic grid system that starts out stacked and becomes horizontal, you can use the set of .col-sm-* classes.
- Mix and match: Simply stack in some grid tiers to your columns. Use a combination of different classes for each tier as per the need.
- Row columns: Use the row columns classes .row-cols-* to quickly create basic grid layouts or to control your card layouts and override when needed at the column level.
Example 1: Let us see an example of different widths of grids.
HTML
<!DOCTYPE html><html><head> <!-- Bootstrap CDN --> <link rel="stylesheet" href= crossorigin="anonymous"> <script src= crossorigin="anonymous"> </script></head><body class="m-2"> <h1 class="text-success">GeeksforGeeks</h1> <h3>Bootstrap5 Grid system Responsive classes</h3> <div class="container"> <!-- Stack the columns on mobile by making one full-width and the other half-width --> <div class="row"> <div class="col-md-8 border bg-primary"> .col-md-8 </div> <div class="col-6 col-md-4 border bg-danger"> .col-6 .col-md-4 </div> </div> </div></body></html> |
Output:
Example 2: Let us see another example of different widths of grids with different classes.
HTML
<!DOCTYPE html><html><head> <!-- Bootstrap CDN --> <link rel="stylesheet" href= crossorigin="anonymous"> <script src= crossorigin="anonymous"> </script></head><body class="m-2"> <h1 class="text-success">GeeksforGeeks</h1> <h3>Bootstrap5 Grid system Responsive classes</h3> <div class="container"> <div class="row row-cols-4"> <div class="col border bg-danger"> GFG </div> <div class="col border bg-primary"> GFG </div> <div class="col border bg-warning"> GFG </div> <div class="col border bg-secondary"> GFG </div> </div> </div> <br><br> <div class="container"> <div class="row row-cols-auto"> <div class="col border bg-success"> GFG </div> <div class="col border bg-secondary"> GFG </div> <div class="col border bg-info"> GFG </div> <div class="col border bg-danger"> GFG </div> </div> </div> <br><br> <div class="container"> <div class="row row-cols-2"> <div class="col border bg-danger"> GFG </div> <div class="col border bg-secondary"> GFG </div> <div class="col border bg-primary"> GFG </div> <div class="col border bg-info"> GFG </div> </div> </div></body></html> |
Output:
Reference: https://getbootstrap.com/docs/5.0/layout/grid/#responsive-classes
Please Login to comment...