CheatSheetsHero

Catalog / Bulma CSS Framework Cheatsheet

Bulma CSS Framework Cheatsheet

A comprehensive cheat sheet for the Bulma CSS framework, covering its key components, modifiers, and utilities for building responsive web layouts.

Layout Components

Container

The .container class is used to center and constrain the content within a page.

Usage:

<div class="container">
  ...
</div>

You can use .is-fluid to make the container take up the full width of the screen.

Usage:

<div class="container is-fluid">
  ...
</div>

Columns

Bulma uses a column-based layout system. Start with a .columns container, then add .column elements.

Usage:

<div class="columns">
  <div class="column">...</div>
  <div class="column">...</div>
</div>

Columns are automatically equal width. You can specify the width using .is-{number} classes, where {number} is a number between 1 and 12.

Example:

<div class="columns">
  <div class="column is-4">...</div>
  <div class="column is-8">...</div>
</div>

To make columns stack on smaller screens, use the .is-multiline modifier.

Usage:

<div class="columns is-multiline">
  ...
</div>

Grid

The .tile class helps to create a masonry grid layout. Tiles can be nested for complex layouts.

Usage:

<div class="tile is-ancestor">
  <div class="tile is-parent">
    <article class="tile is-child box">...</article>
  </div>
</div>

Use .is-vertical to make tiles stack vertically.

Example:

<div class="tile is-ancestor">
  <div class="tile is-4 is-vertical is-parent">
    <article class="tile is-child box">...</article>
  </div>
</div>

Form Elements

Input

Basic text input:

Usage:

<input class="input" type="text" placeholder="Text input">

Different states can be added using modifiers:

.is-success, .is-warning, .is-danger.

Example:

<input class="input is-success" type="text" placeholder="Success">

To show a loading state, use .is-loading:

Example:

<input class="input is-loading" type="text" placeholder="Loading">

Select

Basic select dropdown:

Usage:

<div class="select">
  <select>
    <option>Select dropdown</option>
    <option>With options</option>
  </select>
</div>

Use the .is-multiple modifier to create a multiple select box.

Example:

<div class="select is-multiple">
  <select multiple size="3">
    <option>Option 1</option>
    <option>Option 2</option>
  </select>
</div>

Textarea

Basic textarea:

Usage:

<textarea class="textarea" placeholder="e.g. Hello world"></textarea>

States like .is-success, .is-warning, and .is-danger also work on textareas.

Example:

<textarea class="textarea is-danger"></textarea>

Radio & Checkbox

Basic checkbox:

Usage:

<label class="checkbox">
  <input type="checkbox"> Remember me
</label>

Basic radio button:

Usage:

<label class="radio">
  <input type="radio" name="question"> Yes
</label>

Elements

Box

The .box class is a simple container for displaying content.

Usage:

<div class="box">
  ...
</div>

Button

Basic button:

Usage:

<button class="button">Button</button>

Different styles can be applied using modifiers like .is-primary, .is-info, .is-success, .is-warning, .is-danger.

Example:

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

Sizes can be adjusted using .is-small, .is-medium, .is-large.

Example:

<button class="button is-large">Large</button>

To make a button full width, use .is-fullwidth.

Example:

<button class="button is-fullwidth">Fullwidth</button>

A button can be disabled using the disabled attribute.

Example:

<button class="button" disabled>Disabled</button>

Image

To display a responsive image:

Usage:

<figure class="image is-128x128">
  <img src="https://bulma.io/images/placeholders/128x128.png">
</figure>

Different aspect ratios can be achieved using classes like .is-square, .is-1by1, .is-5by4, .is-4by3, .is-3by2, .is-5by3, .is-16by9, .is-2by1, .is-3by1, .is-4by5, .is-3by4, .is-2by3, .is-3by5, .is-9by16, .is-1by2, .is-1by3

Example:

<figure class="image is-1by1">
  <img src="https://bulma.io/images/placeholders/640x640.png">
</figure>

Notification

To display a notification message:

Usage:

<div class="notification">
  <button class="delete"></button>
  Lorem ipsum dolor sit amet...
</div>

You can modify the notification style using classes like .is-primary, .is-info, .is-success, .is-warning, .is-danger.

Example:

<div class="notification is-success">
  ...
</div>

Modifiers and Helpers

Typography

Bulma provides several helper classes for typography:

  • .is-size-{1-7}: Sets the font size.
  • .has-text-weight-{light,normal,semibold,bold}: Sets the font weight.
  • .is-capitalized, .is-lowercase, .is-uppercase: Modifies the text transformation.
  • .has-text-centered, .has-text-justified, .has-text-left, .has-text-right: Modifies the text alignment.

Example:

<p class="is-size-3 has-text-weight-bold has-text-centered">This is a title</p>

Colors

Bulma provides a set of color modifiers:

  • .has-text-{primary,link,info,success,warning,danger,white,black,light,dark}: Text color.
  • .has-background-{primary,link,info,success,warning,danger,white,black,light,dark}: Background color.

Example:

<p class="has-text-primary">This is primary text</p>

Example:

<section class="has-background-danger">This is a danger background</section>

Spacing

Bulma provides spacing helpers using the $spacer variable (default 1.5rem):

  • m-: margin
  • p-: padding
  • t-: top
  • b-: bottom
  • l-: left
  • r-: right
  • x-: left and right
  • y-: top and bottom

followed by:

  • 0: 0
  • 1: $spacer * .25
  • 2: $spacer * .5
  • 3: $spacer
  • 4: $spacer * 1.5
  • 5: $spacer * 3
  • auto: auto

Example:

<div class="mt-3">Margin top 1.5rem</div>

Responsiveness

Bulma is responsive by default. You can use breakpoint-specific classes to control visibility:

  • .is-hidden-{touch,desktop,tablet,mobile,widescreen,fullhd}: Hides the element on the specified breakpoint and above.
  • .is-block-{touch,desktop,tablet,mobile,widescreen,fullhd}: Sets the element to display: block on the specified breakpoint and above.

And so on for inline, inline-block, flex, inline-flex.

Example:

<div class="is-hidden-mobile">This is hidden on mobile</div>
Download PDF