Bootstrap 5 Layout Column sizing

Last Updated : 18 Nov, 2022

Bootstrap 5 Layout Column sizing is used to set the width of the column element. To create equal widths columns, .col within .row classes are used. We can also use the subset of classes to set split the columns unequally.

Layout Column sizing used Classes:

.row: This class is used to create rows for a layout.
.col: This class is used to create columns for a layout.
.col-*: This class is used to set the size of columns of the layout.

Syntax:

<div class="row">
    <div class="col">
        ...
    </div>
    ...
</div>

Example 1: In this example, we will create 2 rows and 1 column using .row and .col classes.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Bootstrap 5 Layout Column Sizing</title> 
    <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> 
    <div class="container text-center"> 
        <h1 class="text-success"> 
            GeeksforGeeks 
        </h1> 
  
        <h2>Bootstrap 5 Layout Column Sizing</h2> 
  
        <div class="row"> 
            <div class="col"> 
                <input type="text" class="form-control" 
                    placeholder="Username/Email"
                    aria-label="Username/Email"> 
            </div> 
        </div> 
        <br> 
  
        <div class="row"> 
            <div class="col"> 
                <input type="password" class="form-control" 
                    placeholder="Password"
                    aria-label="Password"> 
            </div> 
        </div> 
    </div> 
</body> 
  
</html>

Output:

Example 2: In this example, we will create 3 rows and 2 columns using .row, .col, and .col-* classes.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Bootstrap 5 Layout Column Sizing</title> 
    <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> 
    <div class="container text-center"> 
        <h1 class="text-success"> 
            GeeksforGeeks 
        </h1> 
  
        <h2>Bootstrap 5 Layout Column Sizing</h2> 
  
        <div class="row"> 
            <div class="col-sm-6"> 
                <input type="text" class="form-control" 
                    placeholder="First Name"> 
            </div> 
            <div class="col-sm-6"> 
                <input type="text" class="form-control" 
                    placeholder="Last Name"> 
            </div> 
        </div> 
        <br> 
  
        <div class="row"> 
            <div class="col-sm-6"> 
                <input type="email" class="form-control" 
                    placeholder="Email Id"> 
            </div> 
            <div class="col-sm-6"> 
                <input type="tel" class="form-control" 
                    placeholder="Mobile"> 
            </div> 
        </div> 
        <br> 
  
        <div class="row"> 
            <div class="col-sm-8"> 
                <input type="text" class="form-control" 
                    placeholder="Address"> 
            </div> 
            <div class="col-sm"> 
                <input type="text" class="form-control"
                    placeholder="Zip Code"> 
            </div> 
        </div> 
    </div> 
</body> 
  
</html>