BOOTSTRAP4 LIST GROUP
List group is very useful and powerfull component of bootstrap4. It is used to display a series of content, or a list of items in beautifull manner.
Basic list group
List group is nothing but an unordered list with class .list-group
and list items with class .list-group-item
- Home
- Mails
- Calls
- Text Messages
Exmple
Links And Buttons in List Group
You can add <a>
tags and <button>
tags to the list items.
It is not necessary to use unordered list to create list group in bootstrap, you can use div
tag as well with .list-group
class.
To create actionable list group item add .list-group-item-action
class to the <a>
tag or <button>
tag.
Do not use .btn
class with buttons in list group.
Exmple
List group can be used to show any product detail or can be used as webpage sidebar to show related links.
List Items With Badges
You can add badges to list group item to show number of unread counts.
To create a badge use .badge
class, to add color code to the badge use .badge-*
where is color code and add class .badge-pill
to make it in shape of pill.
- Home
- Mails 30
- Calls 24
- Text Messages 5
Exmple
List Group with Contextual classes
You can use contextual classes also with list group. Contextual classes creates statefull background and color.
Look at the example below:
- Normal list item
- 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
Exmple
Bootstrap list-group horizontal
To create horizontal bootstrap list group just add flex-direction: row
to .list-group
class.
- Normal list item
- 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
Exmple
- In bootstrap, list group is a collection of items in a beautiful manner
- To create a basic list group use unordered list with class
.list-group
and items with.list-group-item
- To make list group horizontal just add
flex-direction: row
to.list-group
class.