Bootstrap 5 Column

Bootstrap 5 column works on the basis of a 12-column grid template. These columns are placed within a row. These columns could be aligned, ordered, and offset.

Alignment

Flexbox alignment utilities is very useful to align column either vertically or horizontally.

Vertical Alignment Of Columns

To align all the columns at the top of container, you have to use class .align-items-start inside .row class.
To align all the columns at the center of container, you have to use class .align-items-center inside .row class.
To align all the columns at the bottom of container, you have to use class .align-items-end inside .row class.

Column: Vertically Top Alignment

General Syntax

Try it now

Source Code

Try it now

Code Explanation

Note:In this example .align-items-start is used to align all the column at the top of container.

Column: Vertically Center Alignment

General Syntax

Try it now

Source Code

Try it now

Code Explanation

Note: In this example, .align-items-center is used to align all the columns at the center of the container.

Column: Vertically Bottom Alignment

General Syntax

Try it now

Source Code

Try it now

Code Explanation

Note: In this example, .align-items-end is used to align all the columns at the bottom of the container.

Aligning Of Individual Column Inside Container

To align a single columns at the top of container, you have to use class .align-self-start inside .row class.
To align a single columns at the center of container, you have to use class .align-self-center inside .row class.
To align a single columns at the bottom of container, you have to use class .align-self-end inside .row class.

General Syntax

Try it now

Source Code

Try it now

Code Explanation

Note: In this example,.align-self-start, .align-self-center,.align-self-end is used to place container's child element to top,center & bottom respectively.This alignment process happens vertically on y-axis.

Horizontal Alignment

Aligning starts from the left side of the container on the horizontal axis or x-axis.

justify-content-start

justify-content-start: Aligning starts from the left side of the container on horizontal axis or x-axis.

Source Code

Try it now

Code Explanation

Note:Please keep in mind that .justify-content-start is used to align the container's child elements along the x-axis or horizontal axis from the start.

justify-content-center

justify-content-center: All the column or children element of the row is aligned on the center of the x-axis or horizontal axis.

General Syntax

Try it now

Source Code

Try it now

Code Explanation

Note: Please keep in mind that .justify-content-center is used to align all the column or children elements of the row to the center of the x-axis or horizontal axis.

justify-content-end

justify-content-end:All the children item of the row is moved to the end of the container.

Source Code

Try it now

Code Explanation

Note:Please keep in mind that .justify-content-end is used to align all the column or children elements of the row to the end of the container horizontally.

Column wrapping

If any row contains more than 12 columns within a single row then extra column is considered as one unit and wrap into a new line.

If the summation of all column row is less than or equal to twelve then it places into the first-row line and the rest places into the second line of the row if the sum of all the columns is less than or equal to twelve columns.

Source Code

Try it now

Code Explanation

Note:In the above example,column wrapping concept is used.

Column breaks

Breaking columns to a new line in flexbox requires an element with width: 100%.

Source Code

Try it now

Code Explanation

Note: In the above example, column breaking concept is used.

Column break can be applied at a specific breakpoint.

General Syntax

Try it now

Source Code

Try it now

Code Explanation

Note:In the above example,column break concept is mention based on specfic device breakpoint.

Reordering

Order classes

To order the visual content, use .order class. You can also apply it at a specific breakpoint(e.g., .order-1,.order-md-2).

General Syntax

Try it now

Source Code

Try it now

Code Explanation

Note: In the above example,row's child element can be ordered by providing .order-* or .order-{xs/sm/md/xl/xxl}-* to the child element base class.