Skip to main content

Modern CSS Framework

Build responsive web interfaces quickly with Bulma’s Flexbox-based components. Pure CSS with zero JavaScript required.

Get StartedExplore Components
Pure CSS
Flexbox Grid
Mobile First
Fully Customizable

Quick Start

Get up and running with Bulma in minutes. Just include the CSS and start building.

1

Install Bulma

Choose your preferred package manager to install Bulma:
npm install bulma
Or use the CDN for quick prototyping:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
2

Import the CSS

After installation, import the CSS file into your project:
@import 'bulma/css/bulma.css';
Or if you’re using Sass, import the main file to customize variables:
@use 'bulma/bulma.scss' with (
  $primary: #00d1b2,
  $family-sans-serif: 'Inter', sans-serif
);
3

Build Your First Component

Start using Bulma classes to build responsive components:
<nav class="navbar" role="navigation">
  <div class="navbar-brand">
    <a class="navbar-item" href="/">
      <img src="logo.png" alt="Logo">
    </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">
        <button class="button is-primary">
          <strong>Sign up</strong>
        </button>
      </div>
    </div>
  </div>
</nav>
Bulma is CSS-only, so you’ll need to add your own JavaScript for interactive components like dropdowns and modals.
4

Customize Your Theme

Override Sass variables to match your brand:
@use 'bulma/bulma.scss' with (
  $primary: #8e44ad,
  $link: #3273dc,
  $radius: 8px,
  $family-sans-serif: 'Your Font', sans-serif
);
Check out the customization guide to learn about all available variables and theming options.

Explore by Category

Discover Bulma’s comprehensive collection of components, elements, and utilities.

Layout

Structure your pages with containers, sections, heroes, and more layout components.

Grid System

Build responsive layouts with the powerful Flexbox-based column system.

Elements

Essential UI elements like buttons, boxes, icons, images, and notifications.

Form Controls

Beautiful form inputs, selects, checkboxes, radios, and file uploads.

Components

Complex UI components including navbars, cards, modals, tabs, and more.

Helpers

Utility classes for colors, typography, spacing, and flexbox alignment.

Why Choose Bulma?

Pure CSS, No JavaScript

Bulma is a CSS-only framework, giving you complete control over JavaScript implementation. Use your preferred framework or vanilla JS.

Flexbox Powered

Built entirely on Flexbox for modern, responsive layouts that work across all devices and screen sizes.

Highly Customizable

Customize every aspect using Sass variables or CSS custom properties. Override colors, spacing, typography, and more.

Light & Dark Themes

Built-in support for light and dark themes with CSS custom properties. Automatically responds to system preferences.

Resources

Sass Reference

Complete reference of all Sass variables, mixins, and functions available for customization.

Modifier Classes

Learn about Bulma’s powerful modifier system using is-* and has-* classes.

Responsive Breakpoints

Understand Bulma’s responsive breakpoint system for mobile, tablet, desktop, and beyond.

Color System

Explore the full color palette and semantic color variables used throughout Bulma.

Ready to Build?

Join thousands of developers using Bulma to build beautiful, responsive web interfaces.

Install BulmaView on GitHub

Build docs developers (and LLMs) love

Get started for freeTalk to us