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" > w3wiki </ 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