Bulma Block List

Docs

How to use

View the Bulma Block List repo on GitHub and follow the instructions.

Create a ul and give it the class 'block-list' then use the modifyers to style as needed. Only some of the colours are displayed below but the scss loops through the entire Bulma $colors map.

<ul class="block-list is-small is-outlined is-success is-centered">
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
</ul>

Alignment

is-left (default)

  • Item one
  • Item two
  • Item three

is-centered

  • Item one
  • Item two
  • Item three

is-right

  • Item one
  • Item two
  • Item three

Sizes

is-small

  • Item one
  • Item two
  • Item three

is-normal

  • Item one
  • Item two
  • Item three

is-large

  • Item one
  • Item two
  • Item three

Colours

is-primary

  • Item one
  • Item two
  • Item three

is-info

  • Item one
  • Item two
  • Item three

is-dark

  • Item one
  • Item two
  • Item three

Outlined

is-outlined is-primary

  • Item one
  • Item two
  • Item three

is-outlined is-info

  • Item one
  • Item two
  • Item three

is-outlined is-dark

  • Item one
  • Item two
  • Item three

Has Radius

has-radius is-primary

  • Item one
  • Item two
  • Item three

has-radius is-info

  • Item one
  • Item two
  • Item three

has-radius is-dark

  • Item one
  • Item two
  • Item three

List Item Overrides

In v0.3 you can override the classes on a list item

li.is-large

  • Item one
  • Item two
  • Item three

li.is-primary

  • Item one
  • Item two
  • Item three

li.is-primary.is-outlined

  • Item one
  • Item two
  • Item three

Combinations

is-small is-outlined is-success is-centered

  • Item one
  • Item two
  • Item three

is-large is-warning is-right has-radius

  • Item one
  • Item two
  • Item three

ul.is-danger.is-centered

li.is-outlined.is-large

  • Item one
  • Item two
  • Item three