Open In App

Bootstrap 5 List group Numbered

Improve
Improve
Like Article
Like
Save
Share
Report

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
Previous
Next
Share your thoughts in the comments
Similar Reads