Bootstrap 5 List group Links and buttons
Last Updated :
10 Nov, 2022
Bootstrap 5 provides the List Group Links and Buttons items feature in which items are actionable and stored in form of a list. List groups are a flexible and powerful component for displaying a series of content. The List Group Links and Buttons items feature is used to indicate the item is currently actionable which means it can be a link or button. The Link or button can be made active or disabled.
List Group Links and Buttons Classes:
- list-group: This class is used to create the Bootstrap list.
- list-group-item: This class is used to indicate and add the items to the list.
- list-group-item-action: This class is used to specify the item is set to in an action.
- active: This class is used to make items of the list appear active.
- disabled: This class is used to make items of the list appear disabled.
Syntax:
// Anchor tag to specify link items
<div class="list-group">
<a href="..." class="list-group-item
list-group-item-action active">...</a>
...
</div>
// Button tag to specify button items
<div class="list-group">
<button type="button" class="list-group-item l
ist-group-item-action active">...</button>
...
</div>
Note: Instead of using the”.disabled” class with <button>, you may use the disabled attribute, the disabled attribute is not supported by <a>.
Example 1: The following code demonstrates the List Group Link items using the List Group Links and Buttons Item properties.
HTML
<!DOCTYPE html>
< html >
< head >
< title >List Active Item</ title >
rel = "stylesheet"
integrity = "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin = "anonymous" >
</ head >
< body >
< h1 class = "text-success" >
GeeksforGeeks
</ h1 >
< h2 >Bootstrap 5 List Group Links</ h2 >
< div class = "list-group" >
class="list-group-item
list-group-item-action active">
Active Link</ a >
class="list-group-item
list-group-item-action">
GeeksforGeeks</ a >
class="list-group-item
list-group-item-action disabled">
Hello</ a >
</ div >
</ body >
</ html >
|
Output:
List group links
Example 2: The following code demonstrates the List Group Button items using the List Group Links and Buttons Item properties.
HTML
<!DOCTYPE html>
< html >
< head >
< title >List Active Item</ title >
rel = "stylesheet"
integrity = "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin = "anonymous" >
</ head >
< body >
< h1 class = "text-success" >
GeeksforGeeks
</ h1 >
< h2 >Bootstrap 5 List group buttons</ h2 >
< div class = "list-group" >
< button type = "button"
class="list-group-item
list-group-item-action active">Active button</ button >
< button type = "button"
class="list-group-item
list-group-item-action">GeeksforGeeks</ button >
< button type = "button"
class="list-group-item
list-group-item-action" disabled>
Disabled Button</ button >
</ div >
</ body >
</ html >
|
Output:
List Group buttons
Reference: https://getbootstrap.com/docs/5.0/components/list-group/#links-and-buttons
Share your thoughts in the comments
Please Login to comment...