List
Default List
Use list-group class in an unordered list and list-group-item class to create a default list group.
- John Doe
- Jane Smith
- Emily Johnson
- Michael Brown
- Sarah Davis
Active Item List
Use active class to list-group-item to indicate the current active selection.
- Home
- Notifications
- Sent Messages
- New Requests
- Deleted Messages
Disabled Items List
Use disabled class to list-group-item to make it appear disabled.
- A disabled item
- A second item
- A third item
- A fourth item
- And a fifth one
List with Link
Use <a> tag to create actionable list group items with hover, disabled, and active states by adding list-group-item-action.
List with Button
Use <button> tag to create actionable list group items with hover, disabled, and active states by adding list-group-item-action.
Borderless List
Use list-borderless class to list-group-item to remove border and create a normal list.
- An item
- A second item
- A third item
- A fourth item
- And a fifth one
Small Size List
Use list-group-sm class to list-group-item to create a small size list.
- An item
- A second item
- A third item
- A fourth item
- And a fifth one
Flush List
Use list-group-flush class to remove some borders and rounded corners to render list group items.
-
JDJohn Doe
-
JSJane Smith
-
EJEmily Johnson
-
MBMichael Brown
-
SDSarah Davis
List with Numbered
Use list-group-numbered class (optionally use an <ol> element) to show numbered list group items.
- A list item
- A list item
- A list item
- A list item
- A list item
List with Badges
Use badges to any list group item to show unread counts, activity, and more with the help of some utilities.
- Best Rated Headsets of 2022 Sent
- New Model BS 2000 X In Draft
- 2022 Spring Conference by Beats Sent
- Best Headsets Giveaway In Queue
- New Model BS 2000 XI In Draft
List with Checkboxs
Use Bootstrap’s checkboxes within list group items and customize as needed.
List with Radios
Use Bootstrap’s radios within list group items and customize as needed.
Contextual Classes
Use contextual classes to style list items with a stateful background and color.
- Dapibus ac facilisis in
- A simple primary list group item
- A simple secondary list group item
- A simple success list group item
- A simple danger list group item
- A simple warning list group item
- A simple info list group item
- A simple light list group item
- A simple dark list group item
Sub headings
Use contextual classes to style list items with a stateful background and color.
-
154 ViewsElectric Vehicles SurgeTesla Model Y tops sales charts in 2023.
-
200 ViewsmRNA Vaccine AdvancesmRNA tech now targets cancer treatments.
-
450 ViewsClimate Change EffectsExtreme weather and rising sea levels are accelerating.
-
92 ViewsAI Art InnovationsAI tools like DALL-E create stunning visuals.
Horizontal List
Use list-group-horizontal class to change the layout of list group items from vertical to horizontal across all breakpoints.
- Inbox
- Work
- Shopping
- Inbox
- Work
- Shopping
- Inbox
- Work
- Shopping
Custom Content
Add nearly any HTML within, even for linked list groups like the one below, with the help of flexbox utilities.
-
Pending
Charlie Pritchard
12 minutes ago
-
Charlie has just started a new project and is currently collecting feedback from the team. The initial responses have been positive, but some adjustments are still needed before the final review.
-
Pending
Dominic Charlton
15 minutes ago
-
Dominic is finalizing the details of his proposal and needs to address a few client concerns before submission. He’s been working late to ensure everything is perfect.
-
Rejected
Declan Long
1 hour ago
-
Declan's proposal was unfortunately rejected due to missing key details. He’s currently reviewing the feedback to improve and resubmit his proposal for reconsideration.
-
Successful
Angela Bernier
5 days ago
-
Angela’s project has been a resounding success. Her innovative approach and attention to detail impressed the client, leading to a contract extension and positive feedback.