Bulma CSS Framework Cheat Sheet

Bulma is an open-source, modern CSS framework based entirely on Flexbox.

Responsive Breakpoints

         768px       1024px              1216px       1408px
<---------^------------^------------------^-------------^------------->
  Mobile      Tablet         Desktop         Widescreen      FullHD

• Mobile: up to 768px
• Tablet: from 769px
• Desktop: from 1024px
• Widescreen: from 1216px
• FullHD: from 1408px

---

Columns Grid System

Wrap child .column elements inside a .columns flex container:

<div class="columns">
  <div class="column">1</div>
  <div class="column">2</div>
  <div class="column">3</div>
  <div class="column">4</div>
</div>

Column Width Modifiers

<div class="column is-half">Half width</div>
<div class="column is-one-third">1/3 width</div>
<div class="column is-three-quarters">3/4 width</div>
<div class="column is-4">4 / 12 (1/3)</div>

---

Core Modifiers

Colors

• .is-primary: Turquoise
• .is-link: Blue
• .is-info: Cyan
• .is-success: Green
• .is-warning: Yellow
• .is-danger: Red

Sizes

• .is-small
• .is-normal
• .is-medium
• .is-large

States

• .is-outlined: Transparent background with colored border
• .is-loading: Inset animated loading spinner
• .is-disabled: Visually inactive

---

Typography Helpers

Font Sizes

Alignment & Text Transforms

• .has-text-centered: Center align
• .has-text-left: Left align
• .has-text-right: Right align
• .has-text-justified: Justify text
• .is-capitalized: Capitalize first letter of every word
• .is-lowercase: All lowercase
• .is-uppercase: All uppercase

---

WYSIWYG Content Wrapper

Use .content to format raw markdown or CMS user content:

<div class="content">
  <h1>Main Title</h1>
  <p>Standard paragraph with typographic scaling.</p>
  <ul>
    <li>Bullet list item 1</li>
    <li>Bullet list item 2</li>
  </ul>
</div>