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.
.list-group
to the list group container(<ul>
)
element base class.
.list-item
to the every child element(<li>
) of list group container(<ul>
).
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.
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.
Note: To make active list item ,assign .active
to the list item(<li>
) base class.
List group item will be disabled by assigning .disabled
to the .list-group-item
element.
Note: In the above example .disabled
is used to assign list group item base class to disabled list item.
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.
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.
To disable actionable list item,use .disabled
class to <a>
element base class.it will remove hover effect of actionable list item.
Note:
To make diabled actionable list item ,assign .disabled
to the <a>
element base class.
Apply .list-group-flush
to the <ul>
class that remove some borders and rounded corners of the list items.
Note: To remove list group borders and rounded corners ,assign .list-group-flush
to the <ul>
element base class.
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.
Note: Horizontal list group can be created very easily by adding .list-group-horizontal
to the <ul>
element base class.
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
.
Note: In the abovce example,list group contextual classes are used to provide color & background color to the list item.
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.
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.
Note: In the above example badge and list group both are used to make most useful list group item.