BootStrap 5 Grid system Setting one column width
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 = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin = "anonymous" > < script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity = "sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin = "anonymous" > </ script > </ head > < body class = "m-3" > < h1 class = "text-success" >w3wiki</ 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 = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin = "anonymous" > < script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity = "sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin = "anonymous" > </ script > </ head > < body class = "m-3" > < h1 class = "text-success" >w3wiki</ 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
Contact Us