Tutorial

Introduction to Bulma CSS with React

Updated on May 28, 2021
Default avatar

By joshtronic

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:

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:

  1. npx create-react-app react-bulma-components-example

Change into the new project directory:

  1. cd react-bulma-components-example

Now, you can run the React application:

  1. npm start

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:

  1. npm install react-bulma-components@4.0.4

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.

src/App.js
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.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about us


About the authors
Default avatar
joshtronic

author

Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
 
1 Comments


This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

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.

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more
DigitalOcean Cloud Control Panel