Basic Listgroup

The most basic list group is an unordered list with list items and the proper classes. Build upon it with the options that follow, or with your own CSS as needed.

  • Home
  • About Us
  • Orders
  • Messages
  • Contact Us

Active Listgroup

Add .active to a .list-group-item to indicate the current active selection.

  • Home
  • About Us
  • Orders
  • Messages
  • Contact Us

Disabled Listgroup

Add .disabled to a .list-group-item to make it appear disabled.

  • Home
  • About Us
  • Orders
  • Messages
  • Contact Us

Listgroup with links and buttons

Use <a>s or <button>s to create actionable list group items with hover, disabled, and active states by adding .list-group-item-action.

Flush Listgroup

Add .list-group-flush to remove some borders and rounded corners to render list group items edge-to-edge in a parent container (e.g., cards).

  • Home
  • About Us
  • Orders
  • Messages
  • Contact Us

Listgroup Horizontal

Add .list-group-horizontal to change the layout of list group items from vertical to horizontal across all breakpoints. Alternatively, choose a responsive variant .list-group-horizontal-{sm|md|lg|xl} to make a list group horizontal starting at that breakpoint’s min-width.

  • Home
  • About Us
  • Contact Us
  • Home
  • About Us
  • Contact Us
  • Home
  • About Us
  • Contact Us

Contextual classes

Use contextual classes to style list items with a stateful background and color.

  • Default
  • Primary
  • Secondary
  • Success
  • Danger
  • Warning
  • Info
  • Light
  • Dark

Contextual classes with Link

Use contextual classes to style list items with a stateful background and color.

Default Primary Secondary Success Danger Warning Info Light Dark

Custom Content

Add nearly any HTML within, even for linked list groups like the one below, with the help of flexbox utilities.

List group item heading
3 days ago

Donec 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 ago

Donec 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 ago

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Donec id elit non mi porta.

With Badges

Add badges to any list group item to show unread counts, activity, and more with the help of some utilities.

  • Unread Emails 14
  • Tasks to do 2
  • Notifications 99+

Please reload the page to view the responsive functionalities

Copyright © 2021 XatoWeb, All rights reserved.

Crafted with extra

Account Setting

Sync Contacts

Auto Update

Recieve Notifications

Mail Setting

Mail Auto Responder

Auto Trash Delete

Custom Signature

Chat Setting

Show Online

Chat Notifications

Set Default