Skip to content
Related Articles

Related Articles

Bulma Default Gap

Improve Article
Save Article
  • Last Updated : 02 Feb, 2022
Improve Article
Save Article

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=
    />
</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>


Output:

Bulma Default Gap

Bulma Default Gap

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


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!