BootStrap 5 Grid system Auto-layout columns
Bootstrap’s grid system is responsive. it’s come with a flexbox and allows up to 12 columns across the page. you can also group the columns together.
Auto-layout columns: To create easy column sizes without an explicit numbered class like .col-sm-6, Use breakpoint-specific column classes.
- Equal-width: The equal-width grid system is basically used to create the grid in equal sizes. With the help of classes, we will manage the grid’s width.
- Setting one column width: In this feature of Bootstrap5, you can set one column width and have the sibling columns automatically resize around it.
- Variable width content: In this feature of Bootstrap5, you can set to size columns based on the natural width of their content to use col-{breakpoint}-auto classes.
Syntax:
<div class="row">
<div class="col">
...
</div>
<div class="col">
...
</div>
</div>
Example 1: Let’s see an example of each column width being equal on each row.
HTML
<!DOCTYPE html>
< html >
< head >
< link href =
rel = "stylesheet"
crossorigin = "anonymous" >
< script src =
crossorigin = "anonymous" >
</ script >
</ head >
< body >
< div class = "text-center" >
< h1 class = "text-success" >
GeeksforGeeks
</ h1 >
< h3 >Bootstrap5 Auto-layout columns</ h3 >
< section class = "container" >
< section class = "row" >
< section class="col border
bg-danger">
GFG Column 1
</ section >
< section class="col border
bg-secondary">
GFG Column 2
</ section >
</ section >
< section class = "row" >
< section class="col border
bg-info">
GFG Column 1
</ section >
< section class="col border
bg-primary">
GFG Column 2
</ section >
< section class="col border
bg-success">
GFG Column 3
</ section >
</ section >
</ section >
</ div >
</ body >
</ html >
|
Output:
Auto-layout columns
Example 2: Let’s see an example of setting one column width.
HTML
<!DOCTYPE html>
< html >
< head >
< link href =
rel = "stylesheet"
crossorigin = "anonymous" >
< script src =
crossorigin = "anonymous" >
</ script >
</ head >
< body >
< div class = "text-center" >
< h1 class = "text-success" >
GeeksforGeeks
</ h1 >
< h3 >Bootstrap5 Auto-layout columns</ h3 >
< section class = "container" >
< section class = "row" >
< section class="col border
bg-danger">
GFG Column 1
</ section >
< section class="col-6 border
bg-light">
GFG Column 2 (wider)
</ section >
< section class="col border
bg-info">
GFG Column 3
</ section >
</ section >
</ section >
</ div >
</ body >
</ html >
|
Output:
Auto-layout columns
Reference: https://getbootstrap.com/docs/5.0/layout/grid/#auto-layout-columns
Last Updated :
16 Dec, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...