BootStrap 5 Grid system Setting one column width
Last Updated :
05 Jan, 2023
Bootstrap 5 Grid system Setting one column width is used to set the width of a specific column, it can be applied to any column. The Auto-layout for flexbox grid columns means you can set the width of one column and the sibling columns will automatically resize around it.
Bootstrap 5 Grid system Setting one column width Class: There is no specific class for this, you .an use the col-& classes to set the width.
Syntax:
<div class="row">
<div class="col">
...
</div>
<div class="col-6">
...
</div>
<div class="col">
...
</div>
</div>
Example 1: The code in the example shows how setting only the center column’s width leads the other columns to resize themselves accordingly.
HTML
<!doctype html>
< html lang = "en" >
< head >
< link href =
rel = "stylesheet"
integrity =
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin = "anonymous" >
< script src =
integrity =
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin = "anonymous" >
</ script >
</ head >
< body class = "m-3" >
< h1 class = "text-success" >GeeksforGeeks</ h1 >
< strong >BootStrap5 Grid system Setting one column width</ strong >
< div class = "container mt-4 text-light" >
< div class = "row" >
< div class = "col bg-success border" >
Column 1
</ div >
< div class = "col-8 bg-success border" >
Column 2
</ div >
< div class = "col bg-success border" >
Column 3
</ div >
</ div >
</ div >
</ body >
</ html >
|
Output:
Example 2: The code in the example shows how setting only the center column’s width inside even Nested Grid also leads the other columns to resize themselves accordingly:
HTML
<!doctype html>
< html lang = "en" >
< head >
< link href =
rel = "stylesheet"
integrity =
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin = "anonymous" >
< script src =
integrity =
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin = "anonymous" >
</ script >
</ head >
< body class = "m-3" >
< h1 class = "text-success" >GeeksforGeeks</ h1 >
< strong >
BootStrap5 Grid system Setting one column width
</ strong >
< div class = "container text-light mt-4" >
< div class = "row" >
< div class = "col-1 bg-secondary border" >
Col 1
</ div >
< div class = "col-1 bg-secondary border" >
Col 2
</ div >
< div class = "col bg-secondary border" >
< div class = "container" >
< div class = "row" >
< div class="col bg-success
border">
Small Col 1
</ div >
< div class="col-6 bg-success
border">
Small Col 2
</ div >
< div class="col bg-success
border">
Small Col 3
</ div >
</ div >
</ div >
</ div >
</ div >
</ div >
</ body >
</ html >
|
Output:
Reference: https://getbootstrap.com/docs/5.0/layout/grid/#setting-one-column-width
Share your thoughts in the comments
Please Login to comment...