Bootstrap List Groups

In this Tutorial, you will learn about Bootstrap List Groups and how to use the list group. it is a powerful component and flexible for displaying a series of content in a beautiful manner.

The most basic Bootstrap list groups is simply an unordered list with a list item and proper classes .list-group whereas, the list items having the class .list-group-item Build upon it with the options that follow our own CSS as needed.

Output
The output Result will be Look like this.

• PDF Documents
• Word Documents
• PPT Documents
• Images Documents

Active items

For the Active item, you need to add .active to a .list-group-item to highlight or indicate the currently active selection.

Output

• PDF Documents
• Word Documents
• PPT Documents
• Images Documents

Disabled items

you want to disable the items use class .disabled to a .list-group-item to make it appear disabled. Some elements with .disabled will require custom JavaScript to fully disable their click events.

Output

• PDF Documents
• Word Documents
• PPT Documents
• Images Documents

List Group with Linked Items

sometimes you need hyperlink list group items you can with the little change in HTML markup.
in those conditions, you need to just replace them <li> with <a> tag and use <div> elements as a parent instead of <ul>.
you can add if you want to add icons and badges to this list group to make it more elegant.

Output

Flush

add class .list-group-flush if you want to remove some borders and rounded the corner to render list group items edge-to-edge in a parent container

Output
the output will be come like this:

Horizontal

Sometimes you want to change the layout of list group items from vertical to Horizontal across all breakpoint then you can add class .list-group-horizontal- {sm|md|lg|xl} to make a list group horizontal starting at that breakpoints min-width.
add .flex-fill to each list group if you want to equal-width list group items when Horizontal.

Output

Contextual classes

Use contextual classes on the style list item tp apply extra emphasis on them means that contextual classes to style list items with a stateful background and color.

Output

• Lorem Ipsum facilisis in
• Primary list group item
• Secondary list group item
• Success list group item
• Danger list group item
• Warning list group item
• Info list group item
• Light list group item
• Dark list group item