Bulma Variable Gap
Bulma Variable Gap class is used to create defined gap between columns, there are 9 modifiers of options in this class. All the classes are mentioned and described below. This class can be used as column width.
Bulma Variable Gap:
- 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: This feature is only available in browsers that support CSS Variables.
Example 1: The below example illustrates the Variable gap in Bulma
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 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 class = "column is-1" ></ div > < div class = "column has-background-success" > Third column </ div > < div class = "column is-2" ></ div > < div class = "column has-background-primary" > Fourth column </ div > < div class = "column is-3" ></ div > </ div > </ div > </ section > </ body > </ html > |
Output:
Example 2:
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 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-1" ></ div > < div class = "column has-background-primary" > Second column </ div > < div class = "column is-1" ></ div > < div class = "column has-background-success" > Third column </ div > < div class = "column is-2" ></ div > < div class = "column has-background-primary" > Fourth column </ div > < div class = "column is-2" ></ div > </ div > </ div > </ section > </ body > </ html > |
Output:
Reference: https://bulma.io/documentation/columns/gap/#variable-gap