Open In App

Bootstrap 5 Columns

Last Updated : 03 Jan, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

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


Output:

 

Reference: https://getbootstrap.com/docs/5.0/layout/columns/



Previous Article
Next Article

Similar Reads

Bootstrap 5 Columns Offsetting Columns
Bootstrap 5 Offsetting columns can offset grid columns in two ways, offset classes and margin utilities. Offset classes are used to match the size of columns and margin utilities are used for quick layouts. Bootstrap 5 Offsetting columns: Offset classes: This class is used to set the offset of the grid. Size is the among small (sm), medium (md), an
2 min read
How to create five equal columns in Bootstrap ?
Creating any number of equal columns in a 'row' was never as easier as it is now in Bootstrap 4.0+. With the introduction of 'flexbox' approach to the grid system, designers don't have to worry about adding additional CSS to make it work. Here's how it is done. Approach: Go to the Bootstrap site and get the latest Bootstrap files onto your computer
2 min read
How to use Bootstrap to align labels with content into 4 columns ?
The motive of this article is to align the content into four columns where the first two columns denote the labels and its content and the last two columns denote the labels and its content. The class "row" and "col" are used to create a grid which can be represented by a number of rows and columns. The class "row" creates a row into which the cont
2 min read
How to fixed one column and scrollable other column or columns in Bootstrap ?
Bootstrap provides several built-in features to the users. This makes development faster and smoother. However, in some cases, external CSS and jQuery has to be implemented to the web page's coding in order to give it a personalized touch. Usually, the Bootstrap grid is used to divide the web-page into 12 equal columns. These columns can be grouped
4 min read
How to put two columns one below other in sidebar in Bootstrap ?
Developed by Mark Otto and Jacob Thornton, Bootstrap is a free and open-source responsive CSS framework used for front-end web development. Though Bootstrap 5 Alpha is the most recent version of Bootstrap launched on 16th June 2020, it is still in the development phase and hence most of the developers are continuing to use Bootstrap 4. Bootstrap is
5 min read
How to keep gap between columns using Bootstrap?
We can keep gap between columns by using normal CSS but here we will use the Bootstrap framework for that. In this article, we will keep a measured gap between columns by the following methods. Using "div" tag: Simply adding a "div" with padding in between two "div" tags gives spacing between the "div". Example: &lt;!DOCTYPE html&gt; &lt;html lang=
2 min read
How to create unequal columns in Bootstrap ?
Bootstrap is a responsive framework created by Twitter. It is used to create responsive sites. It has a pre-defined class and design. In Bootstrap, we can add pre-defined classes into the code without writing code. We also have a predefined ".col" class to create columns. Grid Layout System: The whole working screen(desktop, tablet, mobile) is divi
2 min read
What are Offsetting columns in Bootstrap 3 Grid System ?
Offsetting: It looks awesome when the content of our webpage is visible on the full viewport width of the available device width. But in some cases, we have to provide some area to the components of web page around them which makes them look more awesome. So, To achieve this target bootstrap introduces us to the concept of Offsetting. Offsetting is
4 min read
Bootstrap 5 Row Columns Gutters
Bootstrap 5 Row columns gutters are used to create responsive space in our grid in the Bootstrap 5 framework. Bootstrap 5 Row columns gutter Class: row-cols-*: This class is used to set the number of columns that best render your content and layout. Note: * can have values like 1, 2, 3, and so on. Syntax: &lt;div class="row row-cols-2"&gt; ... &lt;
2 min read
Bootstrap 5 Columns Reordering
Bootstrap 5 Columns Reordering holds the feature of manipulation of column order visually and offsets grid columns. Order class is used to do the order change and offsetting is used to set the offset on the grid column. Order classes: Order classes are used to set the visual order of the columns inside a row irrespective of their position in the Do
2 min read