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">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=
"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">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

BootStrap 5 Grid system Setting one column width

Explore