Lists

Available lists variations.

Get Started

1

Common lists

Basic list

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 .content div element. Bullets will then show. Numbers will be also be shown if it is an ordered list.

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
SHOW CODE

<div class="content">
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
    </ul>
</div> 
                                        

Icon bullet

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.

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
SHOW CODE

<ul class="icon-bullet-list">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
</ul>
                                        

Solid list

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.

This is a list item text
This is another list item text
This is a third list item text
SHOW CODE

<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.

Item 1
Item 2
Item 3
Item 4
Item 5
SHOW CODE

<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.

SHOW CODE

<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.

SHOW CODE

<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.

SHOW CODE

<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.

SHOW CODE

<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.

2

Levels

Basic level

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.

SHOW CODE

<nav class="level">
    <!-- Left side -->
    <div class="level-left">
        <div class="level-item">
            <p class="subtitle is-5">
                <strong>123</strong> tasks
            </p>
        </div>
        <div class="level-item">
            <div class="field has-addons">
                <p class="control no-margin-bottom">
                    <input class="input" type="text" placeholder="Find a task">
                </p>
                <p class="control">
                    <button class="button btn-align accent-btn raised">
                        Search
                    </button>
                </p>
            </div>
        </div>
    </div>

    <!-- Right side -->
    <div class="level-right">
        <p class="level-item"><i class="sl sl-icon-grid is-icon-md"></i></p>
        <p class="level-item"><i class="sl sl-icon-user is-icon-md"></i></p>
        <p class="level-item"><i class="sl sl-icon-picture is-icon-md"></i></p>
        <p class="level-item"><i class="sl sl-icon-check is-icon-md"></i></p>
        <p class="level-item"><a class="button btn-align accent-btn raised">New task</a></p>
    </div>
</nav>
                                        

Navigation level

A level can easily be turned into a navigation bar. Add the class .nav-level to the .level element.

SHOW CODE

<nav class="level nav-level">
    <!-- Left side -->
    <div class="level-left">
        <div class="level-item">
            <p class="subtitle is-5">
                <strong>123</strong> tasks
            </p>
        </div>
        <div class="level-item">
            <div class="field has-addons">
                <p class="control no-margin-bottom">
                    <input class="input" type="text" placeholder="Find a task">
                </p>
                <p class="control">
                    <button class="button btn-align accent-btn raised">
                        Search
                    </button>
                </p>
            </div>
        </div>
    </div>

    <!-- Right side -->
    <div class="level-right">
        <p class="level-item"><i class="sl sl-icon-grid is-icon-md"></i></p>
        <p class="level-item"><i class="sl sl-icon-user is-icon-md"></i></p>
        <p class="level-item"><i class="sl sl-icon-picture is-icon-md"></i></p>
        <p class="level-item"><i class="sl sl-icon-check is-icon-md"></i></p>
        <p class="level-item"><a class="button btn-align accent-btn raised">New task</a></p>
    </div>
</nav>
                                        

Centered level

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.

SHOW CODE

<nav class="level centered-level">
    <p class="level-item has-text-centered">
        <a class="link is-info">Projects</a>
    </p>
    <p class="level-item has-text-centered">
        <a class="link is-info">Tasks</a>
    </p>
    <p class="level-item has-text-centered">
        <img src="assets/images/logos/logo-grayscale.png" alt="">
    </p>
    <p class="level-item has-text-centered">
        <a class="link is-info">Team</a>
    </p>
    <p class="level-item has-text-centered">
        <a class="link is-info">Documents</a>
    </p>
</nav>
                                        

Mobile level

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.

SHOW CODE

<nav class="level is-mobile">
    <p class="level-item has-text-centered">
        <a class="link is-info"><i class="fa fa-facebook fa-2x"></i></a>
    </p>
    <p class="level-item has-text-centered">
        <a class="link is-info"><i class="fa fa-twitter fa-2x"></i></a>
    </p>
    <p class="level-item has-text-centered">
        <a class="link is-info"><i class="fa fa-linkedin fa-2x"></i></a>
    </p>
    <p class="level-item has-text-centered">
        <a class="link is-info"><i class="fa fa-dribbble fa-2x"></i></a>
    </p>
    <p class="level-item has-text-centered">
        <a class="link is-info"><i class="fa fa-github fa-2x"></i></a>
    </p>
</nav>
                                        
3

special lists

User list

You can use lists to display other types of content. This is a user availability list for example.

  • Terry Daniels
    CEO
  • Marjory Cambell
    CFO
  • Kevin Smith
    Software Engineer
  • Melany Wright
    Sales Manager
SHOW CODE

<ul class="user-list">
    <li>
        <div class="user-list-avatar">
            <img src="assets/images/avatars/terry.jpg" alt="">
        </div>
        <div class="user-list-info">
            <div class="name">Terry Daniels</div>
            <div class="position">CEO</div>
        </div>
        <div class="user-list-status is-online"></div>
    </li>
    <li>
        <div class="user-list-avatar">
            <img src="assets/images/avatars/carolin.png" alt="">
        </div>
        <div class="user-list-info">
            <div class="name">Marjory Cambell</div>
            <div class="position">CFO</div>
        </div>
        <div class="user-list-status is-busy"></div>
    </li>
    <li>
        <div class="user-list-avatar">
            <img src="assets/images/avatars/ben.jpg" alt="">
        </div>
        <div class="user-list-info">
            <div class="name">Kevin Smith</div>
            <div class="position">Software Engineer</div>
        </div>
        <div class="user-list-status is-offline"></div>
    </li>
    <li>
        <div class="user-list-avatar">
            <img src="assets/images/avatars/melany.jpg" alt="">
        </div>
        <div class="user-list-info">
            <div class="name">Melany Wright</div>
            <div class="position">Sales Manager</div>
        </div>
        <div class="user-list-status is-online"></div>
    </li>
</ul>
                                        

Media list

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.

SHOW CODE

<ul class="user-media-list">
    <li>
        <article class="media">
            <figure class="media-left">
                <p class="image is-48x48">
                    <img class="img-circle" src="assets/images/avatars/terry.jpg">
                    <span class="avatar-status is-online"></span>
                </p>
            </figure>
            <div class="media-content">
                <div class="content">
                    <p>
                        <span>Terry Daniels</span>
                        <br>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                    </p>
                </div>
            </div>
        </article>
    </li>
    <li>
        <article class="media">
            <figure class="media-left">
                <p class="image is-48x48">
                    <img class="img-circle" src="assets/images/avatars/carolin.png">
                    <span class="avatar-status is-busy"></span>
                </p>
            </figure>
            <div class="media-content">
                <div class="content">
                    <p>
                        <span>Marjory Cambell</span>
                        <br>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sinum garet et setus.
                    </p>
                </div>
            </div>
        </article>
    </li>
    <li>
        <article class="media">
            <figure class="media-left">
                <p class="image is-48x48">
                    <img class="img-circle" src="assets/images/avatars/ben.jpg">
                    <span class="avatar-status is-offline"></span>
                </p>
            </figure>
            <div class="media-content">
                <div class="content">
                    <p>
                        <span>Kevin Smith</span>
                        <br>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                    </p>
                </div>
            </div>
        </article>
    </li>
    <li>
        <article class="media">
            <figure class="media-left">
                <p class="image is-48x48">
                    <img class="img-circle" src="assets/images/avatars/melany.jpg">
                    <span class="avatar-status is-online"></span>
                </p>
            </figure>
            <div class="media-content">
                <div class="content">
                    <p>
                        <span>Melany Wright</span>
                        <br>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                    </p>
                </div>
            </div>
        </article>
    </li>
</ul>