Bulma Align content

Bulma is a modern, free and open-source CSS framework built on flexbox. It comes with pre-styled components and elements that let you create beautiful and responsive websites fast. It is component-rich, compatible, and well documented. It is highly responsive in nature. It uses classes to implement its design.

Bulma align-content is used to specify the alignment between the lines inside a flexible container. It defines how each flex line is aligned within a flexbox and is only applicable if flex-wrap: wrap is applied i.e. if there are multiple lines of flexbox items present.

Bulma Align content classes:

• is-align-content-flex-start: It is used to display the lines at the start of the flex container.
• is-align-content-flex-end: It acts in the opposite manner of is-align-content-flex-start. It is used to align the flex lines at the end of the flex container
• is-align-content-center: Lines are placed on the center of the flex container.
• is-align-content-space-between: It aligns the flex lines with equal space between them.
• is-align-content-space-around: Space will be distributed equally around the flex lines.
• is-align-content-space-evenly: This is used to position the items evenly spaced around the items.
• is-align-content-start: It aligns the items at the start of the container.
• is-align-content-end: It aligns the items at the end of the container.
• is-align-content-stretch: This is used to stretch the items to fit the container
• is-align-content-baseline: This is used to align the items to the baseline of the container

Syntax:

<div class="is-align-content-flex-start">
 ...
</div>

Example 1: The following code demonstrates the is-align-content-flex-start class.

Output:

👁 Bulma Align content

Example 2: The following code demonstrates the is-align-content-flex-end class.

Output:

👁 Bulma Align content

Example 3:  The following code demonstrates the is-align-content-center class.

Output:

👁 Bulma Align content

Example 4: The following code demonstrates the is-align-content-space-between class.

Output:

👁 Bulma Align content

Example 5: The following code demonstrates the is-align-content-space-around class.

Output:

👁 Bulma Align content

Reference Link: https://bulma.io/documentation/helpers/flexbox-helpers/#align-content