In this article, we will learn about 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. It is possible to create the horizontal spacing around the columns using empty columns, however, using the offset classes is an easier alternative.

Bulma Offset Classes:

• is-offset-one-quarter: This class is used for adding horizontal spacing for the columns where the spacing of one-quarter of the total width of the screen. This can also be used as one-fourth, one-fifth, one-third, etc.
• is-offset-x: This class is used for adding horizontal spacing for the columns where x can be used as any number between 1 – 12. For example, .is-offset-8 or .is-offset-4, etc. can be used.

Syntax:

<div class="columns is-mobile">
    <div class="column is-half is-offset-one-quarter">Column 1</div>
</div>
    ...
<div class="columns is-mobile">
    <div class="column is-4 is-offset-8">Column 2</div>
</div>

Example: This example illustrates the Bulma Column Offset.

Output:

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