Lists

Examples of special listings for displaying your data.

loading... $24 Purchase
List group

List groups are a flexible and powerful component for displaying not only simple lists of elements, but complex ones with custom content.

Basic Example

The most basic list group is simply an unordered list with list items.

  • List group item 1
  • Active list group item
  • List group item 2
  • Button with badge 69
  • List group item 3
  • Disabled item
Linked Example

Linkify list group items by using anchor tags instead of list items.

List group item 1 Active list group item List group item 2 Button with badge 69 List group item 3 Disabled item
Buttons Example

List group items may be buttons instead of list items.

No Border Example

Add class .list-group-noborder to list group to get unbordered style.

List group item 1 Active list group item List group item 3 List group item 4 List group item 5
Condensed Mode

Add class .list-group-condensed to list group to get condensed style.

List group item 1 Active list group item List group item 3 List group item 4 List group item 5
List Group Title

Add class .list-group-title to get list title.

Awesome title
List group item 1 List group item 2
Awesome title
List group item 3 List group item 4
Icons

Its possible to use icons inslide.

List group item 1
List group item 2
List group item 3
List group item 4
List group item 5
Inline Example

Add class .list-group-inline to list group to get inline style.

Item 1
Item 2
Item 3
Item 4
Adapt Classes

Use classes .list-group-adapt-top,.list-group-adapt-side,.list-group-adapt-bottom to adapt list in container.

Item 1
Item 2
Item 3
Item 1
Item 2
Item 3
Item 1
Item 2
Item 3
Default Inside Block

Its easy to use list group inside block.

List group item 1 List group item 2 List group item 3
Inline Inside Block

It's also possible to use all features.

Item 1
Item 2
Item 3

Default Inside Panel

List group item 1 List group item 2 List group item 3

Inline Inside Panel

Item 1
Item 2
Item 3
Navigation Example

Use .list-group-condensed to create navigation list.

main category 1-3
Navigation item 1 Navigation item 2 Navigation item 3
Another category 4-5
Navigation item 4 Navigation item 5

Notifications

7 new, latest: July 19, 2016 at 10:14:32.

Product Delivered delivered

#SPW-955-18 to st. StreetName SA, USA.

19/07/2016 10:14:32 AM

Successful Payment success

Payment for order #SPW-955-17: $145.44.

19/07/2016 09:55:12 AM

New Order #SPW-955-17 waiting

Added new order, waiting for payment. Order details.

19/07/2016 09:51:55 AM

Money Back Request return

#SPW-955-17 return requested. Request details.

19/07/2016 08:44:51 AM

The critical amount of product important

Product: Extra Awesome Product (amount: 2). Storehouse.

19/07/2016 08:30:00 AM

Product Delivery Start delivering

#SPW-955-18 to st. StreetName SA, USA.

18/07/2016 06:14:32 PM

Critical Server Load server

Disk space: 248.1Gb/250Gb. Control panel.

18/07/2016 06:14:32 PM

Settings

Notification Settings