Bulma list

A very simple list component extension for Bulma

Examples #

See the Pen bulma-list examples by Matt Fannin (@bluefantail) on CodePen.

View on codepen

Basic usage #

Lists can can be kept very simple with only text content:

Example

List item
List item
List item
List item description

HTML 

<div class="list">
  <div class="list-item">
    <div class="list-item-title">List item</div>
  </div>

  <div class="list-item">
    <div class="list-item-title">List item</div>
  </div>

  <div class="list-item">
    <div class="list-item-content">
      <div class="list-item-title">List item</div>
      <div class="list-item-description">List item description</div>
    </div>
  </div>
</div>

List item with image #

The list-item can have an image inside the list-item-image container

Example

List item
List item description
List item
List item description
List item
List item description

HTML 

<div class="list">
  <div class="list-item">
    <div class="list-item-image">
      <figure class="image is-64x64">
        <img class="is-rounded" src="https://via.placeholder.com/128x128.png?text=Image">
      </figure>
    </div>

    <div class="list-item-content">
      <div class="list-item-title">List item</div>
      <div class="list-item-description">List item description</div>
    </div>
  </div>

  <div class="list-item">
    <div class="list-item-image">
      <figure class="image is-64x64">
        <img class="is-rounded" src="https://via.placeholder.com/128x128.png?text=Image">
      </figure>
    </div>

    <div class="list-item-content">
      <div class="list-item-title">List item</div>
      <div class="list-item-description">List item description</div>
    </div>
  </div>

  <div class="list-item">
    <div class="list-item-image">
      <figure class="image is-64x64">
        <img class="is-rounded" src="https://via.placeholder.com/128x128.png?text=Image">
      </figure>
    </div>

    <div class="list-item-content">
      <div class="list-item-title">List item</div>
      <div class="list-item-description">List item description</div>
    </div>
  </div>
</div>

List item with controls #

List item's can also have optional UI controls inside the list-item-controls container.

By default, list item controls will only show when hovered on devices with pointers, but will always be visible on touch devices.

Controls remain in focus using when any of the list item's children are in focus meaning dropdowns can also be used inside list items.

Example

List item
List item description
List item
List item description
List item
List item description

HTML 

<div class="list">
  <div class="list-item">
    <div class="list-item-image">
      <figure class="image is-64x64">
        <img class="is-rounded" src="https://via.placeholder.com/128x128.png?text=Image">
      </figure>
    </div>

    <div class="list-item-content">
      <div class="list-item-title">List item</div>
      <div class="list-item-description">List item description</div>
    </div>

    <div class="list-item-controls">
      <div class="buttons is-right">
        <button class="button">
          <span class="icon is-small">
            <i class="fas fa-edit"></i>
          </span>
          <span>Edit</span>
        </button>

        <button class="button">
          <span class="icon is-small">
            <i class="fas fa-ellipsis-h"></i>
          </span>
        </button>
      </div>
    </div>
  </div>

  <div class="list-item">
    <div class="list-item-image">
      <figure class="image is-64x64">
        <img class="is-rounded" src="https://via.placeholder.com/128x128.png?text=Image">
      </figure>
    </div>

    <div class="list-item-content">
      <div class="list-item-title">List item</div>
      <div class="list-item-description">List item description</div>
    </div>

    <div class="list-item-controls">
      <div class="buttons is-right">
        <button class="button">
          <span class="icon is-small">
            <i class="fas fa-edit"></i>
          </span>
          <span>Edit</span>
        </button>

        <button class="button">
          <span class="icon is-small">
            <i class="fas fa-ellipsis-h"></i>
          </span>
        </button>
      </div>
    </div>
  </div>

  <div class="list-item">
    <div class="list-item-image">
      <figure class="image is-64x64">
        <img class="is-rounded" src="https://via.placeholder.com/128x128.png?text=Image">
      </figure>
    </div>

    <div class="list-item-content">
      <div class="list-item-title">List item</div>
      <div class="list-item-description">List item description</div>
    </div>

    <div class="list-item-controls">
      <div class="buttons is-right">
        <button class="button">
          <span class="icon is-small">
            <i class="fas fa-edit"></i>
          </span>
          <span>Edit</span>
        </button>

        <button class="button">
          <span class="icon is-small">
            <i class="fas fa-ellipsis-h"></i>
          </span>
        </button>
      </div>
    </div>
  </div>
</div>

Modifiers #

If you want a list item's controls to be visible all the time, the has-visible-pointer-controls modifier can be used.

Example

List item
List item description
List item
List item description
List item
List item description

HTML 

<div class="list has-visible-pointer-controls">
  <div class="list-item">
    <div class="list-item-image">
      <figure class="image is-64x64">
        <img class="is-rounded" src="https://via.placeholder.com/128x128.png?text=Image">
      </figure>
    </div>

    <div class="list-item-content">
      <div class="list-item-title">List item</div>
      <div class="list-item-description">List item description</div>
    </div>

    <div class="list-item-controls">
      <div class="buttons is-right">
        <button class="button">
          <span class="icon is-small">
            <i class="fas fa-edit"></i>
          </span>
          <span>Edit</span>
        </button>

        <button class="button">
          <span class="icon is-small">
            <i class="fas fa-ellipsis-h"></i>
          </span>
        </button>
      </div>
    </div>
  </div>

  <div class="list-item">
    <div class="list-item-image">
      <figure class="image is-64x64">
        <img class="is-rounded" src="https://via.placeholder.com/128x128.png?text=Image">
      </figure>
    </div>

    <div class="list-item-content">
      <div class="list-item-title">List item</div>
      <div class="list-item-description">List item description</div>
    </div>

    <div class="list-item-controls">
      <div class="buttons is-right">
        <button class="button">
          <span class="icon is-small">
            <i class="fas fa-edit"></i>
          </span>
          <span>Edit</span>
        </button>

        <button class="button">
          <span class="icon is-small">
            <i class="fas fa-ellipsis-h"></i>
          </span>
        </button>
      </div>
    </div>
  </div>

  <div class="list-item">
    <div class="list-item-image">
      <figure class="image is-64x64">
        <img class="is-rounded" src="https://via.placeholder.com/128x128.png?text=Image">
      </figure>
    </div>

    <div class="list-item-content">
      <div class="list-item-title">List item</div>
      <div class="list-item-description">List item description</div>
    </div>

    <div class="list-item-controls">
      <div class="buttons is-right">
        <button class="button">
          <span class="icon is-small">
            <i class="fas fa-edit"></i>
          </span>
          <span>Edit</span>
        </button>

        <button class="button">
          <span class="icon is-small">
            <i class="fas fa-ellipsis-h"></i>
          </span>
        </button>
      </div>
    </div>
  </div>
</div>

To add a hover effect on each list item use the has-hoverable-list-items modifier.

Example

List item
List item description
List item
List item description
List item
List item description

HTML 

<div class="list has-hoverable-list-items">
  <div class="list-item">
    <div class="list-item-image">
      <figure class="image is-64x64">
        <img class="is-rounded" src="https://via.placeholder.com/128x128.png?text=Image">
      </figure>
    </div>

    <div class="list-item-content">
      <div class="list-item-title">List item</div>
      <div class="list-item-description">List item description</div>
    </div>
  </div>

  <div class="list-item">
    <div class="list-item-image">
      <figure class="image is-64x64">
        <img class="is-rounded" src="https://via.placeholder.com/128x128.png?text=Image">
      </figure>
    </div>

    <div class="list-item-content">
      <div class="list-item-title">List item</div>
      <div class="list-item-description">List item description</div>
    </div>
  </div>

  <div class="list-item">
    <div class="list-item-image">
      <figure class="image is-64x64">
        <img class="is-rounded" src="https://via.placeholder.com/128x128.png?text=Image">
      </figure>
    </div>

    <div class="list-item-content">
      <div class="list-item-title">List item</div>
      <div class="list-item-description">List item description</div>
    </div>
  </div>
</div>

To stop text from wrapping and add an ellipsis overflow effect use has-overflow-ellipsis.

Example

List item
A very long description can have an ellipsis overflow if you want the text to remain all on a single line without wrapping
List item
A very long description can have an ellipsis overflow if you want the text to remain all on a single line without wrapping
Very long titles will also have overflow hidden if they are wider than the container
A very long description can have an ellipsis overflow if you want the text to remain all on a single line without wrapping

HTML 

<div class="list has-overflow-ellipsis">
  <div class="list-item">
    <div class="list-item-image">
      <figure class="image is-64x64">
        <img class="is-rounded" src="https://via.placeholder.com/128x128.png?text=Image">
      </figure>
    </div>

    <div class="list-item-content">
      <div class="list-item-title">List item</div>
      <div class="list-item-description">A very long description can have an ellipsis overflow if you want the text to remain all on a single line without wrapping</div>
    </div>
  </div>

  <div class="list-item">
    <div class="list-item-image">
      <figure class="image is-64x64">
        <img class="is-rounded" src="https://via.placeholder.com/128x128.png?text=Image">
      </figure>
    </div>

    <div class="list-item-content">
      <div class="list-item-title">List item</div>
      <div class="list-item-description">A very long description can have an ellipsis overflow if you want the text to remain all on a single line without wrapping</div>
    </div>
  </div>

  <div class="list-item">
    <div class="list-item-image">
      <figure class="image is-64x64">
        <img class="is-rounded" src="https://via.placeholder.com/128x128.png?text=Image">
      </figure>
    </div>

    <div class="list-item-content">
      <div class="list-item-title">Very long titles will also have overflow hidden if they are wider than the container</div>
      <div class="list-item-description">A very long description can have an ellipsis overflow if you want the text to remain all on a single line without wrapping</div>
    </div>
  </div>
</div>

Sometimes you might want to control the truncation length. For that a custom property can be set on the element using an inline style tag style="--length: 25". The length uses the ch unit resulting in a width roughly equivalent to the value in characters.

Example

List item
A very long description can have an ellipsis overflow if you want the text to remain all on a single line without wrapping
List item
A very long description can have an ellipsis overflow if you want the text to remain all on a single line without wrapping
Very long titles will also have overflow hidden if they are wider than the container
A very long description can have an ellipsis overflow if you want the text to remain all on a single line without wrapping

HTML 

<div class="list has-overflow-ellipsis" style="--length: 25">
  <div class="list-item">
    <div class="list-item-image">
      <figure class="image is-64x64">
        <img class="is-rounded" src="https://via.placeholder.com/128x128.png?text=Image">
      </figure>
    </div>

    <div class="list-item-content">
      <div class="list-item-title">List item</div>
      <div class="list-item-description">A very long description can have an ellipsis overflow if you want the text to remain all on a single line without wrapping</div>
    </div>
  </div>

  <div class="list-item">
    <div class="list-item-image">
      <figure class="image is-64x64">
        <img class="is-rounded" src="https://via.placeholder.com/128x128.png?text=Image">
      </figure>
    </div>

    <div class="list-item-content">
      <div class="list-item-title">List item</div>
      <div class="list-item-description">A very long description can have an ellipsis overflow if you want the text to remain all on a single line without wrapping</div>
    </div>
  </div>

  <div class="list-item">
    <div class="list-item-image">
      <figure class="image is-64x64">
        <img class="is-rounded" src="https://via.placeholder.com/128x128.png?text=Image">
      </figure>
    </div>

    <div class="list-item-content">
      <div class="list-item-title">Very long titles will also have overflow hidden if they are wider than the container</div>
      <div class="list-item-description">A very long description can have an ellipsis overflow if you want the text to remain all on a single line without wrapping</div>
    </div>
  </div>
</div>

Sometimes you might want to have images hidden by default when the page first loads for using with list display type toggles. You can use has-hidden-images for this.

Example

List item
List item description
List item
List item description
List item
List item description

HTML 

<div class="list has-hidden-images">
  <div class="list-item">
    <div class="list-item-image">
      <figure class="image is-64x64">
        <img class="is-rounded" src="https://via.placeholder.com/128x128.png?text=Image">
      </figure>
    </div>

    <div class="list-item-content">
      <div class="list-item-title">List item</div>
      <div class="list-item-description">List item description</div>
    </div>
  </div>

  <div class="list-item">
    <div class="list-item-image">
      <figure class="image is-64x64">
        <img class="is-rounded" src="https://via.placeholder.com/128x128.png?text=Image">
      </figure>
    </div>

    <div class="list-item-content">
      <div class="list-item-title">List item</div>
      <div class="list-item-description">List item description</div>
    </div>
  </div>

  <div class="list-item">
    <div class="list-item-image">
      <figure class="image is-64x64">
        <img class="is-rounded" src="https://via.placeholder.com/128x128.png?text=Image">
      </figure>
    </div>

    <div class="list-item-content">
      <div class="list-item-title">List item</div>
      <div class="list-item-description">List item description</div>
    </div>
  </div>
</div>

Combinations #

list-item can be used with box for a box-style list.

Example

List item
List item description
List item
List item description
List item
List item description

HTML 

<div class="list">
  <div class="list-item box">
    <div class="list-item-image">
      <figure class="image is-64x64">
        <img class="is-rounded" src="https://via.placeholder.com/128x128.png?text=Image">
      </figure>
    </div>

    <div class="list-item-content">
      <div class="list-item-title">List item</div>
      <div class="list-item-description">List item description</div>
    </div>
  </div>

  <div class="list-item box">
    <div class="list-item-image">
      <figure class="image is-64x64">
        <img class="is-rounded" src="https://via.placeholder.com/128x128.png?text=Image">
      </figure>
    </div>

    <div class="list-item-content">
      <div class="list-item-title">List item</div>
      <div class="list-item-description">List item description</div>
    </div>
  </div>

  <div class="list-item box">
    <div class="list-item-image">
      <figure class="image is-64x64">
        <img class="is-rounded" src="https://via.placeholder.com/128x128.png?text=Image">
      </figure>
    </div>

    <div class="list-item-content">
      <div class="list-item-title">List item</div>
      <div class="list-item-description">List item description</div>
    </div>
  </div>
</div>

Variables #

Name
Type
Value
Computed Value
Computed Type 
$list-color
variable
$text
hsl(0, 0%, 29%)
color
$list-item-description-color
variable
$text-light
hsl(0, 0%, 48%)
color
$list-item-divider-color
variable
$border
hsl(0, 0%, 86%)
color
$list-item-hover-color
variable
$scheme-main-bis
hsl(0, 0%, 98%)
color
$list-item-image-margin
size
0.75em
$list-item-padding
size
0.75em
$list-item-title-color
variable
$text-strong
hsl(0, 0%, 21%)
color
$list-item-title-weight
variable
$weight-semibold
500
font-weight

This page is built using a copy of Bulma's own documentation template. Noticed a typo? Or something unclear?
Improve this page on GitHub