Display, Style, and Animate your lists with the list-group classes.

List group
  • Give the class list-group-item to each list object, and wrap them inside an element with the class list-group.
Styling
  • Add class item-border to the .list-group element, if you want a border underneath each list item.
  • By default the .list-group element has a box shadow And a white background color. Add class no-border to remove the boxshadow, and class transparent to remove the background color it.
Animate
  • Add class list-group-animation to the .list-group element to animate each list-group item by fading in upwards on scrolling.
    Scroll down this page to see the effect.
Functions
  • Add functionality to a list like search, sort or filter.
  • For list functions examples click here.
Item with icon
Add class item-icon to the list-group item.
When using multiple lines also add class item-lines to the list-group-item for proper positioning of the icon.

You can size the icons by using the classes:
  • small
  • medium
  • large

In this example the class item-icon is added to the divider to indent it.

  • Shauna Sainz
  • (305) 444 1234

    Mobile

  • (706) 888 1234

    Work

  • shauna@example.com

    Personal

  • shauna@work.com

    Work

Item Avatar

Add class item-avatar to the .list-group-item element.
Use class avatar and circle on the <img> element.

  • Dave Williams

    Lorem ipsum dolor sit amet, consectetur.

  • Melissa Milano

    Lorem ipsum dolor sit amet, consectetur.

  • Sara Smith

    Lorem ipsum dolor sit amet, consectetur.

  • Mike Rodriguez

    Lorem ipsum dolor sit amet, consectetur.

Thumbnails

Add class item-thumbnail to .list-group-item. Wrap the image in a element with the class thumb-wrap.

  • Consectetur elit

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla, sint ratione exercitationem sapiente eligendi ea eum impedit cum cumque quis dolore fugiat sunt voluptatibus! Necessitatibus, odit quod dolore fugit eius.

  • Necessitatibus

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla, sint ratione exercitationem sapiente eligendi ea eum impedit cum cumque quis dolore fugiat sunt voluptatibus! Necessitatibus, odit quod dolore fugit eius.

  • Sint ratione

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla, sint ratione exercitationem sapiente eligendi ea eum impedit cum cumque quis dolore fugiat sunt voluptatibus! Necessitatibus, odit quod dolore fugit eius.

Item controls

Add controls like checkboxes, radios or switches to a list group items by using the class item-icon to the .list-group-item, ad class icon to the control.
When you add multiple lines of text, also add class item-lines to the .list-group-item to align the control.

  • Settings:
  • Notify sound
  • Notify

    On receiving email

  • Notify

    On receiving message

  • Every 24 hours

  • Filter:
  • Group A
  • Group B
  • Group C
Sortable items

For more sortable option see the sortable page.

  • 1 These list-group items are sortable.
  • 2 It has support for touch devices.
  • 3 Just drag some elements around.
  • 4 Save new order in localstorage.
Intro Head

Give an item a eye catching intro by adding a element with the class intro-head to the list item. Style the intro by adding one of the text color classes e.g. text-red.

Divider item

Divide groups by using a divider-item.
Wrap a item-divider inside a list-group-divider.

  • J
  • Chris Johnson
  • Sara Jones
  • S
  • John Smith
List group small

Add class item-small to the .list-group element to have less vertical padding on each list-group item.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Porta ac consectetur ac
  • Vestibulum at eros
Multiple lines

Items can also have multiple lines of text. Available classes item-title and item-text.

  • Cras justo odio

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe, repellat.

  • Porta ac consectetur ac

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe, repellat.

  • Vestibulum at eros

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe, repellat.

© 2016 YourApp