How to use Bulma CSS with React

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.

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.

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.

And because Bulma does not include any JavaScript, you have total control over your components’ functionality when using it with React, giving you the freedom to write the JavaScript code the way you deem fit instead of being restricted to Bulma’s opinion of writing JavaScript. For developers who want to use their own JavaScript implementation, the fact that Bulma follows a strict CSS-only approach enables them to achieve this.

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.

In this tutorial, you will learn how Bulma CSS can be used with React.

Using Bulma CSS in React

While Bulma’s creators state there’s no need to have any knowledge of CSS to use Bulma, having a basic understanding of CSS will bolster your work in any CSS framework, including Bulma.

This tutorial assumes that you have a basic knowledge of CSS as well as 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 and JavaScript
• A basic understanding of how to create components in React

Now, 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:

See the Pen
Colors – Bulma CSS Tutorial by Didicodes (@edyasikpo)
on CodePen.

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:

See the Pen
Sizes – Bulma CSS Tutorial by Didicodes (@edyasikpo)
on CodePen.

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.

See the Pen
NavBar – Bulma CSS Tutorial by Didicodes (@edyasikpo)
on CodePen.

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.