title: Bulma Block List subtitle: Docs layout: page menubar: menu hero_height: is-medium


<div class=“columns is-multiline”>

<div class="column is-12 has-text-right">
    <a href="https://github.com/chrisrhymes/bulma-block-list/stargazers">
        <img src="https://img.shields.io/github/stars/chrisrhymes/bulma-block-list?style=social" alt="GitHub Stars" />
    </a>
    <a href="https://github.com/chrisrhymes/bulma-block-list/network/members">
        <img alt="GitHub forks" src="https://img.shields.io/github/forks/chrisrhymes/bulma-block-list?label=fork&style=social">
    </a>
    <img alt="npm" src="https://img.shields.io/npm/dw/bulma-block-list">
</div>
<div class="column is-12">
    <div class="content">
        <h2 id="how-to-use">How to use</h2>
        <p>View the <a href="https://github.com/chrisrhymes/bulma-block-list">Bulma Block List repo on GitHub</a> and follow the instructions.</p>
        <p>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.</p>
    </div>

<div class=“highlight highlight-text-html-basic”> <pre> &lt;<span class=“pl-ent”>ul</span> <span class=“pl-e”>class</span>=<span class=“pl-s”><span class=“pl-pds”>“</span>block-list is-small is-outlined is-success is-centered<span class=”pl-pds“>”</span></span>&gt; &lt;<span class=“pl-ent”>li</span>&gt;Item one&lt;/<span class=“pl-ent”>li</span>&gt; &lt;<span class=“pl-ent”>li</span>&gt;Item two&lt;/<span class=“pl-ent”>li</span>&gt; &lt;<span class=“pl-ent”>li</span>&gt;Item three&lt;/<span class=“pl-ent”>li</span>&gt; &lt;/<span class=“pl-ent”>ul</span>&gt;</pre> </div>

</div>
<div class="column is-12">
    <p class="title is-4" id="alignment">Alignment</p>
</div>
<div class="column is-4">
    <p class="title is-5">is-left (default)</p>
    <ul class="block-list is-left">
        <li>Item one</li>
        <li>Item two</li>
        <li>Item three</li>
    </ul>
</div>
<div class="column is-4">
    <p class="title is-5">is-centered</p>
    <ul class="block-list is-centered">
        <li>Item one</li>
        <li>Item two</li>
        <li>Item three</li>
    </ul>
</div>
<div class="column is-4">
    <p class="title is-5">is-right</p>
    <ul class="block-list is-right">
        <li>Item one</li>
        <li>Item two</li>
        <li>Item three</li>
    </ul>
</div>

<div class="column is-12">
    <p class="title is-4" id="sizes">Sizes</p>
</div>
<div class="column is-4">
    <p class="title is-5">is-small</p>
    <ul class="block-list is-small">
        <li>Item one</li>
        <li>Item two</li>
        <li>Item three</li>
    </ul>
</div>
<div class="column is-4">
    <p class="title is-5">is-normal</p>
    <ul class="block-list is-normal">
        <li>Item one</li>
        <li>Item two</li>
        <li>Item three</li>
    </ul>
</div>
<div class="column is-4">
    <p class="title is-5">is-large</p>
    <ul class="block-list is-large">
        <li>Item one</li>
        <li>Item two</li>
        <li>Item three</li>
    </ul>
</div>

<div class="column is-12">
    <p class="title is-4" id="colours">Colours</p>
</div>
<div class="column is-4">
    <p class="title is-5">is-primary</p>
    <ul class="block-list is-primary">
        <li>Item one</li>
        <li>Item two</li>
        <li>Item three</li>
    </ul>
</div>
<div class="column is-4">
    <p class="title is-5">is-info</p>
    <ul class="block-list is-info">
        <li>Item one</li>
        <li>Item two</li>
        <li>Item three</li>
    </ul>
</div>
<div class="column is-4">
    <p class="title is-5">is-dark</p>
    <ul class="block-list is-dark">
        <li>Item one</li>
        <li>Item two</li>
        <li>Item three</li>
    </ul>
</div>

<div class="column is-12">
    <p class="title is-4" id="outlined">Outlined</p>
</div>
<div class="column is-4">
    <p class="title is-5">is-outlined is-primary</p>
    <ul class="block-list is-outlined is-primary">
        <li>Item one</li>
        <li>Item two</li>
        <li>Item three</li>
    </ul>
</div>
<div class="column is-4">
    <p class="title is-5">is-outlined is-info</p>
    <ul class="block-list is-outlined is-info">
        <li>Item one</li>
        <li>Item two</li>
        <li>Item three</li>
    </ul>
</div>
<div class="column is-4">
    <p class="title is-5">is-outlined is-dark</p>
    <ul class="block-list is-outlined is-dark">
        <li>Item one</li>
        <li>Item two</li>
        <li>Item three</li>
    </ul>
</div>

<div class="column is-12">
    <p class="title is-4" id="has-radius">Has Radius</p>
</div>
<div class="column is-4">
    <p class="title is-5">has-radius is-primary </p>
    <ul class="block-list has-radius is-primary">
        <li>Item one</li>
        <li>Item two</li>
        <li>Item three</li>
    </ul>
</div>
<div class="column is-4">
    <p class="title is-5">has-radius is-info</p>
    <ul class="block-list has-radius is-info">
        <li>Item one</li>
        <li>Item two</li>
        <li>Item three</li>
    </ul>
</div>
<div class="column is-4">
    <p class="title is-5">has-radius is-dark</p>
    <ul class="block-list has-radius is-dark">
        <li>Item one</li>
        <li>Item two</li>
        <li>Item three</li>
    </ul>
</div>

<div class="column is-12">
    <p class="title is-4" id="highlighted">Is Highlighted</p>
    <p>In v0.4 you can highlight the all list items or individual list items</p>
</div>
<div class="column is-4">
    <p class="title is-5">li.is-highlighted</p>
    <ul class="block-list">
        <li>Item one</li>
        <li class="is-highlighted">Item two</li>
        <li>Item three</li>
    </ul>
</div>
<div class="column is-4">
    <p class="title is-5">is-highlighted is-info</p>
    <ul class="block-list is-highlighted is-info">
        <li>Item one</li>
        <li>Item two</li>
        <li>Item three</li>
    </ul>
</div>
<div class="column is-4">
    <p class="title is-5">is-highlighted is-danger has-radius</p>
    <ul class="block-list is-highlighted is-danger has-radius">
        <li>Item one</li>
        <li>Item two</li>
        <li>Item three</li>
    </ul>
</div>

<div class="column is-12">
    <p class="title is-4" id="list-item-overrides">List Item Overrides</p>
    <p>In v0.3 you can override the classes on a list item</p>
</div>
<div class="column is-4">
    <p class="title is-5">li.is-large</p>
    <ul class="block-list">
        <li>Item one</li>
        <li class="is-large">Item two</li>
        <li>Item three</li>
    </ul>
</div>
<div class="column is-4">
    <p class="title is-5">li.is-primary</p>
    <ul class="block-list">
        <li>Item one</li>
        <li class="is-primary">Item two</li>
        <li>Item three</li>
    </ul>
</div>
<div class="column is-4">
    <p class="title is-5">li.is-primary.is-outlined</p>
    <ul class="block-list">
        <li>Item one</li>
        <li class="is-primary is-outlined">Item two</li>
        <li>Item three</li>
    </ul>
</div>

<div class="column is-12">
    <p class="title is-4" id="combinations">Combinations</p>
</div>
<div class="column is-4">
    <p class="title is-5">is-small is-outlined is-success is-centered</p>
    <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>
</div>
<div class="column is-4">
    <p class="title is-5">is-large is-warning is-right has-radius</p>
    <ul class="block-list is-large is-warning is-right has-radius">
        <li>Item one</li>
        <li>Item two</li>
        <li>Item three</li>
    </ul>
</div>
<div class="column is-4">
    <p class="title is-5">ul.is-danger.is-centered</p>
    <p class="subtitle">li.is-highlighted.is-large</p>
    <ul class="block-list is-centered is-danger">
        <li>Item one</li>
        <li class="is-danger is-highlighted is-large">Item two</li>
        <li>Item three</li>
    </ul>
</div>

</div>