Bootstrap 5 Columns

Last Updated : 03 Jan, 2023

Bootstrap 5 Columns facilitates the different option for the alignment, ordering, and offsetting of the Columns with the help of flexbox grid system. The different available column classes can be utilized to manage widths of non-grid elements.

Bootstrap 5 Columns: The following components is used that helps to align the columns vertically and horizontally, along with reordering them, which are described below:

Alignment: It utilizes flexbox alignment to order items either vertically or horizontally. It has 4 ways for alignment:
- Vertical alignment: It is used to align items vertically.
- Horizontal alignment: It is used to align items horizontally.
- Column Wrapping: It is used to wrap overflowed columns into the new line.
- Column Breaks: It is used to break columns into new line.
Reordering: It is used to reorder items in a column, based on the bootstrap 5 class given to the HTML elements. It has 2 for reordering:
- Order Classes: It is used to control the visual order of the content using order class, & are responsive classes.
- Offsetting Columns: It is used to control the order of the content using the offset grid class.
Standalone Column Cases: It is utilized to give an element a specific width with no padding, by default.

Syntax:

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

Example 1: In this example, we will assign different widths to columns in a row.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
        rel="stylesheet"
        integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
        crossorigin="anonymous">
</head>
 
<body>
    <h1 class="text-success">
        GeeksforGeeks
    </h1>
    <h3>Bootstrap 5 Columns</h3>
 
    <div class="container">
        <div class="row">
            <div class="col-2 text-white bg-primary">
                Col 2
            </div>
            <div class="col-3 text-white bg-secondary">
                Col 3
            </div>
            <div class="col-4 text-white bg-info">
                Col 4
            </div>
        </div>
    </div>
</body>
 
</html>

Output:

Example 2: In this example, we will assign different ordering and widths to columns in a row.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
        rel="stylesheet"
        integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
        crossorigin="anonymous">
</head>
 
<body>
    <h1 class="text-success">
        GeeksforGeeks
    </h1>
     
    <h3>Bootstrap 5 Columns</h3>
 
    <div class="container">
        <div class="row">
            <div class="col-2 text-white 
                        bg-primary order-2">
                Order 2
            </div>
            <div class="col-3 text-white 
                        bg-secondary order-3">
                Order 3
            </div>
            <div class="col-4 text-white 
                        bg-info order-1">
                Order 1
            </div>
        </div>
    </div>
</body>
 
</html>