--- title: Bulma Block List subtitle: Docs layout: page menubar: menu hero_height: is-medium ---
GitHub Stars GitHub forks npm

Installation

  • npm i -S bulma-block-list
  • @import "node_modules/bulma-block-list/src/block-list"; after importing Bulma.

How to use

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)

is-centered

is-right

Sizes

is-small

is-normal

is-large

Colours

is-primary

is-info

is-dark

Outlined

is-outlined

is-outlined is-primary

is-outlined is-dark

Has Radius

has-radius is-primary

has-radius is-info

has-radius is-dark

Is Highlighted

In v0.4 you can highlight the all list items or individual list items

li.is-highlighted

is-highlighted is-info

is-highlighted is-danger has-radius

Has Icon

In v0.5 you can add icons

<li class="has-icon">
    <span class="icon">
        <i class="fas fa-plane"></i>
    </span>
    <span>Item one</span>
</li>

// .is-right
<li class="has-icon is-right">
    <span>Item one</span>
    <span class="icon">
        <i class="fas fa-plane"></i>
    </span>
</li>

li.has-icon

li.has-icon.is-right

Combining styles

List Item Overrides

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

li.is-large

li.is-primary

li.is-primary.is-outlined

Combinations

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

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

ul.is-danger.is-centered

li.is-highlighted.is-large