Bulma Default Gap
Last Updated :
02 Feb, 2022
In this article, we’ll be seeing the Bulma Default gap. Bulma default gap is used in columns in which each column has the same or equal gap as of variable that has a value of 0.75rem.
Bulma Default gap Class: There is no such specific class used but the column class can be used to give the gap between different columns.
Syntax:
<div class="columns">
<div class="column">
....
</div>
</div>
Below example illustrate the Bulma Default gap:
Example:
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta http-equiv = "X-UA-Compatible"
content = "IE=edge" >
< meta name = "viewport"
content = "width=device-width, initial-scale=1.0" >
< link rel = "stylesheet"
href =
/>
</ head >
< body class = "has-text-centered" >
< h1 class = "is-size-2 has-text-success" >
GeeksforGeeks
</ h1 >
< b class = "is-size-5" >
Bulma Default gap
</ b >
< div class = "columns m-4" >
< div class = "column has-background-primary" >
Default Gap Column
</ div >
< div class = "column has-background-info" >
Default Gap Column
</ div >
< div class = "column has-background-success" >
Default Gap Column
</ div >
< div class = "column has-background-black has-text-white" >
Default Gap Column
</ div >
</ div >
</ body >
</ html >
|
Output:
Bulma Default Gap
Reference: https://bulma.io/documentation/columns/gap/#default-gap
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...