Bulma Gapless

Last Updated : 14 Jan, 2022

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>