The Bulma CSS Framework: What It Is and How To Get Started

It’s hard to fully appreciate everything that goes into a website until you try to build one yourself. In this post, you'll discover Bulma, an important player in the CSS framework space.

From hosting to content to design to security, building and maintaining an online presence can be both incredibly rewarding and demanding. So, when something comes along that lightens the load, you can be sure the web development community will be eager to try it. Such is the case with CSS frameworks.

A CSS framework is a set of tools that make it easier to write CSS code. We’ll explore what makes Bulma a unique framework, why you might want to try it out, and how to get started with some of its basic elements.

Why Use Bulma CSS

How to use Bulma CSS

How to write Bulma CSS

Let Frameworks Do The Work

What is Bulma CSS?

Bulma is a free class-based framework for CSS. It allows developers to implement CSS on web pages more efficiently than plain CSS. First released in 2016, Bulma has gained traction among front-end developers, enough to compete with other well-known CSS frameworks like Bootstrap.

Bulma is built on Flexbox, a CSS layout model that automatically adjusts the width of a page element based on the width of its container. Flexbox requires developers to write both HTML and CSS to create elements that adhere to this model. With Bulma, Flexbox behavior and most other things can be handled with HTML classes.

Bulma CSS is also open-source — you can view its source code in Bulma’s GitHub repository — which lets developers create new functions within the framework.

Why Use Bulma CSS?

If you’ve recently picked up CSS as a language, it might seem excessive to learn a framework like Bulma on top of it. But, while CSS frameworks aren’t necessary to build a website, they can alleviate many of the challenges associated with CSS.

If you want to build a website from scratch, here are some reasons why Bulma is your friend:

• Efficiency: Frameworks like Bulma save you time by implementing more involved CSS effects for you.
• Simplicity: As we’ll see, Bulma is easy to add to your code. If you understand CSS classes, you can understand Bulma. Plus, Bulma doesn’t overwhelm with a deluge of options — it’s all CSS.
• Consistency: Similarly, Bulma’s syntax is consistent and intuitive, so it’s easy to learn and easy to interpret if you didn’t write the code yourself.
• Capability: Bulma’s library of user interface components handles most things that websites need on the front end, including headers, menus, forms, and cards. Any of these components alone requires a lot of plain CSS to implement. With Bulma, these same elements can be styled with just a few basic commands.
• Modularity: Bulma comprises ~40 .sass files (Sass is a CSS extension language that Bulma uses), each of which handles a different interface component. But, you don’t have to import all of these files if you don't want to, only the ones you need. Read how here.
• Responsiveness: Since Bulma is based on Flexbox, its built-in components are responsive by design — this means that elements will move and scale to fit any screen or viewport size.

These benefits have earned Bulma a strong reputation. And, with some practice, you can produce some impressive results — check out Bulma’s showcase to get a sense of what’s possible, and use your browser's inspect element tool to see how these sites are made.

Bulma vs. Bootstrap

If you’re familiar with CSS frameworks, you’re probably familiar with Bootstrap, the most popular CSS framework today. Both Bootstrap and Bulma are free, open-source, mobile-first CSS frameworks that do similar things, but they differ in popularity, capability, and complexity.

Bootstrap has been around since 2011, and has a larger user base and support community as a result. This means that you’re more likely to find solutions to advanced problems with Bootstrap than with Bulma. However, Bulma’s documentation is detailed and straightforward, and its developer community is growing.

There’s also more elements in Boostrap’s library overall, and more options for styling and implementation. You can do a lot within Bulma’s framework, but it’s worth looking into Bootstrap’s components to get a better sense of its different offerings. It should also be noted that Bulma lacks the accessibility capabilities that Bootstrap offers, but Bulma updates often and may improve accessibility in future releases.

Another important difference between the two is that Bootstrap incorporates JavaScript, a scripting language for creating dynamic website content, while Bulma does not. JavaScript can be intimidating for new web developers. If you’re not ready to take on a new language, Bulma might be a friendlier step into CSS frameworks. While you don’t need to know JavaScript to use Bootstrap, some Bootstrap components like carousels and alerts require it.

How To Use Bulma CSS

Enough talk, let’s get coding. In this section, I’ll show you how to add Bulma to your website files, then review some of Bulma’s basic features.

How To Set Up Bulma

First, we need to get our HTML files ready to use the Bulma framework. Place the following <meta> tag in the <head> section of your HTML files to enable Bulma:

Now that your HTML files are ready, you have a few ways to add Bulma functionality:

Use NPM

To install Bulma from the NPM library, execute the following command in the terminal:

npm install bulma

Use the Bulma CSS CDN

Placing the following code in the <head> section of your HTML files also provides access to the Bulma CSS library:

This is the method I’ll be using for examples later on.

Download the Bulma Files Directly

You can also download the necessary files directly from Bulma’s website. After download, open the package and reference the necessary Bulma files in your HTML files.

How to Write Bulma CSS

Bulma’s syntax is based on HTML classes. If you want to style a page element, just add one or more classes inside the element’s HTML tag. Let’s see this in action first with the button component.

Buttons

To implement a Bulma button, add the button class to an HTML <a>, <button>, <input type="submit">, or <input type="reset"> element:

See the Pen Bulma CSS - Button by Christina Perricone (@hubspot) on CodePen.

Bulma recognizes the button class and applies some basic styling to make it look nice. But, we can do better than that.

In addition to its basic element classes, Bulma has modifier classes that add alternative styles to elements. Modifier class names start with is- or has- followed by a style.

Let’s look at how modifiers can be used on a button, starting with the is-rounded class. This modifier class rounds the corners of our button:

See the Pen Bulma CSS - Button Rounded by Christina Perricone (@hubspot) on CodePen.

Modifier classes also change the color and shading of the button:

See the Pen Bulma CSS - Button Color by Christina Perricone (@hubspot) on CodePen.

As you might have guessed, we can use multiple modifier classes on the same element. Next, let’s apply a modifier class for color, and a second modifier class called is-outlined:

See the Pen Bulma CSS - Button Outline by Christina Perricone (@hubspot) on CodePen.

To add more details, we can use some has- modifier classes to change the text and fill inside the buttons:

See the Pen Bulma CSS - Button Text Color by Christina Perricone (@hubspot) on CodePen.

Finally, we can control button size with several modifier classes:

See the Pen Bulma CSS - Button Size by Christina Perricone (@hubspot) on CodePen.

This is just the start of what you can do with buttons — see the Bulma button documentation for a full list of modifiers and more.

Progress Bars

Let’s look at another cool element in the Bulma library, the progress bar. To place one, add the Bulma class progress to the <progress> HTML element:

See the Pen Bulma CSS - Progress Bar by Christina Perricone (@hubspot) on CodePen.

Like buttons, you can add modifier classes to your progress bars too:

See the Pen Bulma CSS - Progress Bar Stylized by Christina Perricone (@hubspot) on CodePen.

The final bar’s motion effect is created by excluding the value attribute from the tag.

User Input

Bulma comes with a set of form controls, elements for gathering user-submitted information. This includes elements for text input, a radio button, a checkbox, and a select dropdown menu:

See the Pen Bulma CSS - Form Controls by Christina Perricone (@hubspot) on CodePen.

Columns

We’ll finish with an intro to the Bulma columns class, which lets you create columns that resize based on container width and the number of columns on the page.

Columns are a integral part of website formatting, yet one of the hardest to format, especially in a way that adjusts to different window sizes. Bulma does all this work for us if we attach the columns class to a parent div and the column class to each child div.

See the Pen Bulma CSS - Columns 1 by Christina Perricone (@hubspot) on CodePen.

To set different column widths, try adding one of Bulma’s column width modifiers to one or more of the child column elements — the other columns will adjust their widths automatically.

See the Pen Bulma CSS - Columns 2 by Christina Perricone (@hubspot) on CodePen.

Again, there’s a lot more you can do with columns in Bulma CSS — this is just the basics. See the columns documentation for all the possibilities.

Let Frameworks Do the Work

Learning a CSS framework on top of your existing CSS knowledge might seem like extra work in the short term. However, the more time you spend learning and practicing front-end development, the more you’ll come to appreciate the benefits of tools like Bulma.

Bulma isn’t the best CSS framework for everyone, so it’s best to evaluate other options like the aforementioned Bootstrap CSS to see which one feels more natural to your style. Whichever framework you choose, I’ll bet you it’s better than wasting hours trying to design your dream website without one.