Default List

Use list-group class in an unordered list and list-group-item class 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 class to list-group-item 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 class to list-group-item to make it appear disabled.

  • James Ballard
  • Nancy Martino
  • Henry Baird
  • Erica Kernan

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.

Flush List

Use list-group-flush class 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 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

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

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.

List with Radios

Use Bootstrap’s radios within list group items and customize as needed.

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.

  1. Send the billing agreement
  2. Send over all the documentation.
  3. Meeting with daron to review the intake form
  4. Check uikings theme and give customer support
  5. 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.50
  • Spotify
    5 days Ago
    $48.25
  • Emily Slater
    8 days Ago
    $354.90
  • Paypal
    1 month Ago
    -$12.22
  • Harvey Wells
    4 month Ago
    -$459.78
© Dosix.
Design & Develop by Themesbrand