In this guide, we will discuss the Columns gap and options in Bulma.
Description
Columns create an equal gap between column content and contains default value of 0.75rem between each column. You can see the default gap between columns in the previous chapter of Column Layout Sizes.
Gapless
Bulma allows removing the space between columns, by adding is-gapless modifier in the container.
Let’s see a simple example of is-gapless modifier in the columns container −
Note − Resize the coding-ground output window to see the changes occurring according to window size.
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<title>Bulma Columns Example</title>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
<script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
</head>
<body>
<section class = "section">
<div class = "container">
<span class = "title">
Gapless
</span>
<br>
<br>
<div class = "columns is-gapless">
<div class = "column">
<p class = "has-background-info">No Gap</p>
</div>
<div class = "column">
<p class = "has-background-primary">No Gap</p>
</div>
<div class = "column">
<p class = "has-background-warning">No Gap</p>
</div>
<div class = "column">
<p class = "has-background-info">No Gap</p>
</div>
</div>
</div>
</section>
</body>
</html>
It displays the below output −
Variable Gap
Bulma allows defining a custom gap between columns, by using below modifiers on the columns container.
- is-0 − It removes the gap between columns.
- is-3 − It specifies the gap with default value of 0.75rem value.
- is-8 − It specifies the gap with 2rem value.
Let’s create an example for defining variable gap between columns by using above modifiers in the columns container −
Note − Resize the coding-ground output window to see the changes occurring according to window size.
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<title>Bulma Columns Example</title>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
<script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
</head>
<body>
<section class = "section">
<div class = "container">
<span class = "title">
Using is-0 variable Gap
</span>
<br>
<br>
<div class = "columns is-variable is-0">
<div class = "column is-4">
<div class = "has-background-info has-text-centered">
Side
</div>
</div>
<div class = "column is-8">
<div class = "has-background-primary has-text-centered">
Main
</div>
</div>
</div>
<span class = "title">
Using is-3 variable Gap
</span>
<br>
<br>
<div class = "columns is-variable is-3">
<div class = "column is-3">
<div class = "has-background-info has-text-centered">
Three columns
</div>
</div>
<div class = "column is-6">
<div class = "has-background-primary has-text-centered">
Three columns
</div>
</div>
<div class = "column is-3">
<div class = "has-background-info has-text-centered">
Three columns
</div>
</div>
</div>
<span class = "title">
Using is-8 variable Gap
</span>
<br>
<br>
<div class = "columns is-variable is-8">
<div class = "column">
<div class = "has-background-info has-text-centered">
1
</div>
</div>
<div class = "column">
<div class = "has-background-info has-text-centered">
2
</div>
</div>
<div class = "column">
<div class = "has-background-info has-text-centered">
3
</div>
</div>
<div class = "column">
<div class = "has-background-info has-text-centered">
4
</div>
</div>
<div class = "column">
<div class = "has-background-info has-text-centered">
5
</div>
</div>
<div class = "column">
<div class = "has-background-info has-text-centered">
6
</div>
</div>
<div class = "column">
<div class = "has-background-info has-text-centered">
7
</div>
</div>
<div class = "column">
<div class = "has-background-info has-text-centered">
8
</div>
</div>
<div class = "column">
<div class = "has-background-info has-text-centered">
9
</div>
</div>
<div class = "column">
<div class = "has-background-info has-text-centered">
10
</div>
</div>
<div class = "column">
<div class = "has-background-info has-text-centered">
11
</div>
</div>
<div class = "column">
<div class = "has-background-info has-text-centered">
12
</div>
</div>
</div>
</div>
</section>
</body>
</html>
It displays the below output −
Centering Columns
You can make the columns centered by using .is-centered modifier on the columns container. Bulma also allows adding .is-multiline modifier to make multiple columns centered in a single row.
The simple example shows usage of .is-centered and .is-multiline modifiers in the columns container −
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<title>Bulma Columns Example</title>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
<script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
</head>
<body>
<section class = "section">
<div class = "container">
<span class = "title">
Centering Column
</span>
<br>
<br>
<div class = "columns is-mobile is-centered">
<div class = "column is-one-quarter">
<p class = "has-background-info">
is-one-quarter
</p>
</div>
</div>
<span class = "title">
Centering Columns with Multiline
</span>
<br>
<br>
<div class = "columns is-mobile is-multiline is-centered">
<div class = "column is-narrow">
<p class = "has-background-info">
Column One
</p>
</div>
<div class = "column is-narrow">
<p class = "has-background-info">
Column Two
</p>
</div>
<div class = "column is-narrow">
<p class = "has-background-info">
Column Three
</p>
</div>
<div class = "column is-narrow">
<p class = "has-background-info">
Column Four
</p>
</div>
</div>
</div>
</section>
</body>
</html>
The above code displays the following output −
Next Topic : Click Here
Pingback: Bulma - Columns Responsiveness & Nesting | Adglob Infosystem Pvt Ltd