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 >
< 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
Share your thoughts in the comments
Please Login to comment...