Bootstrap 5 Columns Breaks

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:

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.

Output:

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