Bulma cheatsheet

Screen sizes

         768         1024                1216         1408
'     '     '     '     '     '     '     '     '     '     '     '
<---------^------------^------------------^-------------^------------->
  mobile      tablet         desktop         widescreen      fullhd

Columns

.container

Wrap as many .column’s’ as you like in a .columns wrapper

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

Modifiers

The following CSS classes affect the colour.

.is-primary
.is-link
.is-info
.is-success
.is-warning
.is-danger

The following classes modify the size.

.is-small
.is-medium
.is-large

The following classes modify the state.

.is-outlined
.is-loading

Typography Helpers

The following classes modify the font-size

Class	Font-size
`.is-size-1`	3rem
`.is-size-2`	2.5rem
`.is-size-3`	2rem
`.is-size-4`	1.5rem
`.is-size-5`	1.25rem
`.is-size-6`	1rem
`.is-size-7`	0.75rem

The following classes align the text

Class	Alignment
`.has-text-centered`	Makes the text centered
`.has-text-justified`	Makes the text justified
`.has-text-left`.	Makes the text align to the left
`.has-text-right`	Makes the text align to the right

The following classes transform the text

Class	Transformation
`.is-capitalized`	Transforms the first character of each word to uppercase
`.is-lowercase`	Transforms all characters to lowercase
`.is-uppercase`	Transforms all characters to uppercase

WYSIWYG Content

<div class="content">
  <!-- start WYSIWYG contents -->
  <h1>Heading</h1>
  <p>Paragraph</p>

  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
  </ul>
  <!-- end WYSIWYG contents -->
</div>

To provide default stylings for commonly generated WYSIWYG contents, use the .content class.