List

List is a flexible and powerful component for displaying not only simple lists of elements, but complex ones with custom content.

Bootstrap 4 List

Three different types of lists are defined in Bootstrap 4: Unordered List, Ordered List, and Unstyled List.

  • First item
  • Second item
  • Third item
    • Nested First item
    • Nested Second item
  • Forth item
  • Fifth item
  1. First item
  2. Second item
  3. Third item
    1. Nested First item
    2. Nested Second item
  4. Forth item
  5. Fifth item
  • First item
  • Second item
    • Nested First item
    • Nested Second item
  • Third item
  • forth item
  • Fifth item

                            

Single-line List

In a single-line list, each tile contains a single line of text. The amount of text can vary between tiles within the same list.

Add .pmd-list and .pmd-card-list followed by .list-group for the formatting of your list according to Material Design Standards.

  • Single-line item
  • Single-line item
  • Single-line item
  • Single-line item
  • Single-line item

                        

Single-line List With Badge

Add badges to a list to display count of notifications, unread messages, no of appointments etc.

  • Single-line item with badge
    1
  • Single-line item with badge
    5
  • Single-line item with badge
    8
  • Single-line item with badge
    7
  • Single-line item with badge
    8

                        

Single-line List with Icon

Add .pmd-list-icon to the icons to align them properly with the list items. It can majorly be used in the menus, dropdowns etc.

  • mood Single-line item with icon
  • notifications
    Single-line item with icon
  • person_add
    Single-line item with icon
  • share
    Single-line item with icon
  • drive_eta
    Single-line item with icon

                        

Single-line List with Avatar

Add .pmd-list-avatar to the avatar image to for aligning it properly with the list items. This list is used mainly to display list of users, contacts, followers etc.

  • 40x40
    Single-line item with avatar
  • 40x40
    Single-line item with avatar
  • 40x40
    Single-line item with avatar

                        

Single-line List with Avatar and Action

This list is mainly used when you want to select some users from the list of followers, users, contacts etc to perfrom an action.

  • 40x40
    List item with avatar and action
  • 40x40
    List item with avatar and action
  • 40x40
    List item with avatar and action

                        

Two Line List

In a two-line list, each tile contains a maximum of two lines of text. The amount of text can vary between tiles within the same list.

Use class .pmd-list-title and .pmd-list-subtitle for heading and secondary text respectively.

  • Two-line item

    Secondary text

  • Two-line item

    Secondary text

  • Two-line item

    Secondary text


                        

Two Line List with Icon

This type of list can be used to showcase menus of functions or menu list on dashboard etc.

  • mood

    Two-line item

    Secondary text

  • notifications

    Two-line item

    Secondary text

  • share

    Two-line item

    Secondary text


                        

Avatar with Secondary Text

Avatar with Secondary text can be used in cases where you want to display some more information about the item or person like designation of person, category of the item, no of common friends, rating of an item etc.

  • 40x40

    Two-line item

    Secondary text

  • 40x40

    Two-line item

    Secondary text

  • 40x40

    Two-line item

    Secondary text


                        

Three Line List

If the secondary text is of two lines, it will appear like this.

  • Jhon Doe

    Sales and Sourcing of off price goods, clearances, stock lots and opportunity buys based out of Montreal, Quebec

  • Jhon Doe

    Sales and Sourcing of off price goods, clearances, stock lots and opportunity buys based out of Montreal, Quebec

  • Jhon Doe

    Sales and Sourcing of off price goods, clearances, stock lots and opportunity buys based out of Montreal, Quebec


                        

Three Line List with Icon

  • business

    ABC Company

    2852 Canis Heights Drive, Los Angeles
    California

  • business

    ABC Company

    2852 Canis Heights Drive, Los Angeles
    California

  • business

    ABC Company

    2852 Canis Heights Drive, Los Angeles
    California


                        

Three Line List with Avatar

  • 40x40

    Jhon Doe

    Sales and Sourcing of off price goods, clearances, stock lots based out of Montreal, Quebec

  • 40x40

    Jhon Doe

    Sales and Sourcing of off price goods, clearances, stock lots based out of Montreal, Quebec

  • 40x40

    Jhon Doe

    Sales and Sourcing of off price goods, clearances, stock lots based out of Montreal, Quebec


                        

Three Line List with Avatar and Action

  • 40x40

    Jhon Doe

    Sales and Sourcing of off price goods, clearances based out of Montreal, Quebec.

  • 40x40

    Jhon Doe

    Sales and Sourcing of off price goods, clearances based out of Montreal, Quebec.

  • 40x40

    Jhon Doe

    Sales and Sourcing of off price goods, clearances based out of Montreal, Quebec.


                        

Linked List

Make list group items clickable by using anchor tags instead of list items (that also means a parent <div> instead of an <ul>). No need for individual parents around each element.


                        

Disabled List

Add .disabled to a .list-group-item to gray it out to appear disabled.


                        

Flush List

Add .list-group-flush to remove the borders and rounded corners of the list-group.

  • List Item
  • List Item
  • List Item
  • List Item
  • List Item

                        

List Group with Contextual classes

Use contextual classes to style default list items using class .list-group-item-* classes.

  • List group item with success class.
  • List group item with info class.
  • List group item with warning class.
  • List group item with danger class.

                        

Linked List Group with Contextual Classes

Contextual classes also work with .list-group-item-action.


                        

Linked List Group with Heading and Content


                        

Configuration Options

The Propeller CSS classes apply various predefined visual enhancements to the Lists. The table lists the available classes and their effects.

Propeller Classes Effect Remark
.pmd-list Add this class for all the list items. Required
.pmd-card-list Class to be added to the list for formatting purpose. Required
.pmd-list-icon Add this class to the icon tag when your list contains icons. Optional
.pmd-list-title Add this class to the heading of the two-line and three-line list item. Optional
.pmd-list-subtitle Add this class to the secondary text of the two-line and three-line list item. Optional
.pmd-list-avatar Add this class when your single line list contains profile pic. Optional
.pmd-avatar-list-img Add this class to the profile pic in the list. Optional