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.

Output:

👁 Image

Example 2: The following code demonstrates the Nested List Group Numbered using Bootstrap 5 features.

Output:

👁 Image

Reference: https://getbootstrap.com/docs/5.0/components/list-group/#numbered