Bulma Strategy
Last Updated :
28 Mar, 2023
Bulma is a lightweight framework, released by Jeremy Thomas in 2016. The current version of the Bulma is 0.9.4. It is the most popular framework among front-end developers.
Prerequisites: To learn Bulma CSS Framework, you should have:
- A Basic understanding of CSS Classes
- It is good to have basic knowledge of HTML
- It is advantageous to have a little bit of knowledge of JavaScript and the Document Object Model (DOM).
What is Bulma CSS?
Bulma is a modern framework of CSS. It is a free, open-source framework of CSS means the source code of Bulma is freely available and we can find the source code of Bulma repository on GitHub and it is not necessary that we have to use the same code while the design our website, we can change it and then we can use it. For example, if we have inserted some code to design something and the color or font style is not good and you want to change that color then you can change the color of your choice and then you can use it. it focuses on CSS only and doesn’t use JavaScript. It makes it easy for a front-end developer to design a website without having much knowledge of CSS. When developers use this framework for the design, it automatically makes it 100% responsive.
There are some other reasons also why it is the Favorite Framework of developers:
Easy to learn and use: Anyone can easily understand this framework by referring to some sources and watching some YouTube videos. To use this, you just need to import the utility dependencies and then the individual .saas file, that is why people who have at least 10% knowledge of CSS can use it. Bulma is easy to learn and set up. It saves the time of the developer.
Free and Open source: It is free. This means to use this framework you don’t need to pay any cost. It is available free of cost. If you understand the CSS classes, you can easily add them to your code.
No JavaScript: Most CSS framework uses JavaScript which makes it complicated. We can’t use it with Angular, React, etc. Bulma provides a lightweight solution that can be easily implemented in any development environment. That means it does not use JavaScript.
Fully responsive: It works on the flexbox. Flexbox or flexible is a layout model with fixed height and width. It makes the website fully responsive. Responsive means it will adjust its element according to window size no overlapping will be allowed in elements. It automatically sets the height and width of an element within a container to be arranged according to its viewport.
Modular: In many CSS frameworks, we have to deal with unused code of CSS. But in the Bulma framework, you can only take part of the code you want to use in your CSS. let’s say you want to use the Bulma button style then you can individually import the .saas file and leave the rest of it out. And make your website the way you want.
How to use Bulma?
Bulma syntax is based on the HTML Classes. We can style a page element by adding the classes in the HTML element. Suppose you want to implement the Bulma button classes. Then we can use two types of modifier classes. first “is-modifier” and “has-modifier” classes.
How Bulma is different from Bootstrap?
If you are a Fronted web developer then you will be familiar with the Bootstrap Framework. It’s the most popular CSS Framework. Both Bulma and Bootstrap are the front-end framework, free, open source, and mobile-first CSS frameworks, but differ in popularity, availability of themes, and accessibility.
Bulma is popular but not has additional elements like list groups page header, etc. while Bootstrap is having such elements. Both are based on the flexbox and both are highly responsive. You can find the solution of more problems in Bootstrap and it is compatible with Internet explorer 10-11. However, Bulma is documented in detail and compatible with Internet explorer 10.
Another important difference between these two is that Bootstrap has the JavaScript elements to design a website. However, Bulma has no JavaScript elements. If you talk about community support then Bootstrap is having larger community support and more support for community accessibility, while In Bulma, it is having smaller community support and limited support for accessibility.
Syntax:
<div class = "button is-modifier-name">
...
</div>
or
<div class = "button has-modifier-name">
...
</div>
- is-modifier-name: These classes are used to round the corner of the button, change the color, control size, and so on. This includes a lot of classes example- is-rounded,is-dark, is-black, is-small, is-normal and there are many more classes.
- has-modifier-name: These classes are used to change the text and fill inside the button. This includes- has-text-black, has-background-grey, has-text-weight-bold, and so on.
Example 1: In the below example, we have used the “in-modifier” classes to make the button colorful, control the button’s size, and make it rounded.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Bulma Strategy</title>
<link rel="stylesheet" href=
</head>
<body>
<div class="content">
<h1 style="color:green">
GeeksforGeeks
</h1>
<strong>
is-modifier-classes
</strong>
</div>
<button class="button is-rounded">
Rounded button
</button>
<br /> <br />
<h3> different button Colors</h3>
<br />
<button class="button is-light">
light color
</button>
<br />
<button class="button is-dark">
dark color
</button>
<br />
<button class="button is-warning">
warning color
</button>
<br />
<button class="button is-danger">
danger color
</button>
<br /> <br />
<h3> different button sizes</h3>
<br />
<button class="button is-small">
This is small
</button>
<br />
<button class="button is-normal">
This is normal
</button>
<br />
<button class="button is-medium">
This is medium
</button>
<br />
<button class="button is-large">
This is large
</button>
</body>
</html>
|
Output:
Example 2: Let’s now look at another example in which we are using “has-modifier” classes in order to make the text different colors, adding background color, and making text bold.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Bulma Strategy</title>
<link rel="stylesheet" href=
</head>
<body>
<section>
<div class="content">
<h1 style="color:green">
GeeksforGeeks
</h1>
<strong>
has-modifier-classes
</strong>
</div>
<h3>
Different text color that we can
apply on the text of the button
</h3>
<button class="button has-text-primary">
text-primary
</button>
<br /><br />
<button class="button has-text-success">
text-success
</button>
<br /><br />
<button class="button has-text-black">
text-black
</button>
<br /><br />
<h3>Different background color of the button</h3>
<button class="button has-background-grey">
background grey
</button>
<br /><br />
<button class="button has-background-red">
background red
</button>
<br /><br />
<h3>properties to bold the text of the button</h3>
<button class="button has-text-bold">
text bold
</button>
<br /><br />
<button class="button has-text-weight-bold">
text weight bold
</button>
</section>
</body>
</html>
|
Output:
Share your thoughts in the comments
Please Login to comment...