List
Bootstrap 4 List with Material Design UI
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
- First item
- Second item
- Third item
- Nested First item
- Nested Second item
- Forth item
- 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 badge1
-
Single-line item with badge5
-
Single-line item with badge8
-
Single-line item with badge7
-
Single-line item with badge8
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.
-
Single-line item with avatar -
Single-line item with avatar
-
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.
-
List item with avatar and action
-
List item with avatar and action
-
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.
-
Two-line item
Secondary text
-
Two-line item
Secondary text
-
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
-
Jhon Doe
Sales and Sourcing of off price goods, clearances, stock lots based out of Montreal, Quebec
-
Jhon Doe
Sales and Sourcing of off price goods, clearances, stock lots based out of Montreal, Quebec
-
Jhon Doe
Sales and Sourcing of off price goods, clearances, stock lots based out of Montreal, Quebec
Three Line List with Avatar and Action
-
Jhon Doe
Sales and Sourcing of off price goods, clearances based out of Montreal, Quebec.
-
Jhon Doe
Sales and Sourcing of off price goods, clearances based out of Montreal, Quebec.
-
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
successclass. - List group item with
infoclass. - List group item with
warningclass. - List group item with
dangerclass.
Linked List Group with Contextual Classes
Contextual classes also work with .list-group-item-action.
Linked List Group with Heading and Content
Three-Line Item
3 days agoDonec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta.List group item heading
3 days agoDonec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta.List group item heading
3 days agoDonec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta.List with Divider
Use .pmd-list-divider class to add a divider between the list-group items.
-
Recent chats
-
Joanne Wichern
chat
-
Diana Mason
chat
-
Joseph Doe
chat
-
Previous chats
-
Diana Mason
-
Joseph Doe
Nested List
Add a class .pmd-child-list in the sub child list to create a nested list that follows tree structure.
-
-
Account
-
Manage
Sign Out
Settings List
-
When calls and notifications arrive
Always interrupt
-
Priority Interruptions
-
Events and notifications
-
Message
-
Call
-
Hangout Notifications
-
-
-
General
Profile photo
Change your Google+ profile photo
Show your status
Your status is visible to everyone you use with
Hangout Notifications
Inset List
Add .pmd-list-item-inset class to the list items you wish to align as per previous list items.
-
grade
Joanne Wichern
-
Diana Mason
-
Joseph Doe
-
Joanne Wichern
-
Joseph Doe
-
Joanne Wichern
Inset Divider
Add .pmd-inset-divider class to add inset dividers to the list. To remove the inset divider from any particular item, add class .pmd-inset-divider-0 to it.
-
Today
-
Joanne Wichern
In a three-line list, each tile contains a maximum of three lines of text.
-
Diana Mason
In a three-line list, each tile contains a maximum of three lines of text.
-
Joseph Doe
In a three-line list, each tile contains a maximum of three lines of text.
-
Joanne Wichern mentioned you in a comment
36 minutes ago
-
Today is Joanne Wichern's birthday.
-
Joanne Wichern and Diana Mason had birthdays yesterday.
Tue at 8:04 AM
List With Collapse
Folder List
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 |
.pmd-list-divider |
Add this class to include a divider in the list. | Optional |
.pmd-inset-divider |
Add this class to include inset dividers to the list. | Optional |
.pmd-inset-divider-0 |
Add this class to remove the inset divider from the list item. | Optional |
.pmd-list-item-inset |
Add this class to a list item for aligning it as per the previous item. | Optional |
.pmd-child-list |
Add this class to the sub child list for nested list. | Optional |