Bootstrap 5 List group Numbered
Bootstrap 5 List Group Numbered is one of the capabilities offered by List Group in Bootstrap 5, which is used to keep items in the form of a list and display them sequentially through the use of numbers.
List Group Numbered Classes:
- 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.
- list-group-numbered: This class is used to generate the numbers for the items, it is used in <ol> tag.
Syntax:
<ol class="list-group list-group-numbered">
<li class="list-group-item">...</li>
<li class="list-group-item">...</li>
</ol>
Example 1: The following code demonstrates the List Group Numbered items using the List Group Numbered Item properties.
HTML
<!DOCTYPE html>
< html >
< head >
< title >Bootstrap 5 List group Numbered</ title >
< link href =
rel = "stylesheet"
integrity =
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin = "anonymous" >
</ head >
< body >
< h1 class = "text-success" >
GeeksforGeeks
</ h1 >
< h2 >Bootstrap 5 List group Numbered</ h2 >
< ol class = "list-group list-group-numbered" >
< li class = "list-group-item" >
List Group Numbered
</ li >
< li class = "list-group-item" >
Bootstrap 5
</ li >
< li class = "list-group-item" >
GeeksforGeeks
</ li >
</ ol >
</ body >
</ html >
|
Output:
Example 2: The following code demonstrates the Nested List Group Numbered using Bootstrap 5 features.
HTML
<!DOCTYPE html>
< html >
< head >
< title >Bootstrap 5 List group Numbered</ title >
< link href =
rel = "stylesheet"
integrity =
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin = "anonymous" >
</ head >
< body >
< div class = "container" >
< h1 class = "text-success" >GeeksforGeeks</ h1 >
< h2 >Bootstrap 5 List group Numbered</ h2 >
< ol class = "list-group list-group-numbered" >
< li class = "list-group-item" > Courses
< ol class="list-group
list-group-numbered">
< li class = "list-group-item" >
Full Stack Course</ li >
< li class = "list-group-item" >
Android Development</ li >
< li class = "list-group-item" >
DSA Full Course</ li >
</ ol >
</ li >
< li class = "list-group-item" >Languages
< ol class = "list-group list-group-numbered" >
< li class = "list-group-item" >ReactJs</ li >
< li class = "list-group-item" >Java</ li >
< li class = "list-group-item" >C++</ li >
</ ol >
</ li >
</ ol >
</ div >
</ body >
</ html >
|
Output:
Reference: https://getbootstrap.com/docs/5.0/components/list-group/#numbered
Last Updated :
21 Nov, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...