Bumla Offset
Last Updated :
13 Feb, 2022
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
Share your thoughts in the comments
Please Login to comment...