Bulma Variable Gap

Last Updated : 29 Dec, 2021

Bulma Variable Gap class is used to create defined gap between columns, there are 9 modifiers of options in this class. All the classes are mentioned and described below. This class can be used as column width.

Bulma Variable Gap:

is-0: This class removes the gap between classes. It is similar to the Gapless class.
is-1: This class creates a gap between the column of 0.25rem.
is-2: This class creates a gap between the column of 0.5rem.
is-3: This class creates a gap between the column of 0.75rem and this is the default value.
is-4: This class creates a gap between the column of 1rem.
is-5: This class creates a gap between the column of 1.25rem.
is-6: This class creates a gap between the column of 1.5rem.
is-7: This class creates a gap between the column of 1.75rem.
is-8: This class creates a gap between the column of 2rem.

Note: This feature is only available in browsers that support CSS Variables.

Example 1: The below example illustrates the Variable gap in Bulma

HTML

<!DOCTYPE html>
<html>

<head>
    <link rel='stylesheet' 
          href=
'https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css'>
</head>

<body class="has-text-centered">
    <h1 class="is-size-2 has-text-success">
        GeeksforGeeks
    </h1> <b>Bulma Variable Gap</b>
    <br>
    <section class="section">
        <div class="container">
            <div class="columns">
                <div class="column has-background-success"> 
                  First column 
                </div>
                <div class="column is-0"></div>
                <div class="column has-background-primary"> 
                  Second column
                </div>
                <div class="column is-1"></div>
                <div class="column has-background-success"> 
                  Third column 
                </div>
                <div class="column is-2"></div>
                <div class="column has-background-primary"> 
                  Fourth column
                </div>
                <div class="column is-3"></div>
            </div>
        </div>
        </section>
</body>

</html>

Output:

Example 2:

HTML

<!DOCTYPE html>
<html>

<head>
    <link rel='stylesheet'
          href=
'https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css'> 
</head>

<body class="has-text-centered">
    <h1 class="is-size-2 has-text-success">
        GeeksforGeeks
    </h1> <b>Bulma Variable Gap</b>
    <br>
    <section class="section">
        <div class="container">
            <div class="columns">
                <div class="column has-background-success"> 
                  First column </div>
                <div class="column is-1"></div>
                <div class="column has-background-primary"> 
                  Second column </div>
                <div class="column is-1"></div>
                <div class="column has-background-success"> 
                  Third column </div>
                <div class="column is-2"></div>
                <div class="column has-background-primary"> 
                  Fourth column </div>
                <div class="column is-2"></div>
            </div>
        </div>
        </section>
</body>

</html>

Output:

Reference: https://bulma.io/documentation/columns/gap/#variable-gap

Bulma Tabs Variables

skyridetim

Improve

Article Tags :

Bulma Variable Gap

Similar Reads

Thank You!

What kind of Experience do you want to share?