Open In App

Bootstrap 5 Columns Breaks

Last Updated : 29 Jul, 2024
Comments
Improve
Suggest changes
Like Article
Like
Report

Bootstrap 5 Columns are smaller cells or sections inside a row in a Grid System. The columns are placed beside one another until it exceeds the 12-column limit for each row. Column breaks are used if we manually want to push to the new line before or without exceeding the limit. There is no exact class that is used to make a break instead there is a trick that we can follow to break the row in middle. The trick is adding a div element with a 100% width after the column where we want the Row to break. 

Bootstrap 5 Columns breaks Used Classes:

  • w-100: This is the width class that is used to specify how much width the element will have and in this example, the element has 100% width.

Note: The screen breakpoints are also used for column breaks.

Syntax:

<div class="row">
    <!-- Column Elements before break --!>

    <!-- This element has a 100% width and it
    breaks the columns in between  -->
    <div class="w-100"></div>
    <!-- Column Elements after break --!>
</div>

Example 1: The code below demonstrates how we can add a column break in a simple row:

HTML 
<!doctype html>
<html lang="en">

<head>
    <title>Bootstrap 5 Column breaks</title>
    <link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" 
        rel="stylesheet"
        integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
        crossorigin="anonymous">
</head>

<body>
    <h1 class="text-success">
        GeeksforGeeks
    </h1>

    <strong>Bootstrap 5 Column breaks</strong>

    <div class="row text-light mt-4">
        <div class="col-2 bg-success border">
            2 sections
        </div>
        <div class="col-4 bg-success border">
            4 sections
        </div>
        <div class="w-100"></div>
        <div class="col-3 bg-success border">
            3 sections
        </div>
        <div class="col-3 bg-success border">
            3 sections
        </div>
    </div>
</body>

</html>

Output:

 

Example 2: The code below shows how we can add the break responsively at any specific screen sizes by using the display properties where the break occurs at md sized screen or above.

HTML 
<!doctype html>
<html lang="en">

<head>
    <title>Bootstrap 5 Column breaks</title>
    <link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
        rel="stylesheet"
        integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
        crossorigin="anonymous">
</head>

<body>
    <h1 class="text-success">
        GeeksforGeeks
    </h1>

    <strong>Bootstrap 5 Column breaks</strong>

    <div class="row text-light mt-4">
        <div class="col-2 col-md-3 bg-success border">
            1st Col
        </div>
        <div class="col-2 col-md-2 bg-success border">
            2nd Col
        </div>
        <div class="col-3 col-md-2 bg-success border">
            3rd Col
        </div>

        <div class="w-100 d-none d-md-block"></div>

        <div class="col-3 col-md-2 bg-success border">
            4th Col
        </div>
        <div class="col-2 col-md-3 bg-success border">
            5th Col
        </div>
    </div>
</body>

</html>

Output:

Reference: https://getbootstrap.com/docs/5.0/layout/columns/#column-breaks 


T
triashabiswas
Improve
Article Tags :

Explore

Lightbox