Bulma Gapless

Bulma Gapless class is used to remove the space between the columns, add the is-gapless modifier on the columns container. The Gapless column can be combined with the is-multiline modifier class.

Bulma Gapless classes:

is-gapless: This class is used to remove the gap between columns.

Syntax:

<div class="columns is-gapless">
  .....

</div>

Example: Below example illustrate the Gapless class in Bulma.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Bulma Panel</title>
    <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 Columns Gapless</b>
    <br>
    <section class="section">
        <div class="container">
            <div class="columns is-gapless">
                <div class="column has-background-success"> 
                  First column 
                </div>
                <div class="column has-background-primary"> 
                  Second column
                </div>
                <div class="column has-background-success"> 
                  Third column 
                </div>
                <div class="column has-background-primary"> 
                  Fourth column
                </div>
            </div>
        </div>
      </section>
</body>

</html>

Output:

Reference: https://bulma.io/documentation/columns/gap/#gapless

Explore