Bulma Breakpoint based column gaps
Bulma breakpoint-based column gaps class is used to define specific columns gap for each breakpoint. Each device has a different screen size according to that you can define the columns gap.
Breakpoint based column gaps classes:
- is-0-*: This class removes the gap between classes. It is similar to the gapless class.
- is-1-*: This class creates a gap between the column of 0.25rem.
- is-2-*: This class creates a gap between the column of 0.5rem.
- is-3-*: This class creates a gap between the column of 0.75rem and this is the default value.
- is-4-*: This class creates a gap between the column of 1rem.
- is-5-*: This class creates a gap between the column of 1.25rem.
- is-6-*: This class creates a gap between the column of 1.5rem.
- is-7-*: This class creates a gap between the column of 1.75rem.
- is-8-*: This class creates a gap between the column of 2rem.
Note: All the columns gap are applicable on this device’s variable, mobile, tablet, desktop, widescreen and full HD.
Example: The following code demonstrates the breakpoint-based column gaps.
HTML
<!DOCTYPE html> < html > < head > < 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 Breakpoint based column gaps </ b > < br > < 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 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/#breakpoint-based-column-gaps