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.
Flexbox alignment utilities is very useful to align column either vertically or horizontally.
.align-items-start
inside .row
class.
.align-items-center
inside .row
class.
.align-items-end
inside .row
class.
Note:In this example .align-items-start
is used to align all the column at the top of container.
Note:
In this example, .align-items-center
is used to align all the columns at the center of the container.
Note: In this example, .align-items-end
is used to align all the columns at the bottom of the container.
.align-self-start
inside .row
class.
.align-self-center
inside .row
class.
.align-self-end
inside .row
class.
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.
Aligning starts from the left side of the container on the horizontal axis or x-axis.
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.
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.
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.
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.
Note:In the above example,column wrapping concept is used.
Breaking columns to a new line in flexbox requires an element with width: 100%.
Note: In the above example, column breaking concept is used.
Column break can be applied at a specific breakpoint.
Note:In the above example,column break concept is mention based on specfic device breakpoint.
To order the visual content, use .order
class. You can also apply it at a specific breakpoint(e.g., .order-1,.order-md-2).
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.
Bootstrap 5 column offset work on the basis of the left margin that will be generated by the column whenever applied offset to a specific column.
Offset classes is generally applied on the specific column using .offset-md-*
classes. to generate left margin of a column by *
columns.For example, .offset-md-4
moves .col-md-4
over four columns.
Note:In the above example,column offset concept is used.