Bulma CSS Framework

The modern CSS framework that just works. Flexbox-based, responsive, and completely free.

Why Choose Bulma?

Bulma is a free, open-source CSS framework based on Flexbox that provides ready-to-use frontend components that you can easily combine to build responsive web interfaces.

Flexbox-Based

Built with modern CSS Flexbox for easy layouts

Mobile-First

Responsive design with mobile-first approach

Modular

Import only what you need, keep CSS lightweight

Grid System

Key Features:

  • Flexbox-Based Grid - Modern CSS Grid with Flexbox power
  • 12-Column System - Familiar 12-column responsive grid
  • Auto-Layout Columns - Equal width distribution automatically
  • Responsive Modifiers - Mobile, tablet, desktop, widescreen breakpoints
  • Nesting Support - Complex layouts with nested columns

Grid System Demo

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bulma Grid System</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
  <style>
    .column-demo {
      background: #00d1b2;
      color: white;
      padding: 1rem;
      border: 2px solid white;
      text-align: center;
    }
  </style>
</head>
<body>
  <section class="section">
    <div class="container">
      <h1 class="title has-text-centered">Bulma Grid System</h1>

      <!-- Basic Columns -->
      <div class="box">
        <h2 class="subtitle">Basic Columns - Equal Width</h2>
        <div class="columns">
          <div class="column column-demo">Auto Column</div>
          <div class="column column-demo">Auto Column</div>
          <div class="column column-demo">Auto Column</div>
        </div>
      </div>

      <!-- Responsive Columns -->
      <div class="box">
        <h2 class="subtitle">Responsive Columns</h2>
        <div class="columns">
          <div class="column is-half-mobile is-one-third-tablet is-one-quarter-desktop column-demo">
            is-half-mobile<br>is-one-third-tablet<br>is-one-quarter-desktop
          </div>
          <div class="column is-half-mobile is-one-third-tablet is-one-quarter-desktop column-demo">
            Responsive sizing
          </div>
          <div class="column is-half-mobile is-one-third-tablet is-one-quarter-desktop column-demo">
            Adapts to screen size
          </div>
          <div class="column is-half-mobile is-one-third-tablet is-one-quarter-desktop column-demo">
            Mobile-first approach
          </div>
        </div>
      </div>

      <!-- Column Sizes -->
      <div class="box">
        <h2 class="subtitle">Column Sizes</h2>
        <div class="columns">
          <div class="column is-two-thirds column-demo">is-two-thirds (66%)</div>
          <div class="column column-demo">Auto (34%)</div>
        </div>
        <div class="columns">
          <div class="column is-three-quarters column-demo">is-three-quarters (75%)</div>
          <div class="column column-demo">Auto (25%)</div>
        </div>
      </div>

      <!-- Nested Columns -->
      <div class="box">
        <h2 class="subtitle">Nested Columns</h2>
        <div class="columns">
          <div class="column is-8 column-demo">
            Parent is-8
            <div class="columns">
              <div class="column is-6 column-demo" style="background: #009e86;">Nested is-6</div>
              <div class="column is-6 column-demo" style="background: #009e86;">Nested is-6</div>
            </div>
          </div>
          <div class="column is-4 column-demo">Parent is-4</div>
        </div>
      </div>
    </div>
  </section>
</body>
</html>

Components

Component Library:

ButtonsCardsFormsNavbarNotificationsMenuModalPanel

Components Demo

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bulma Components</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
</head>
<body>
  <section class="section">
    <div class="container">
      <h1 class="title has-text-centered">Bulma Components</h1>

      <!-- Buttons -->
      <div class="box">
        <h2 class="subtitle">Button Components</h2>
        <div class="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-dark">Dark</button>
        </div>
        <div class="buttons">
          <button class="button is-primary is-outlined">Outlined</button>
          <button class="button is-link is-rounded">Rounded</button>
          <button class="button is-info is-loading">Loading</button>
          <button class="button is-success" disabled>Disabled</button>
        </div>
      </div>

      <!-- Cards -->
      <div class="box">
        <h2 class="subtitle">Card Components</h2>
        <div class="columns">
          <div class="column is-6">
            <div class="card">
              <div class="card-content">
                <p class="title">"There are two hard things in computer science: cache invalidation, naming things, and off-by-one errors."</p>
                <p class="subtitle">Jeff Atwood</p>
              </div>
              <footer class="card-footer">
                <p class="card-footer-item">
                  <span>View on <a href="https://twitter.com/codinghorror/status/506010907021828096">Twitter</a></span>
                </p>
                <p class="card-footer-item">
                  <span>Share on <a href="#">Facebook</a></span>
                </p>
              </footer>
            </div>
          </div>
          <div class="column is-6">
            <div class="card">
              <header class="card-header">
                <p class="card-header-title">Component</p>
                <button class="card-header-icon" aria-label="more options">
                  <span class="icon">
                    <i class="fas fa-angle-down" aria-hidden="true"></i>
                  </span>
                </button>
              </header>
              <div class="card-content">
                <div class="content">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.
                  <a href="#">@bulmaio</a>. <a href="#">#css</a> <a href="#">#responsive</a>
                  <br>
                  <time datetime="2016-1-1">11:09 PM - 1 Jan 2016</time>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Notifications -->
      <div class="box">
        <h2 class="subtitle">Notification Components</h2>
        <div class="notification is-primary">
          <button class="delete"></button>
          Primar lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor.
        </div>
        <div class="notification is-link">
          <button class="delete"></button>
          Primar lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor.
        </div>
        <div class="notification is-info">
          <button class="delete"></button>
          Primar lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor.
        </div>
        <div class="notification is-success">
          <button class="delete"></button>
          Primar lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor.
        </div>
      </div>

      <!-- Navigation -->
      <div class="box">
        <h2 class="subtitle">Navigation Components</h2>
        <nav class="navbar" role="navigation" aria-label="main navigation">
          <div class="navbar-brand">
            <a class="navbar-item" href="https://bulma.io">
              <strong>Bulma Navigation</strong>
            </a>
          </div>

          <div class="navbar-menu">
            <div class="navbar-start">
              <a class="navbar-item">Home</a>
              <a class="navbar-item">Documentation</a>
            </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>
    </div>
  </section>
</body>
</html>

Forms

Form Features:

  • Field Structure - Organized form field components
  • Validation States - Success, warning, and error states
  • Form Addons - Input groups with buttons and icons
  • Horizontal Forms - Label and input side-by-side layouts
  • Custom Controls - Checkboxes, radios, and file inputs

Forms Demo

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bulma Forms</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
</head>
<body>
  <section class="section">
    <div class="container">
      <h1 class="title has-text-centered">Bulma Forms</h1>

      <!-- Basic Form -->
      <div class="box">
        <h2 class="subtitle">Contact Form</h2>
        <form>
          <div class="field">
            <label class="label">Name</label>
            <div class="control">
              <input class="input" type="text" placeholder="Text input">
            </div>
          </div>

          <div class="field">
            <label class="label">Username</label>
            <div class="control has-icons-left has-icons-right">
              <input class="input is-success" type="text" placeholder="Text input" value="bulma">
              <span class="icon is-small is-left">
                <i class="fas fa-user"></i>
              </span>
              <span class="icon is-small is-right">
                <i class="fas fa-check"></i>
              </span>
            </div>
            <p class="help is-success">This username is available</p>
          </div>

          <div class="field">
            <label class="label">Email</label>
            <div class="control">
              <input class="input is-danger" type="email" placeholder="Email input" value="hello@">
            </div>
            <p class="help is-danger">This email is invalid</p>
          </div>

          <div class="field">
            <label class="label">Subject</label>
            <div class="control">
              <div class="select">
                <select>
                  <option>Select dropdown</option>
                  <option>With options</option>
                </select>
              </div>
            </div>
          </div>

          <div class="field">
            <label class="label">Message</label>
            <div class="control">
              <textarea class="textarea" placeholder="Textarea"></textarea>
            </div>
          </div>

          <div class="field">
            <div class="control">
              <label class="checkbox">
                <input type="checkbox">
                I agree to the <a href="#">terms and conditions</a>
              </label>
            </div>
          </div>

          <div class="field">
            <div class="control">
              <label class="radio">
                <input type="radio" name="question">
                Yes
              </label>
              <label class="radio">
                <input type="radio" name="question">
                No
              </label>
            </div>
          </div>

          <div class="field is-grouped">
            <div class="control">
              <button class="button is-link">Submit</button>
            </div>
            <div class="control">
              <button class="button is-link is-light">Cancel</button>
            </div>
          </div>
        </form>
      </div>

      <!-- Form Addons -->
      <div class="box">
        <h2 class="subtitle">Form Addons</h2>
        <div class="field has-addons">
          <div class="control">
            <input class="input" type="text" placeholder="Find a repository">
          </div>
          <div class="control">
            <a class="button is-info">Search</a>
          </div>
        </div>

        <div class="field has-addons">
          <div class="control">
            <div class="select">
              <select>
                <option>$</option>
                <option>£</option>
                <option>€</option>
              </select>
            </div>
          </div>
          <div class="control">
            <input class="input" type="text" placeholder="Amount of money">
          </div>
          <div class="control">
            <a class="button is-success">Transfer</a>
          </div>
        </div>
      </div>

      <!-- Horizontal Form -->
      <div class="box">
        <h2 class="subtitle">Horizontal Form</h2>
        <div class="field is-horizontal">
          <div class="field-label is-normal">
            <label class="label">From</label>
          </div>
          <div class="field-body">
            <div class="field">
              <p class="control is-expanded">
                <input class="input" type="text" placeholder="Name">
              </p>
            </div>
            <div class="field">
              <p class="control is-expanded">
                <input class="input is-success" type="email" placeholder="Email">
              </p>
            </div>
          </div>
        </div>

        <div class="field is-horizontal">
          <div class="field-label"></div>
          <div class="field-body">
            <div class="field is-expanded">
              <div class="field has-addons">
                <div class="control">
                  <a class="button is-static">+44</a>
                </div>
                <div class="control is-expanded">
                  <input class="input" type="tel" placeholder="Your phone number">
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</body>
</html>

Responsive Features

Responsive Capabilities:

  • Breakpoint System - Mobile, tablet, desktop, widescreen, fullhd
  • Responsive Helpers - Show/hide elements per breakpoint
  • Mobile-First Grid - Columns adapt from mobile up
  • Responsive Typography - Text sizes that scale with screen
  • Touch-Friendly - Mobile-optimized interactions

Responsive Features Demo

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bulma Responsive</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
</head>
<body>
  <section class="section">
    <div class="container">
      <h1 class="title has-text-centered">Bulma Responsive Features</h1>

      <!-- Responsive Typography -->
      <div class="box">
        <h2 class="subtitle">Responsive Typography</h2>
        <h1 class="title is-1-mobile is-3-tablet is-1-desktop">Responsive Title</h1>
        <p class="subtitle is-5-mobile is-6-tablet is-4-desktop">
          This text scales based on screen size using Bulma's responsive typography helpers.
        </p>
      </div>

      <!-- Responsive Helpers -->
      <div class="box">
        <h2 class="subtitle">Responsive Helpers</h2>
        <div class="is-flex-mobile is-block-tablet">
          <div class="notification is-primary is-hidden-mobile">
            Hidden on mobile, visible on tablet+
          </div>
          <div class="notification is-success is-hidden-tablet">
            Hidden on tablet+, visible on mobile
          </div>
          <div class="notification is-info is-hidden-desktop">
            Hidden on desktop, visible on mobile/tablet
          </div>
        </div>
      </div>

      <!-- Responsive Grid -->
      <div class="box">
        <h2 class="subtitle">Responsive Grid Layout</h2>
        <div class="columns is-mobile is-multiline">
          <div class="column is-half-mobile is-one-third-tablet is-one-quarter-desktop">
            <div class="notification is-primary has-text-centered">
              is-half-mobile<br>is-one-third-tablet<br>is-one-quarter-desktop
            </div>
          </div>
          <div class="column is-half-mobile is-one-third-tablet is-one-quarter-desktop">
            <div class="notification is-link has-text-centered">
              Responsive column
            </div>
          </div>
          <div class="column is-half-mobile is-one-third-tablet is-one-quarter-desktop">
            <div class="notification is-info has-text-centered">
              Adapts to screen
            </div>
          </div>
          <div class="column is-half-mobile is-one-third-tablet is-one-quarter-desktop">
            <div class="notification is-success has-text-centered">
              Mobile first
            </div>
          </div>
        </div>
      </div>

      <!-- Responsive Navigation -->
      <div class="box">
        <h2 class="subtitle">Responsive Navigation</h2>
        <nav class="navbar is-spaced" role="navigation" aria-label="main navigation">
          <div class="navbar-brand">
            <a class="navbar-item" href="#">
              <strong>Responsive Nav</strong>
            </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">Features</a>
              <a class="navbar-item">Pricing</a>
            </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>

      <!-- Responsive Spacing -->
      <div class="box">
        <h2 class="subtitle">Responsive Spacing</h2>
        <div class="m-0-mobile m-3-tablet m-6-desktop p-2-mobile p-4-tablet p-6-desktop notification is-warning">
          Responsive margin and padding utilities that adapt to different screen sizes.
        </div>
      </div>
    </div>
  </section>

  <script>
    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');
        });
      });
    });
  </script>
</body>
</html>

Quick Start Guide

CDN Method (Easiest)

<!-- Bulma CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">

<!-- Optional Font Awesome Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

Package Manager (npm)

# Install via npm
npm install bulma

# Import in your CSS
@import 'bulma/css/bulma.css';

# Or import SASS version
@import 'bulma/bulma.sass';

# Install with yarn
yarn add bulma

Best Practices

✅ Do This

  • Use semantic HTML - Bulma works with proper HTML structure
  • Follow mobile-first - Design for mobile then enhance
  • Use modifier classes - Leverage is- and has- helpers
  • Customize with SASS - Use variables for theming
  • Keep it simple - Bulma is designed to be straightforward

❌ Avoid This

  • Overriding core styles - Use SASS customization instead
  • Ignoring breakpoints - Always consider responsive design
  • Complex nesting - Keep HTML structure clean and simple
  • Forgetting Font Awesome - Icons enhance the experience
  • Mixing frameworks - Stick to Bulma's methodology

Ready to Build with Bulma?

Start creating beautiful, responsive websites with the modern CSS framework that's easy to learn and use.

< PreviousNext >