List group in bootstrap with examples
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= integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"> <script src= integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"> </script> <script src= 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= integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"> <script src= integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"> </script> <script src= 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= integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"> <script src= integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"> </script> <script src= 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= integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"> <script src= integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"> </script> <script src= 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= integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"> <script src= integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"> </script> <script src= 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= integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"> <script src= integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"> </script> <script src= 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= integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"> <script src= integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"> </script> <script src= 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:
Please Login to comment...