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/bulma@0.9.3/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/bulma@0.9.3/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>