To create a basic list, jus create a ul or a
ol structure with several li elements
nested inside. The result is a simple list, without bullets or
numbers.
Item 1
Item 2
Item 3
Item 4
Item 5
Content list
If you dont want to create a standard bulleted list, just wrap the
list structure we saw previsously with a .contentdiv element. Bullets will then show. Numbers will be
also be shown if it is an ordered list.
You can customize the glyph or bullet being shown at the left of
unordered list items. You can replace it with a font icon. Add the
.icon-bullet-list class to an unordered list to
activate it. Default icon is fa fa-circle-o. It could
be anything else, you just have to make the changes in the related
css snippet.
You can build customized lists with solid lists. However, it doesnt
rely on ul or ol for the structure, but
rather on div. You can have anything you want as a
bullet, including icons and images. Check the code sample for more
details.
<div class="solid-list">
<div class="solid-list-item">
<div class="list-bullet">
<i class="sl sl-icon-check"></i>
</div>
<div class="list-text">
This is a list item text
</div>
</div>
<div class="solid-list-item">
<div class="list-bullet">
<i class="sl sl-icon-check"></i>
</div>
<div class="list-text">
This is another list item text
</div>
</div>
<div class="solid-list-item">
<div class="list-bullet">
<i class="sl sl-icon-check"></i>
</div>
<div class="list-text">
This is a third list item text
</div>
</div>
</div>
Inline list
You can make a list display horizontally. Just add the
.inline-list class to the ul element. List
separators are made of font awesome icons. You are free to change
them with an appropriate element.
<div class="inline-list">
<div>Item 1</div>
<i class="inline-bullet fa fa-circle"></i>
<div>Item 2</div>
<i class="inline-bullet fa fa-circle"></i>
<div>Item 3</div>
<i class="inline-bullet fa fa-circle"></i>
<div>Item 4</div>
<i class="inline-bullet fa fa-circle"></i>
<div>Item 5</div>
</div>
List block minimal
List blocks are very handy and act as interactive lists, such as
menus or options. They can also have badges appended to list items.
Here is the structure of a minimal list block. Active list items are
by default highlighted with the $primary color.
<ul class="list-block minimal">
<li class="is-active"><a>This is a list block item</a> <span class="b-badge is-primary">9</span></li>
<li><a>It is very handy for menus</a></li>
<li><a>Use it as a sticky element</a></li>
<li><a>It's cool</a> <span class="b-badge is-primary">5</span></li>
<li><a>Support team is great</a></li>
</ul>
List block
A list block can appear like a small panel with a light shadow. This
is the list block default behaviour.
<ul class="list-block">
<li class="is-active"><a>This is a list block item</a> <span class="b-badge rounded is-primary">9</span></li>
<li><a>It is very handy for menus</a></li>
<li><a>Use it as a sticky element</a></li>
<li><a>It's cool</a> <span class="b-badge rounded is-primary">5</span></li>
<li><a>Support team is great</a></li>
</ul>
List block with icons
You can add icons to a list block element items. Insert the icon
before the item's text. It can be from any icon family.
<ul class="list-block">
<li class="is-active"><a><i class="sl sl-icon-star mr-20"></i> This is a list block item</a></li>
<li><a><i class="sl sl-icon-trophy mr-20"></i> It is very handy for menus</a></li>
<li><a><i class="sl sl-icon-cup mr-20"></i> Use it as a sticky element</a></li>
<li><a><i class="sl sl-icon-badge mr-20"></i> It's cool</a></li>
<li><a><i class="sl sl-icon-support mr-20"></i> Support team is great</a></li>
</ul>
List block bordered
Add the .bordered class to a list block to make its
items bordered.
<ul class="list-block bordered">
<li class="is-active"><a>This is a list block item</a></li>
<li><a>It is very handy for menus</a></li>
<li><a>Use it as a sticky element</a></li>
<li><a>It's cool</a></li>
<li><a>Support team is great</a></li>
</ul>
Active item colors
You can change the background color of active items. In order to do
this, add the .is-secondary or the
.is -accent class to the ul element. The
list block active background color defaults to
$primary.
Level is a versatile component brought by Bulma. It basically
imitates the behaviour of an inline list. However, you can insert
almost any element inside a level. The default level has two parts :
.level-left and .level-right. Each one of
these parts contains level items. By default, level items are
displayed vertically on mobile. Check the code sample for more
details about level structure.
Level items can be centered. To achieve this, remove
.level-left and .level-right wrappers. All
level items must be direct children of the
.level element.
The level's inline layout can be kept on mobile, instead of the
stacking behaviour. Simply add the modifier
.is-mobile to the .level element. Reduce
your screen size to see it in action.
