Designed for mobile first and built using the Flexbox methodology, the Open Source CSS framework Bulma provides ready-to-use frontend components to build responsive web interfaces without JavaScript, making it ideal to use with React.

Bulma follows a strict CSS-only approach making it possible for you to have total control over your components’ functionality and the freedom to write the JavaScript code of your application the way you deem fit instead of being restricted to the framework's opinion of writing JavaScript.

In this tutorial, you will learn about Bulma CSS and how to use it to style your ReactJS applications.

Prerequisites

This tutorial assumes that you have the following:

• Node 8.10 or higher installed on your local development machine
• npx 5.2 or higher installed on your local development machine
• A basic knowledge of HTML, CSS, JavaScript, and React.

What is Bulma CSS?

Unlike most CSS frameworks, Bulma isn’t an all-or-nothing framework; it enables you to import and use specific components, such as a breadcrumb or form, without importing the entire framework. It also offers a plethora of already customized components, elements, columns, layouts, and forms for designing websites, letting users get up and running quickly.

Known for having the simplest grid system, Bulma is so smooth that columns automatically resize themselves depending on the screen size of the device being used.

Bulma has browser support on Chrome, Edge, Firefox, Opera, Safari, and Internet Explorer (10+), providing you with CSS classes to help you style your website.

Using Bulma CSS in React

Now that you've learned more about Bulma CSS, let’s see how we can use different Bulma CSS elements and components with React.

Installing Bulma in React

First, let's spin up a React application by using Create React App and running the following command:

npx create-react-app bulma-tutorial

Once the React app is installed on your local machine successfully, switch to its directory using the cd bulma-tutorial command, and install the Bulma package into your React project using the npm install bulma command.

After installing Bulma, run npm start to access the app on your browser window via localhost:3000.

Now, navigate to the src folder, click App.js, and paste the code snippet below:

import 'bulma/css/bulma.min.css';

const App = () => {
      return (
        <div classname="main"> 
          <div className="buttons">
            <button class="button is-primary">Primary</button>
            <button class="button is-link">Link</button>
            <button class="button is-info">Info</button>
            <button class="button is-success">Success</button>
            <button class="button is-warning">Warning</button>
            <button class="button is-danger">Danger</button>
            <button class="button is-black">Black</button>
            <button class="button is-white">White</button>
            <button class="button is-dark">Dark</button>
            <button class="button is-light">Light</button>
          </div>
        </div>
      )
  }

export default App;

By importing Bulma CSS into our project, we can now access Bulma’s components, elements, variables, and more, and utilize Bulma within our project.

Stylizing with Bulma in React

Here is the created component App with the added parent div. By then exporting the component, we can target it in other sections of the application.

const App = () => {
      return (
        <div classname="main">
          ...
        </div>
      )
  }

export default App;

Here, we added a div containing 10 buttons and styled it with Bulma CSS.

<div className="buttons">
  <button class="button is-primary">Primary</button>
  <button class="button is-link">Link</button>
  <button class="button is-info">Info</button>
  <button class="button is-success">Success</button>
  <button class="button is-warning">Warning</button>
  <button class="button is-danger">Danger</button>
  <button class="button is-black">Black</button>
  <button class="button is-white">White</button>
  <button class="button is-dark">Dark</button>
  <button class="button is-light">Light</button>
</div>

Most Bulma elements have alternative styles that require using either is- or has- to access them. For example, in the code snippet above, you’ll notice that each button contains two values: the element’s name, button, that signals to Bulma that this element is a button; and the modifier, is-dark, that accesses the style class property.

So, if you want to color an element of your app turquoise, for example, you’d use the is-primary modifier syntax.

The default color shades that can be used in Bulma are below, with their respective modifiers:

• is-primary is turquoise
• is-link is blue
• is-info is cyan
• is-success is green
• is-warning is yellow
• is-danger is red
• is-white is white
• is-black is black
• is-dark is dark
• is-white is white

With the buttons complete, save the code and return to the browser window to view what the updated page looks like. If everything is done correctly, it should look like the screen below:

Altering sizes of elements and components

With the understanding of how to apply colors to elements and components within React, we can continue to manipulate buttons by using Bulma’s modifier classes, is-small, is-medium, and is-large, to resize any element or component.

As each modifier name implies, elements will become smaller by adding is-small, medium by adding is-medium, and large by adding is-large to the element’s property.

Let’s add these properties to the code in our App.js file and see how it plays out:

import 'bulma/css/bulma.min.css';

const App = () => {
      return (
        <div classname="main"> 
          <div className="buttons">
            <button class="button is-success is-small">Small</button>
            <button class="button is-warning is-medium">Medium</button>
            <button class="button is-danger is-large">Large</button>
          </div>
      </div>
      )
  }

export default App;

By adding is-small, is-medium, and is-large to the codebase, your React app should now look like the following:

Controlling the state of elements and components

The ability to control the state of an element or component in an application is very important. To do this in a React app, use any of the three Bulma CSS properties below:

• is-outlined
• is-loading
• disabled

In the code snippet below, the first button’s state is outlined by adding is-outlined, the second button shows a loading wheel by adding is-loading, and the third button becomes disabled by adding is-disabled.

import 'bulma/css/bulma.min.css';

const App = () => {
      return (
        <div classname="main"> 
          <div className="buttons">
            <button class="button is-success is-outlined">Outlined</button>
            <button class="button is-warning is-loading">Loading</button>
            <button class="button is-danger" disabled>Disabled</button>
          </div>
      </div>
      )
  }

export default App;

You can see the output of this code below:

Utilizing Bulma’s customized code snippets

As mentioned earlier, Bulma offers a collection of already customized components that you can use to quickly customize your React apps instead of styling them from scratch.

For example, if we wanted to spin up a navigation bar, Bulma provides boilerplate code, and we can copy a snippet from their website, paste it into the App.js file, and add a closing tag to the img and hr elements.

import 'bulma/css/bulma.min.css';
const App = () => {
      return (
        <div>
            <nav class="navbar" role="navigation" aria-label="main navigation">
              <div class="navbar-brand">
                <a class="navbar-item" href="https://bulma.io">
                  <img src="https://bulma.io/images/bulma-logo.png" width="112" height="28"/>
                </a>

                <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
                  <span aria-hidden="true"></span>
                  <span aria-hidden="true"></span>
                  <span aria-hidden="true"></span>
                </a>
              </div>

              <div id="navbarBasicExample" class="navbar-menu">
                <div class="navbar-start">
                  <a class="navbar-item">
                    Home
                  </a>

                  <a class="navbar-item">
                    Documentation
                  </a>

                  <div class="navbar-item has-dropdown is-hoverable">
                    <a class="navbar-link">
                      More
                    </a>

                    <div class="navbar-dropdown">
                      <a class="navbar-item">
                        About
                      </a>
                      <a class="navbar-item">
                        Jobs
                      </a>
                      <a class="navbar-item">
                        Contact
                      </a>
                      <hr class="navbar-divider"/>
                      <a class="navbar-item">
                        Report an issue
                      </a>
                    </div>
                  </div>
                </div>

                <div class="navbar-end">
                  <div class="navbar-item">
                    <div class="buttons">
                      <a class="button is-primary">
                        <strong>Sign up</strong>
                      </a>
                      <a class="button is-light">
                        Log in
                      </a>
                    </div>
                  </div>
                </div>
              </div>
            </nav>
          </div>

      )
  }

export default App;

Now we have a navigation bar on my website with a simple copy and paste and can customize it further using the concepts used in this tutorial.

Conclusion

Although this tutorial covers some of the fundamentals of using Bulma with React, they provide a base to expand upon when styling. You can learn more about how Bulma works, access code snippets, and experiment by visiting their official documentation. Feel free to explore these Bulma tutorials that I created on CodePen as well.

If you have any questions, you can leave them in the comments section below.