Basic List group

  • An item
  • A second item
  • A third item
  • A fourth item
  • And a fifth one

Basic List group with Active item

  • An active item
  • A second item
  • A third item
  • A fourth item
  • And a fifth one

Basic List group with Disabled item

  • A disabled item
  • A second item
  • A third item
  • A fourth item
  • And a fifth one

List group with Buttons

Numbered list group

  1. Cras justo odio
  2. Cras justo odio
  3. Cras justo odio
  4. Cras justo odio
  5. Cras justo odio

List group with flush

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).

  • An item
  • A second item
  • A third item
  • A fourth item

Numbered list group with custom content

  1. Subheading
    Cras justo odio
    14
  2. Subheading
    Cras justo odio
    14
  3. Subheading
    Cras justo odio
    14

Horizontal List group

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|xxl} to make a list group horizontal starting at that breakpoint’s min-width.

  • An item
  • A second item
  • A third item
  • An item
  • A second item
  • A third item
  • An item
  • A second item
  • A third item
  • An item
  • A second item
  • A third item
  • An item
  • A second item
  • A third item

List group with Checkboxes

Place Bootstrap’s checkboxes and radios within list group items and customize as needed. You can use them without labels, but please remember to include an aria-label attribute and value for accessibility.

List group with Contextual classes

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

  • 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 warning list group item
  • A simple info list group item

List style with paragraph

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolor, fuga veniam alias ab nemo nesciunt aperiam vero rem enim ,Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quos obcaecati velit earum suscipit possimus quaerat similique eos quod distinctio commodi dicta ?

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet

Unorder List Style

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

Unorder List Style2

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

Unorder List Style3

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

Unorder List Style4

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

Unorder List Style5

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

Unorder List Style6

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

Order list

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
    1. Phasellus iaculis neque
    2. Purus sodales ultricies
    3. Vestibulum laoreet porttitor sem
    4. Ac tristique libero volutpat at
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem

Order With unorder

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem

Basic Example

It is Very Easy to Customize and it uses in your website apllication

  • Dapibus ac facilisis in
  • Morbi leo risus
  • Cras justo odio
    • Lorem
    • established
    • Contrary
  • Porta ac consectetur ac
  • Vestibulum at eros

Active Item

It is Very Easy to Customize and it uses in your website apllication

  • Dapibus ac facilisis in
  • Morbi leo risus
  • Cras justo odio
    • Lorem
    • established
    • Contrary
  • Porta ac consectetur ac
  • Vestibulum at eros

USER LIST

It is Very Easy to Customize and it uses in your website apllication

avatar
Blake Vanessa
4 hours ago

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's .

avatar
Elizabeth Parsons
8 hours ago

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's .

avatar
Nicola Lambert
12 hours ago

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's .

Using Image

It is Very Easy to Customize and it uses in your website apllication.

  • Adrian Monino
    Premium Member
  • Joel Mendez
    Premium Member
  • Joel Mendez
    Premium Member
  • Marianne Audrey
    Premium Member