Movatterモバイル変換


[0]ホーム

URL:


Skip to content
DEV Community
Log in Create account

DEV Community

Scrimba profile imagePer
Per forScrimba

Posted on • Edited on

     

Learn Bulma CSS in 5 minutes

An introductory tutorial to the popular CSS framework.

Bulma is a simple, elegant, and modern CSS framework that a lot of developers prefer over Bootstrap. Personally, I think Bulma has a better design by default, and it also feels more light-weight.

In this tutorial, I’ll give you a super quick introduction to the library.

We've also created a free Bulma course on Scrimba.Check it out here.


Imgur

The setup

Setting up Bulma is super easy, and you can do it in several different ways, whether you preferNPM, downloading it directlyfrom the docs, or using aCDN. We’re just going to link to a CDN from our HTML file, like this:

This will give us access to the Bulma classes. And that’s actually all Bulma is: a collection of classes.

Modifiers

The first thing you should learn about Bulma is the modifier classes. These allow you to set alternative styles to almost all of the Bulma elements. They all start withis-* orhas-*, and then youreplace the* with the style you want.

To understand this concept properly, let’s start off by looking at buttons.

Buttons

To turn a normal button into a Bulma button, we’ll simply give it the class ofbutton.

<button>Click here</button>
Enter fullscreen modeExit fullscreen mode

Which results in the following style:

As you can see, it has a nice flat design by default. To change the styling, we’ll use Bulma modifiers. Let’s start off by making the button bigger, green, and with rounded corners:

<button>Click here</button>
Enter fullscreen modeExit fullscreen mode

This code results is a pleasant-looking button:

You can also use modifiers to control the state of buttons. Let’s for example add the classis-focused, which adds a border around it:

Finally, let’s also use one of thehas-* modifiers. These typically control what’s inside the element. In our case, the text. Let’s addhas-text-weight-bold.

Here’s the result:

I’d recommend that you play around with combinations of the various classes in order to understand how flexible this system is. The combinations are almost endless. Check out thebuttons section in the docs for more info.

Columns

At the core of any CSS framework is how they solve columns, as that’s relevant
for almost every website you’ll ever build. Bulma is based on Flexbox, so it’s
really simple to create columns. Let’s create a row with four columns.

First we’re creating a container<div> with a class ofcolumns, and then we give each of the children a class ofcolumn. It results in the following:


I’ve also added a border around the columns to make them more apparent.

Note that you can add as many columns as you want. Flexbox takes care of dividing the space up equally between them.

To give the columns colors, we can replace the text inside them with a<p> tag, and give it thenotification class and anis-* modifier. Like this for example:

<p>First column</p>
Enter fullscreen modeExit fullscreen mode

Let’s do this using theis-info,is-success,is-warning andis-danger modifiers, which results in the following:

Thenotification class is actually meant for alerting users about something, as it allows you to fill the background with a color using theis-* modifiers. Here it works well for separating the columns.

We can also easily control the width of a column. Let’s add theis-half
modifier to the green column.

<p>Second column</p>
Enter fullscreen modeExit fullscreen mode

Which results in the second column now occupying half the width, while the three other take up a third of the remaining half each.

Here are the options you can use for controlling the width of columns:

  • is-three-quarters
  • is-two-thirds
  • is-half
  • is-one-third
  • is-one-quarter
  • is-four-fifths
  • is-three-fifths
  • is-two-fifths
  • is-one-fifth

Hero

Finally, let’s also learn how to create a hero in Bulma. We’ll use the semantic<section>, and give it a class ofhero andis-info to give it some color. We also need to add a<div> child with the classhero-body.

<div></div>
Enter fullscreen modeExit fullscreen mode

In order to make this hero do something meaningful, we’re going to add a container element inside the body, and add a title and subtitle.

<div>  <h1>    Primary title  </h1>  <h2>    Primary subtitle  </h2></div>
Enter fullscreen modeExit fullscreen mode

Now it’s starting to look good! If we want it to be bigger, we can simply addis-medium on the<section> tag itself.

<section>  ...</section>
Enter fullscreen modeExit fullscreen mode

And that’s it!

You’ve now gotten a basic taste of how Bulma works. And the best part is, the rest of the library is as intuitive and easy as the concepts you’ve seen up until now. So if you understand this, you’ll understand the rest of it without trouble.

So be sure tocheck out our free Bulma course if you want to learn the framework properly.


Top comments(4)

Subscribe
pic
Create template

Templates let you quickly answer FAQs or store snippets for re-use.

Dismiss
CollapseExpand
 
seanmclem profile image
Seanmclem
Developer looking to be awesome
  • Location
    Floridia
  • Work
    Senior web developer at Earth
  • Joined

Your first example of using a modifier doesn't seem to be right. Where you make the button bigger, green, and with rounded corners. It still only has the one button class from the previous example

CollapseExpand
 
tnathania profile image
Tinara Nathania
Front-end developer and UI/UX designer with a passion for creating visually appealing but also intuitive, user-friendly mobile and websites.
  • Location
    Surabaya, Indonesia
  • Joined

Really nice article! Btw, we have a generic content builder for Bulma and other frameworks (Bootstrap, Foundation, Material Design Lite, ..) as well. You can play with the builder here (innovademo.com/contentbuilder/exam... ) It’s a jQuery plugin, so you can use it on your website. Let me know what you think :)

CollapseExpand
 
pixeline profile image
Alexandre Plennevaux
Brussels-based average UX designer who gained average coding skills through freelancing with unlucky clients.
  • Location
    Brussels, Belgium
  • Work
    Web Developer at AppTweak
  • Joined

it seems none of the images were included...

CollapseExpand
 
blvkoblsk profile image
BLVKOBLSK
  • Joined

Absolutely love working with Bulma. Makes it even easier to inject your own custom classes, etc along side it too.

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment'spermalink.

For further actions, you may consider blocking this person and/orreporting abuse

More fromScrimba

DEV Community

We're a place where coders share, stay up-to-date and grow their careers.

Log in Create account

[8]ページ先頭

©2009-2025 Movatter.jp