Bulma Breakpoint based column gaps
Last Updated :
31 Dec, 2021
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 =
</ head >
< body class = "has-text-centered" >
< h1 class = "is-size-2 has-text-success" >
GeeksforGeeks
</ 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
Share your thoughts in the comments
Please Login to comment...