List
Default List
Use ListGroup attribute in an unordered
list and
ListGroupItem attribute to create a default
list group.
- Send the billing agreement
- Send over all the documentation.
- Meeting with daron to review the intake form
- Check uikings theme and give customer support
Active Item
Use active attribute to
ListGroupItem to indicate the current active
selection.
- Send the billing agreement
- Send over all the documentation.
- Meeting with daron to review the intake form
- Check uikings theme and give customer support
- Start making a presentation
Disabled Items
Use disabled attribute to
ListGroupItem
to make it
appear disabled.
James Ballard
Nancy Martino
Henry Baird- Erica Kernan
List with Link
Use tag="a" to create actionable list group
items with hover, disabled, and active states by adding
list-group-item-action.
- Category Download
- Security Access
- Storage folder
- Push Notification
- Dark Mode
List with Button
Use tag="button" to create actionable list
group items with hover, disabled, and active states by
adding list-group-item-action.
Flush List
Use flush attribute to ListGroup to remove
some borders and rounded corners to render list group
items.
- Send the billing agreement
- Send over all the documentation.
- Meeting with daron to review the intake form
- Check uikings theme and give customer support
- Start making a presentation
Horizontal List
Use horizontal attribute to ListGroup to
change the layout of list group items from vertical to
horizontal across all breakpoints.
- Inbox
- Work
- Shopping
- Inbox
- Work
- Shopping
- Inbox
- Work
- Shopping
Contextual Classes
Use color="Required color" 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
Contextual Classes with Link
Use tag="a" href=null to add link. Note
the addition of the hover styles here not present in
the previous example.
- A simple default list group item
- 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
Colored Lists
Use list-group-fill- with modifier class
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
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 min Ago
They all have something to say beyond the words on the page. They can come across as casual or neutral, exotic or graphic. That's why it's important to think about your message, then choose a font that fits. Cosby sweater eu banh mi, qui irure terry richardson ex squid.
- Pending
Dominic Charlton
12 min Ago
Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin.
- Rejected
Declan Long
12 min Ago
Big July earthquakes confound zany experimental vow. My girl wove six dozen plaid jackets before she quit. Six big devils from Japan quickly forgot how to waltz. try again until it looks right, and each assumenda labore aes Homo nostrud organic, assumenda labore aesthetic magna elements, buttons, everything.
- Successful
Angela Bernier
5 days Ago
Just like in the image where we talked about using multiple fonts, you can see that the background in this graphic design is blurred. Whenever you put text on top of an image, it’s important that your viewers can understand the text, and sometimes that means applying a gaussian readable.
List with Badges
Use badges to any list group item to show unread counts, activity, and more with the help of some utilities.
- Send the billing agreement High
- Send over all the documentation
- Meeting with daron to review the intake form Low
- Check uikings theme and give customer support Medium
- Start making a presentation High
List with Checkboxs
Use Bootstrap’s checkboxes within list group items and customize as needed.
- Declined Payment
- Delivery Error
- Wrong Amount
- Wrong Address
- Wrong UX/UI Solution
List with Radios
Use Bootstrap’s radios within list group items and customize as needed.
- Declined Payment
- Delivery Error
- Wrong Amount
- Wrong Address
- Wrong UX/UI Solution
List with Icon
Use icons to any list group item to show icons to list group items.
- Send the billing agreement
- Send over all the documentation.
- Meeting with daron to review the intake form
- Check uikings theme and give customer support
- Start making a presentation
List with Numbered
Use list-group-numbered class
(optionally use an <ol> element) to
show numbered list group items.
- Send the billing agreement
- Send over all the documentation.
- Meeting with daron to review the intake form
- Check uikings theme and give customer support
- Start making a presentation
Custom Content Lists
Add nearly any HTML within, even for linked list groups like the one below, with the help of flexbox utilities.
Netfilx
2 min Ago-$25.50Spotify
5 days Ago$48.25Emily Slater
8 days Ago$354.90Paypal
1 month Ago-$12.22Harvey Wells
4 month Ago-$459.78