Introduction to Bulma CSS with React

Introduction

Bulma is a CSS framework that has helpers, elements, and components. You can use the Bulma classes and HTML structures for dependable and expandable designs in your projects.

In this article, you will use react-bulma-components, one of the more popular implementations of the Bulma CSS framework in React.

Prerequisites

To complete this tutorial, you’ll need:

• A local development environment for Node.js. Follow How to Install Node.js and Create a Local Development Environment.
• Some familiarity with React. You can take a look at our How To Code in React.js series.

This tutorial was verified with Node v16.2.0, npm v7.14.0, react v17.0.2, and react-bulma-components v4.0.4.

Setting Up the Project

Start with using create-react-app to generate a React App and then install dependecies:

Change into the new project directory:

Now, you can run the React application:

Fix any errors or issues with your project. And visit localhost:3000 in a web browser.

Once you have a working React application, you can start adding react-bulma-components:

At this point, you have a new React project with react-bulma-components.

Exploring the Elements and Components

react-bulma-components library supports Bulma elements, components, forms, and layouts.

Consider an example using the Button component. First, you will need to import the Bulma stylesheet. Then, you will need to import the component.

import 'bulma/css/bulma.min.css';
import { Button } from 'react-bulma-components';

function App() {
  return (
    <div className="App">
      <Button>Example</Button>
    </div>
  );
}

export default App;

This will produce a Button with Bulma styles.

Note: In previous versions of react-bulma-components it was possible to specify full and lib-specific versions of components. This was changed in version 4.0 when Bulma was changed to a peer dependency and now the stylesheet has to imported.

Like most CSS frameworks out there, Bulma comes with styles for your common components and a series of customizations that can be accomplished by adding different classes to your elements.

react-bulma-components simplifies things further by providing components for each of the major elements, and eliminates the need for juggling class names in favor of passing in properties to your components.

Want to make a large button that uses the danger color with rounded corners and an outline?

<Button
  color="danger"
  size="large"
  rounded
  outlined
>
  Example
</Button>

All of the react-bulma-components can accept a renderAs property which allows you to define what sort of element should be used to render the component.

By default, the Button component is rendered as a button element. Use the renderAs property to render it as a link.

Along with the renderAs property we should also include an href to tell it where to send folks when they click on the link:

<Button
  renderAs="a"
  href="https://www.example.com"
  color="danger"
  size="large"
  rounded
  outlined
>
  Example
</Button>

In fact, all of our Bulma components can accept whatever properties you may throw that them. That means you could always do some advanced styling with a style properties or add some additional CSS classes with className.

When using className, any classes you supply will be prepended to the library-generated list of Bulma class names.

Colors

Similar to most modern CSS frameworks, Bulma comes with a color theme that uses some semantic naming conventions.

These theme colors include primary, link, info, success, warning, and danger.

In addition, there are also some more literal colors available: black, dark, light, and white.

Components that support colors accept a color property:

<Button color="success">Example</Button>

Which will assign the correct color class to the rendered element. Because this color property assigns classes back to the rendered element, you can’t just assign an arbitrary color value.

Sizes

Several components accept a size property, but they may accept different types of values.

This is because some components (like Heading) use numerical values:

<Heading size={1}>Large Heading</Heading>
<Heading size={2}>Not So Large Heading</Heading>

While others (like Button) use textual names for the sizes:

<Button size="large">Large Button</Button>
<Button size="small">Small Button</Button>

For components that accept textual sizes, you have small, normal, medium, and large available. The normal size is the one that is used by default when no size is specified.

Using the Grid System

Bulma also supports a Grid System for assisting with laying out content in a consistent way. By default, Bulma uses a 12-column layout that uses percentages or the number of columns.

First, you will need to import the component:

import { Columns } from 'react-bulma-components';

For sizes based on a 12-column layout you set the size to the numeric value between 1 and 12:

<Columns>
  <Columns.Column size={1}>One</Columns.Column>
  <Columns.Column>Eleven</Columns.Column>
</Columns>

<Columns>
  <Columns.Column size={2}>Two</Columns.Column>
  <Columns.Column>Ten</Columns.Column>
</Columns>

<Columns>
  <Columns.Column size={3}>Three</Columns.Column>
  <Columns.Column>Nine</Columns.Column>
</Columns>

<Columns>
  <Columns.Column size={4}>Four</Columns.Column>
  <Columns.Column>Eight</Columns.Column>
</Columns>

<Columns>
  <Columns.Column size={5}>Five</Columns.Column>
  <Columns.Column>Seven</Columns.Column>
</Columns>

<Columns>
  <Columns.Column size={6}>Six</Columns.Column>
  <Columns.Column>Six</Columns.Column>
</Columns>

<Columns>
  <Columns.Column size={7}>Seven</Columns.Column>
  <Columns.Column>Five</Columns.Column>
</Columns>

<Columns>
  <Columns.Column size={8}>Eight</Columns.Column>
  <Columns.Column>Four</Columns.Column>
</Columns>

<Columns>
  <Columns.Column size={9}>Nine</Columns.Column>
  <Columns.Column>Three</Columns.Column>
</Columns>

<Columns>
  <Columns.Column size={10}>Ten</Columns.Column>
  <Columns.Column>Two</Columns.Column>
</Columns>

<Columns>
  <Columns.Column size={11}>Eleven</Columns.Column>
  <Columns.Column>One</Columns.Column>
</Columns>

And for percentage-based-sizing you can set size to be one-fifth, one-quarter, one-third, half, two-thirds, or three-quarters:

<Columns>
  <Columns.Column size="one-fifth">20%</Columns.Column>
  <Columns.Column>80%</Columns.Column>
</Columns>

<Columns>
  <Columns.Column size="one-quarter">25%</Columns.Column>
  <Columns.Column>75%</Columns.Column>
</Columns>

<Columns>
  <Columns.Column size="one-third">33.333333333%</Columns.Column>
  <Columns.Column>66.666666667%</Columns.Column>
</Columns>

<Columns>
  <Columns.Column size="half">50%</Columns.Column>
  <Columns.Column>Also 50%</Columns.Column>
</Columns>

<Columns>
  <Columns.Column size="two-thirds">66.666666667%</Columns.Column>
  <Columns.Column>33.333333333%</Columns.Column>
</Columns>

<Columns>
  <Columns.Column size="three-quarters">75%</Columns.Column>
  <Columns.Column>25%</Columns.Column>
</Columns>

These two approaches to the grid system will total up to 12 columns or 100% respectively.

Conclusion

In this article, you explored some of the features of Bulma with react-bulma-components.

Relying upon a well-supported and well-maintained CSS framework allows you to style and design your projects. They can be an efficient time-saver.

Consult the Bulma documentation for additional information.