List group in bootstrap with examples

29 Apr, 2022
List Groups are used to display a series of content. We can modify them to support any content as per our needs. The use of List-Groups is just to display a series or list of content in an organized way. 
Below is a basic List Group created using unordered_lists in HTML, and appropriate Bootstrap classes:
HTML
<!DOCTYPE html><html><head>    <title>List Groups example</title>    <!-- Link Bootstrap Files -->    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"        integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"        crossorigin="anonymous">    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"        crossorigin="anonymous">    </script>    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"        integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"        crossorigin="anonymous">    </script></head><body>     <p>To do list</p>     <ul class="list-group">        <li class="list-group-item">study</li>        <li class="list-group-item">pay bills</li>        <li class="list-group-item">call mom</li>        <li class="list-group-item">drop an email</li>    </ul></body></html>
Output:
Active List Items: Add .active class to the list item to indicate that it is the currently active item.
HTML
<!DOCTYPE html><html><head>    <title>List Groups example</title>    <!-- Link Bootstrap Files -->    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"        integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"        crossorigin="anonymous">    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"        crossorigin="anonymous">    </script>    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"        integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"        crossorigin="anonymous">    </script></head><body>     <p>To do list</p>     <ul class="list-group">        <li class="list-group-item active">study</li>        <li class="list-group-item">pay bills</li>        <li class="list-group-item">call mom</li>        <li class="list-group-item">drop an email</li>    </ul></body></html>
Output:
Disabled List Items: Add .disabled class to a list item to indicate it is disabled. When the content to be disabled is a link/button, we may need to add custom javascript code to disable items completely.
HTML
<!DOCTYPE html><html><head>    <title>List Groups example</title>    <!-- Add Bootstrap Links -->    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"        integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"        crossorigin="anonymous">    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"        crossorigin="anonymous">    </script>    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"        integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"        crossorigin="anonymous">    </script></head><body>     <p>To do list</p>     <ul class="list-group">        <!-- Using the disabled bootstrap class on below            List Item will make it faded -->        <li class="list-group-item disabled">study</li>        <li class="list-group-item">pay bills</li>        <li class="list-group-item">call mom</li>        <li class="list-group-item">drop an email</li>    </ul></body></html>
Output:
Hyperlinks and Buttons: Use .list-group-item-action class to create actionable list items with hover, disabled and active states.
HTML
<!DOCTYPE html><html><head>    <title>List Groups example</title>    <!-- Add Bootstrap Links -->    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"        integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"        crossorigin="anonymous">    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"        crossorigin="anonymous">    </script>    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"        integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"        crossorigin="anonymous">    </script></head><body>     <p>Social Networks</p>     <ul class="list-group">        <a href="#" class="list-group-item            list-group-item-action">Google</a>        <a href="#" class="list-group-item            list-group-item-action active">Facebook</a>        <a href="#" class="list-group-item            list-group-item-action disabled">Twitter</a>        <a href="#" class="list-group-item            list-group-item-action">LinkedIn</a>    </ul></body></html>
Output:
Flush: Use the Flush class to remove some borders and rounded corners, so that it looks good in the parent container. 
HTML
<!DOCTYPE html><html><head>    <title>List Groups Example</title>    <!-- Add important Bootstrap Links -->    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"        integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"        crossorigin="anonymous">    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"        crossorigin="anonymous">    </script>    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"        integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"        crossorigin="anonymous">    </script></head><body>     <p>To do lists</p>     <ul class="list-group list-group-flush">        <li class="list-group-item">study</li>        <li class="list-group-item">pay bills</li>        <li class="list-group-item">call mom</li>        <li class="list-group-item">drop an email</li>    </ul></body></html>
Output:
Contextual Classes: Use contextual classes to style list items with suitable background and color.
HTML
<!DOCTYPE html><html><head>    <title>List Groups example</title>    <!-- Add Bootstrap Links -->    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"        integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"        crossorigin="anonymous">    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"        crossorigin="anonymous">    </script>    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"        integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"        crossorigin="anonymous">    </script></head><body>    <ul class="list-group">        <li class="list-group-item">            Basic list group item        </li>        <li class="list-group-item            list-group-item-primary">            Primary list group item        </li>        <li class="list-group-item            list-group-item-secondary">            Secondary list group item        </li>        <li class="list-group-item            list-group-item-success">            Success list group item        </li>        <li class="list-group-item            list-group-item-danger">            Danger list group item        </li>        <li class="list-group-item            list-group-item-warning">            Warning list group item        </li>        <li class="list-group-item            list-group-item-info">            Info list group item        </li>        <li class="list-group-item            list-group-item-light">            Light list group item        </li>        <li class="list-group-item            list-group-item-dark">            Dark list group item        </li>    </ul></body></html>
Output:
Badges: We can add badges to list group items as shown below:
HTML
<!DOCTYPE html><html><head>    <title>Badge Example</title>    <!-- Adding Bootstrap Classes -->    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"        integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"        crossorigin="anonymous">    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"        crossorigin="anonymous">    </script>    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"        integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"        crossorigin="anonymous">    </script></head><body>    <div class="list-group">        <button type="button"                class="list-group-item list-group-item-action">            NOTIFICATIONS            <span class="badge badge-pill badge-light">2</span>        </button>        <button type="button"                class="list-group-item list-group-item-action">            MESSAGES            <span class="badge badge-pill badge-warning">2</span>        </button>        <button type="button"                class="list-group-item list-group-item-action">            UPDATES            <span class="badge badge-pill badge-danger">2</span>        </button>        <button type="button"                class="list-group-item list-group-item-action">            NEWS            <span class="badge badge-pill badge-success">2</span>        </button>    </div></body></html>
Output:
Supported Browser:
Google Chrome
Microsoft Edge
Firefox
Opera
Safari
Reference:
Badges and breadcrumbs.
List groups Bootstrap.
simmytarika5
ysachin2314
sahilintern
Picked
Bootstrap
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Form validation using jQuery
How to change navigation bar color in Bootstrap ?
How to pass data into a bootstrap modal?
How to Show Images on Click using HTML ?
How to align navbar items to the right in Bootstrap 4 ?
How to update Node.js and NPM to next version ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Types of CSS (Cascading Style Sheet)
How to insert spaces/tabs in text using HTML/CSS?
REST API (Introduction)