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> <<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>> <<span class=“pl-ent”>li</span>>Item one</<span class=“pl-ent”>li</span>> <<span class=“pl-ent”>li</span>>Item two</<span class=“pl-ent”>li</span>> <<span class=“pl-ent”>li</span>>Item three</<span class=“pl-ent”>li</span>> </<span class=“pl-ent”>ul</span>></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>