Bulma Column Sizes

Bulma is a free and open-source CSS framework based on flexbox. It comes with pre-styled components, which makes it easier to develop beautiful and responsive websites, as we don’t have to style everything from the ground up. In this article, we will be seeing the Bulma Column Sizes.

There are three categories in Bulma Column Sizes, 12 columns system, Offset and Narrow column, all of them are briefly described below:

Bulma Column Sizes:

• 12 columns system: Bulma provides us with a responsive grid system in which a container is divided into 12 columns, and we can resize our content according to the CSS classes provided by Bulma.
• Offset: The offset modifier of the Bulma framework is used for adding horizontal spacing with the use of custom class values like ".is-offset-8" or ".is-offset-one-fourth".
• Narrow column:  If you want a column to only take the space it needs, you can append the is-narrow modifier on that column. The other columns will adjust themselves and fill up the remaining space.

Syntax:

<div class="column Bulma-Column-Sizes-Type">
...
</div>

The below examples will illustrate the Bulma Column Sizes:

Example 1:

Output:

👁 Image

Example 2:

Output:

👁 Image

Reference: https://bulma.io/documentation/columns/sizes/