- Item 1
- Item 2
- Item 3
- Item 4
- Item 5
mass media
All-in-one Marketing app
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.
If you dont want to create a standard bulleted list, just wrap the
list structure we saw previsously with a .content
div 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.
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.
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.
A list block can appear like a small panel with a light shadow. This is the list block default behaviour.
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.
Add the .bordered class to a list block to make its
items bordered.
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.
A level can easily be turned into a navigation bar. Add the class
.nav-level to the .level element.
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.
You can use lists to display other types of content. This is a user availability list for example.
This is another example of a user list. It is based on the Bulma media object element.
Terry Daniels
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Marjory Cambell
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sinum garet et setus.
Kevin Smith
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Melany Wright
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
