Open In App

Bumla Offset

Improve
Improve
Like Article
Like
Save
Share
Report

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.

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <link
      rel="stylesheet" href=
    />
</head>
<body>
    <div class="container content has-text-centered">
        <h1 class="title has-text-success">
          GeeksforGeeks
        </h1>
        <h2 class="subtitle">
          Bulma Column Offset
        </h2>
  
        <!-- Offset starts here -->
        <div class="columns is-mobile">
            <div class="column is-half 
                        is-offset-one-fifth
                        has-background-primary 
                        title my-4 p-4">
                This is column 1 with offset one fifth
            </div>
          </div>
            
          <div class="columns is-mobile">
            <div class="column is-three-fifths 
                        is-offset-one-fourth 
                        has-background-primary
                        title my-4 p-4">
                This is column 2 with offset one fourth
            </div>
          </div>
            
          <div class="columns is-mobile">
            <div class="column is-4 
                        is-offset-6 
                        has-background-primary 
                        title my-4 p-4">
                This is column 3 with offset 6
            </div>
          </div>
            
          <div class="columns is-mobile">
            <div class="column is-11 
                        is-offset-3 
                        has-background-primary 
                        title my-4 p-4">
                This is column 4 with offset 3
            </div>
          </div>
    </div>
</body>
</html>


Output:

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



Last Updated : 13 Feb, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads