Bulma Introduction
Last Updated :
12 Dec, 2022
Bulma is an Open source CSS framework developed by Jeremy Thomas. This framework is based on the CSS Flexbox property. It is highly responsive, minimizing the use of media queries for responsive behavior.
Another advantage with Bulma is that you simply need to have an understanding of HTML and CSS to implement this framework (Although knowing JavaScript can help the existing features according to your needs). Bulma also allows us to add our own CSS styling but it is advised to use an external stylesheet over inline styling.
Using Bulma: If you are a beginner web developer the simplest way is to use a jsDelivr CDN link within the head section of HTML file using link tag.
CDN Link:
https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css
Another cool feature with Bulma is that it can simply import the SASS files you need for the particular elements on which you want to apply the Bulma styling. For example, if you want the Bulma styling for the form elements you can import only that sass file. Otherwise, you can install the Bulma package with npm.
Example: The Bulma syntax is extremely simple, there are predefined class names that help us to create elements according to the name.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1">
<title>Hello Bulma!</title>
<link rel="stylesheet" href=
</head>
<body>
<center>
<strong class="has-text-success">
GeeksforGeeks
</strong>
<br>
<a class="button">Button</a>
</center>
</body>
</html>
|
Output: The button created is not like the generic HTML button and the GeeksforGeeks text has the color of Bulma Color class.
Example: Each Bulma element has multiple alternative styles available, and these can be applied by using is- or has- class modifiers.
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<title>Hello Bulma!</title>
<link rel="stylesheet"
href=
</head>
<body>
<center>
<a class="button is-large">Hello</a>
<a class="button is-medium">Hello</a>
<a class="button is-small">Hello</a>
</center>
</body>
</html>
|
Output: 
These modifiers form the basis for manipulating objects in Bulma. Some of the color modifiers that Bulma provides are:
- is-primary
- is-info
- is-success
- is-danger
- is-warning
The size modifiers ranging from is-size-1 to is-size-6. This helps in changing the font size. Try using h1 to h6 tags in Bulma, but you will notice that there is no change in the visible font size. This is because Bulma only uses the modifiers to change the size of the text and not in the standard HTML way. Try running this code to understand how h1 to h6 tags do not impact the size of the text.
Example 1:
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1">
<title>Hello Bulma!</title>
<link rel="stylesheet"
href=
</head>
<body>
<h1>hello world</h1>
<h2>hello world</h2>
<h3>hello world</h3>
</body>
</html>
|
Output:
hello world
hello world
hello world
Example 2: Add multiple variations within the element class attribute. Try this code and observe that we have used two modifiers one for the color and the second one for the size.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1">
<title>Hello Bulma!</title>
<link rel="stylesheet"
href=
</head>
<body>
<a class="button is-primary is-large">Hello</a>
<a class="button is-primary is-medium">Hello</a>
<a class="button is-primary is-small">Hello</a>
</body>
</html>
|
Output: 
Advantages:
- Responsive design for all devices(desktops, tablets and mobiles).
- Easy to read and write the code.
- It can be combine with any JavaScript framework(AngularJS, ReactJS).
Disadvantages:
- In development stage.
- Needs minor improvements.
- New framework
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...