Bootstrap 4 List Groups
Bootstrap 4 list groups are basically an unordered list that consists of the list item.
Follow the following steps to create bootstrap 4 list groups.
- Assign
.list-groupto the list group container(<ul>) element base class. -
Assign
.list-itemto the every child element(<li>) of list group container(<ul>).
Example
- First List Item
- Second List Item
- Third List Item
General Syntax
Try it nowSource Code
Source Code : Output
List Group
- First item
- Second item
- Third item
Note: In the above example .list-group is assigned to the list group container(<ul>) while .list-item is assigned to the list item(<li>).
Note:The list groups are used to display a list of items in an elegant way. List group item background color can be set by contextual classes of list group.
Active List Items
List group is basically is an ordered list in which .list-group is assigned to list group container while
.list-item to the every child of list group container.To make active list item assign .active to the list item base class.
General Syntax
Try it nowSource Code
Source Code : Output
List Group
- Web Designing
- Web Development
- Graphics Design
Note: To make active list item ,assign .active to the list item(<li>) base class.
List Group Disabled Items
List group item will be disabled by assigning .disabled to the .list-group-item element.
General Syntax
Try it nowSource Code
Source Code : Output
Bootstrap List Group Disabled Item
- App Development
- Graphics Design
- UX Design
- CMS Development
- Testing
Note: In the above example .disabled is used to assign list group item base class to disabled list item.
List Group With Linked Items
To create actionable list group ietms,use <div> in place of <ul> and <a> in place of <li>. Assign .list-group-item-action to <a> element base class.It creates grey background color during hover on the list item.
General Syntax
Try it nowSource Code
Source Code : Output
Bootstrap List Group With Linked Items
Note:
To make actionable list group,assign .list-group to the <div> element and .list-group-item to the <a> element base class.To create hover effect on the list item assign .list-group-item-action to the <a> element base class.
Disabled Linked Item
To disable actionable list item,use .disabled class to <a> element base class.it will remove hover effect of actionable list item.
General Syntax
Try it nowSource Code
Source Code : Output
Bootstrap Disabled Linked Item
Note:
To make diabled actionable list item ,assign .disabled to the <a> element base class.
Flush / Remove Borders
Apply .list-group-flushto the <ul> class that remove some borders and rounded corners of the list items.
General Syntax
Try it nowSource Code
Source Code : Output
Bootstrap Flush/Remove Borders
- Web Development
- Database Decelopment
- Graphics Development
- Testing
Note: To remove list group borders and rounded corners ,assign .list-group-flush to the <ul> element base class.
Horizontal List Group
To create horizontal list group ,add .list-group-horizontal to the <ul> base class. Horizontal list can also be created with respect to device breakpoint. You have to use .list-group-horizontal-{sm|md|lg|xl} class to <ul> element base class that make a list group horizontal starting at that breakpont's min-width.
Use .flex-fill class to every list item to make equal width of horizontal list item.
General Syntax
Try it nowSource Code
Source Code : Output
Normal list Group
- Lean HTML
- Lean CSS
- Learn Bootstrap
Horizontal list Group At The Breaking Point:lg
- Leatn HTML
- LeARN CSS
- Learn CSS
Note: Horizontal list group can be created very easily by adding .list-group-horizontal to the <ul> element base class.
Contextual Classes
Bootstrap provides contextual class that provides additional color as well as background color to the list item.
Followings are the contextual classes that is very useful for coloring list item. These are .list-group-item-success, list-group-item-secondary, list-group-item-info, list-group-item-warning, .list-group-item-danger, .list-group-item-dark and .list-group-item-light.
General Syntax
Try it nowSource Code
Source Code : Output
Bootstrap Contextual Classes
- Primary list group item
- secondary list group item
- Success list group item
Note: In the abovce example,list group contextual classes are used to provide color & background color to the list item.
Link items with Contextual Classes
General Syntax
Try it nowSource Code
Source Code : Output
Bootstrap List Group Link items with Contextual Classes
Note:
To provide different colors and background colors to the linked item in the list group, assign .list-group-item-* to the hyperlink element base class.
Bootstrap 4 List Group with Badges
To create bootstrap 4 list group with badge, combine .badge classes with utility/helper classes to add badges inside the list group. Adding .badge with additional helper classes to the badges inside list group, creates List group with badges.
General Syntax
Try it nowSource Code
Source Code : Output
Bootstrap List Group With Badge
- Message 50
- Event 80
Note: In the above example badge and list group both are used to make most useful list group item.