Bulma CSS Framework Ultimate Cheatsheet

Introduction: What is Bulma and Why Use It?

Bulma is a free, open-source CSS framework based on Flexbox that provides ready-to-use frontend components. Created by Jeremy Thomas in 2016, Bulma offers a modern, responsive design system without any JavaScript dependencies. Its lightweight nature (only ~200KB minified), modular structure, and intuitive class naming make it an excellent choice for rapid development of responsive websites and applications.

Key advantages:

• 100% responsive and mobile-first
• Modular architecture (import only what you need)
• Pure CSS (no JavaScript dependencies)
• Readable, human-friendly naming conventions
• Active community and regular updates
• Modern Flexbox-based grid system

Core Concepts & Structure

Installation Options

Modular Import Structure

For optimized builds, import only the components you need:

// Import specific Bulma components
@import "bulma/sass/utilities/_all.sass";
@import "bulma/sass/base/_all.sass";
@import "bulma/sass/elements/button.sass";
@import "bulma/sass/components/navbar.sass";
// etc.

Bulma’s File Structure

bulma/
├── css/
│   ├── bulma.css
│   └── bulma.min.css
└── sass/
    ├── base/
    ├── components/
    ├── elements/
    ├── form/
    ├── grid/
    ├── helpers/
    ├── layout/
    └── utilities/

Responsive Design System

Viewport Breakpoints

Example: is-half-mobile is-one-third-tablet is-one-quarter-desktop

Visibility Helpers

Grid System

Columns

Basic structure:

<div class="columns">
  <div class="column">First column</div>
  <div class="column">Second column</div>
  <div class="column">Third column</div>
</div>

Column Sizes

Column Modifiers

Typography

Text Size Classes

Responsive variants: is-size-1-mobile, is-size-1-tablet, etc.

Text Alignment

Responsive variants: has-text-centered-mobile, has-text-left-desktop, etc.

Text Transformation

Color System

Context Colors

Color Modifiers

Common UI Components

Buttons

Basic usage:

<button class="button is-primary">Primary Button</button>

Button Styles

Button Sizes

Navbar

Basic structure:

<nav class="navbar" role="navigation" aria-label="main navigation">
  <div class="navbar-brand">
    <a class="navbar-item" href="#">
      <img src="logo.png" alt="Logo">
    </a>
    <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false">
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
    </a>
  </div>
  
  <div class="navbar-menu">
    <div class="navbar-start">
      <a class="navbar-item">Home</a>
      <div class="navbar-item has-dropdown is-hoverable">
        <a class="navbar-link">Dropdown</a>
        <div class="navbar-dropdown">
          <a class="navbar-item">Item 1</a>
          <a class="navbar-item">Item 2</a>
        </div>
      </div>
    </div>
    
    <div class="navbar-end">
      <div class="navbar-item">
        <div class="buttons">
          <a class="button is-primary">Sign up</a>
          <a class="button is-light">Log in</a>
        </div>
      </div>
    </div>
  </div>
</nav>

Navbar Modifiers

Cards

Basic structure:

<div class="card">
  <div class="card-image">
    <figure class="image is-4by3">
      <img src="image.jpg" alt="Card image">
    </figure>
  </div>
  <div class="card-content">
    <div class="media">
      <div class="media-content">
        <p class="title is-4">Card title</p>
        <p class="subtitle is-6">Subtitle</p>
      </div>
    </div>
    <div class="content">
      Card content goes here.
    </div>
  </div>
  <footer class="card-footer">
    <a href="#" class="card-footer-item">Footer item</a>
  </footer>
</div>

Forms

Basic form elements:

<div class="field">
  <label class="label">Label</label>
  <div class="control">
    <input class="input" type="text" placeholder="Text input">
  </div>
  <p class="help">Help text</p>
</div>

<div class="field">
  <div class="control">
    <div class="select">
      <select>
        <option>Select dropdown</option>
      </select>
    </div>
  </div>
</div>

<div class="field">
  <div class="control">
    <label class="checkbox">
      <input type="checkbox">
      Checkbox
    </label>
  </div>
</div>

<div class="field">
  <div class="control">
    <label class="radio">
      <input type="radio" name="answer">
      Radio option
    </label>
  </div>
</div>

Form Control Modifiers

Layout Components

Hero Sections

<section class="hero is-primary">
  <div class="hero-body">
    <p class="title">Hero title</p>
    <p class="subtitle">Hero subtitle</p>
  </div>
</section>

Hero Modifiers

Containers

<div class="container">
  <!-- Content inside a centered container -->
</div>

Section

<section class="section">
  <!-- Content inside a section with padding -->
</section>

Helper Classes

Spacing Helpers

Display Helpers

Flexbox Helpers

Common Challenges & Solutions

Challenge 1: Making Navbar Responsive

Problem: The navbar burger doesn’t automatically open on mobile.

Solution: Add JavaScript to toggle the .is-active class:

document.addEventListener('DOMContentLoaded', () => {
  // Get all "navbar-burger" elements
  const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);

  // Add a click event on each of them
  $navbarBurgers.forEach(el => {
    el.addEventListener('click', () => {
      // Get the target from the "data-target" attribute
      const target = el.dataset.target;
      const $target = document.getElementById(target);

      // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
      el.classList.toggle('is-active');
      $target.classList.toggle('is-active');
    });
  });
});

Challenge 2: Customizing Bulma’s Default Colors

Problem: Need to customize the default color scheme.

Solution: Create your own Sass variables file:

// Custom variables
$primary: #8A4D76;
$info: #FA7C91;
$success: #23D160;
$warning: #FFDD57;
$danger: #FF3860;

// Import Bulma after defining variables
@import "bulma/bulma.sass";

Challenge 3: Fixed Table Headers

Problem: Large tables need fixed headers for scrolling.

Solution: Combine Bulma with custom CSS:

<div class="table-container" style="max-height: 400px; overflow-y: auto;">
  <table class="table is-bordered is-striped is-narrow is-hoverable is-fullwidth">
    <thead style="position: sticky; top: 0; background-color: white; z-index: 1;">
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
      </tr>
    </thead>
    <tbody>
      <!-- Table content -->
    </tbody>
  </table>
</div>

Best Practices & Tips

1. Modular Import for Performance

Only import the Bulma components you need:

// Import only what you need
@import "bulma/sass/utilities/_all.sass";
@import "bulma/sass/elements/button.sass";
// etc.

2. Mobile-First Approach

• Start with mobile designs, then enhance for larger screens
• Use responsive helpers like is-hidden-mobile strategically
• Test on actual devices or device simulators

3. Extend Rather Than Override

Create your own classes that extend Bulma’s:

.special-button {
  @extend .button;
  @extend .is-primary;
  border-radius: 0;
}

4. Use Sass Functions for Custom Colors

// Create a custom color using Bulma's functions
@import "bulma/sass/utilities/functions";
$custom-color: findLightColor(findColorInvert($primary));

5. Avoid Overusing Columns

• Don’t nest more than 3 levels of columns
• Use container with appropriate size modifiers
• Consider tiles for complex grid layouts

6. Leverage Built-In Color Functions

// Create lighter/darker shades using Bulma's functions
$primary-light: findLightColor($primary);
$primary-dark: findDarkColor($primary);

7. Optimize Loading Time

• Consider using Purgecss to remove unused CSS
• Use asynchronous CSS loading for non-critical styles
• Combine with modern loading techniques like preload/prefetch

Resources for Further Learning

Official Documentation

• Bulma Documentation
• Bulma Blog
• Bulma GitHub Repository

Community Extensions

• Bulma Templates
• Bulma Extensions
• Buefy (Vue.js + Bulma)
• React-Bulma Components

Learning Resources

• Bulma CSS Framework Tutorial (Scrimba)
• Learn Bulma CSS for Free (Scrimba)
• Bulma Crash Course (YouTube)

Development Tools

• Bulmaswatch (Bulma Themes)
• Bulma Customizer
• Bulma Builder

This cheatsheet covers the essentials of Bulma CSS Framework. For more detailed information and examples, refer to the official documentation at bulma.io.