The Bulma Gap class is used to customize the gap between columns, there are lots of classes to create gaps between columns by using Bulma. It is the alternative to the CSS gap property.
Bulma Gap Class:
- Bulma Default gap: This class is used to set the default gap between columns which has a default value of 0.75rem, so this gap will be placed on both sides, so the adjacent gap will be 1.5rem.
- Bulma Gapless: Bulma Gapless class is used to remove the space between the columns, add the is-gapless modifier on the columns container.
- Bulma Variable Gap: Bulma Variable Gap class is used to create a defined gap between columns, there are 9 modifiers of options in this class.
- Bulma Breakpoint-based column gaps: Bulma breakpoint-based column gaps class is used to define specific columns gap for each breakpoint.
Example 1: The below example illustrates the Gap in Bulma CSS Framework.
HTML
<!DOCTYPE html> <html>
<head>
<link rel='stylesheet'
href=
</head>
<body>
<h1 class="is-size-2 has-text-success has-text-centered" >
GeeksforGeeks
</h1>
<b>Bulma Default Gap:</b>
<br>
<section class="section">
<div class="container">
<div class="columns">
<div class="column has-background-success">
First column
</div>
<div class="column has-background-primary">
Second column
</div>
</div>
</div>
</section>
<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>
</div>
</section>
</body>
</html>
|
Output:
Example 2:
HTML
<!DOCTYPE html> <html>
<head>
<link rel='stylesheet'
href=
</head>
<body>
<h1 class="is-size-2 has-text-success has-text-centered" >
GeeksforGeeks
</h1>
<b>Bulma Breakpoint based column gaps:</b>
<section class="section">
<div class="container">
<div class="columns
is-variable
is-1-mobile
is-0-tablet
is-3-desktop
is-8-widescreen
is-2-fullhd">
<div class="column has-background-success">
First column
</div>
<div class="column has-background-primary">
Second column
</div>
</div>
</div>
</section>
<b>Bulma Columns Gapless:</b>
<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>
</div>
</section>
</body>
</html>
|
Output:
Reference: https://bulma.io/documentation/columns/gap/