Bulma Column Basics
Last Updated :
10 Feb, 2022
Bulma is a free and open-source CSS framework based on Flexbox. It is component-rich, compatible, and well documented. It is highly responsive in nature. It uses classes to implement its design.
Bulma columns can create columns for our web page. Columns are an essential part of any web page and generally, it can be difficult to create them as required. With Bulma, columns are created very easily and efficiently. The advantage of the Bulma framework is that it is responsive by default. This means that we don’t have to deal with adjusting the web page according to the device size. Bulma framework takes care of it. Let us understand how are these columns created in Bulma.
In order to create columns, initially, we create a container, a column class is added. We can create any number of columns by repeatedly adding new columns in the container.
Bulma Column class:
- columns: This class is used to add a columns container.
- column: This class is used to add a column element inside the columns container. Users can add any number of column elements as per need.
Syntax:
<div class="columns">
<div class="column">
....
</div>
<div class="column">
....
</div>
</div>
Example 1: Let us have a look at an example of how to create columns. In the below code, we have added 4 columns in our container. The style tag is optional which is used just to make the columns colorful.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content=
"width=device-width, initial-scale = 1">
<title>Bulma Columns</title>
<link rel="stylesheet" href=
</script>
</head>
<body>
<br>
<div class="content">
<h1 class="has-text-success">
GeeksforGeeks
</h1>
<strong>Bulma columns</strong>
</div>
<section class="section">
<div class="container">
<span class="title">
Popular Sports
</span>
</div>
<br>
<div class="columns">
<div class="column1">
<div class="notification is-primary">
Tennis
</div>
</div>
<div class="column2">
<div class="notification is-danger">
Cricket
</div>
</div>
<div class="column3">
<div class="notification is-info">
Football
</div>
</div>
<div class="column4">
<div class="notification is-link">
Hockey
</div>
</div>
</div>
</section>
</body>
</html>
|
Output:
Another fact about columns in Bulma is that the responsiveness of columns occurs from tablet devices onwards. This means that for mobile devices, the columns are stacked on top of each other. So, we use a modifier known as is-mobile, in order to make the columns responsive on mobile devices. The following is the way in which we include the is-mobile modifier in our HTML code.
Syntax:
<div class="columns is-mobile">
<div class="column">....</div>
<div class="column">....</div>
</div>
Example 2: Let us have a look at the same program which was done earlier, but this time with mobile devices only. In the below program, the is-mobile modifier makes the columns responsive. If we hadn’t used the is-mobile modifier, then the columns would have stacked on top of each other.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content=
"width= device-width, initial-scale = 1">
<link rel="stylesheet" href=
</script>
</head>
<body>
<br>
<div class="content">
<h1 class="has-text-success">
GeeksforGeeks
</h1>
<strong>Bulma columns</strong>
</div>
<section class="section">
<div class="container">
<span class="title">
Superheroes
</span>
</div><br>
<div class="columns is-mobile">
<div class="column">
<div class="notification is-link">
Batman
</div>
</div>
<div class="column">
<div class="notification is-primary">
Flash
</div>
</div>
<div class="column">
<div class="notification is-danger">
Superman
</div>
</div>
<div class="column">
<div class="notification is-info">
Shazam
</div>
</div>
</div>
</section>
</body>
</html>
|
Output:
Reference Link: https://bulma.io/documentation/columns/basics/
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...