Bulma Default Gap

Last Updated : 02 Feb, 2022

In this article, we’ll be seeing the Bulma Default gap. Bulma default gap is used in columns in which each column has the same or equal gap as of variable that has a value of 0.75rem.

Bulma Default gap Class: There is no such specific class used but the column class can be used to give the gap between different columns.

Syntax:

<div class="columns">
 <div class="column">
 ....
 </div>
</div>

Below example illustrate the Bulma Default gap:

Example:

HTML

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible"
          content="IE=edge"> 
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0"> 
    <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 class="is-size-5"> 
      Bulma Default gap 
    </b> 
    <div class="columns m-4"> 
        <div class="column has-background-primary"> 
          Default Gap Column 
        </div> 
        <div class="column has-background-info"> 
          Default Gap Column 
        </div> 
        <div class="column has-background-success"> 
          Default Gap Column 
        </div> 
        <div class="column has-background-black has-text-white"> 
          Default Gap Column 
        </div> 
    </div> 
</body> 
</html>