Bootstrap 5 provides the List Group Active feature in which items are stored in form of a list. List groups are a flexible and powerful component for displaying a series of content. The List Group Active feature is used to indicate the currently active selection.
List group Active items classes:
- .active: This class is used to indicate the currently active selection.
- .list-group-item: This class is used to indicate and add the items to the list.
- .list-group: This class is used to create the Bootstrap list.
Syntax:
<ul class="list-group"> <li class="list-group-item active">...</li> <li class="list-group-item">...</li> ... </ul>
Example 1: The following code demonstrates the List group Active items using the List Active Item properties.
<!DOCTYPE html> < html >
< head >
< title >Bootstrap 5 List group Active items</ title >
< link href =
rel = "stylesheet"
integrity =
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin = "anonymous" >
</ head >
< body >
< div class = "container" >
< h1 class = "text-success" >
GeeksforGeeks
</ h1 >
< ul class = "list-group" >
< li class = "list-group-item active" >
Hello
</ li >
< li class = "list-group-item" >
Welcome Geek
</ li >
< li class = "list-group-item" >
GeeksforGeeks
</ li >
</ ul >
</ div >
</ body >
</ html >
|
Output:
Example 2: The following code demonstrates the List group Active items on multiple items.
<!DOCTYPE html> < html >
< head >
< title >Bootstrap 5 List group Active items</ title >
< link href =
rel = "stylesheet"
integrity =
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin = "anonymous" >
</ head >
< body >
< div class = "container" >
< h1 class = "text-success" >
GeeksforGeeks
</ h1 >
< ul class = "list-group" >
< li class = "list-group-item active" > C++</ li >
< li class = "list-group-item" >Python</ li >
< li class = "list-group-item active" > C</ li >
< li class = "list-group-item" >Java</ li >
< li class = "list-group-item active" > Ruby</ li >
< li class = "list-group-item" >JavaScript</ li >
< li class = "list-group-item" >PHP</ li >
</ ul >
</ div >
</ body >
</ html >
|
Output:
Reference: https://getbootstrap.com/docs/5.0/components/list-group/#active-items