Table of contents
1.
Introduction
2.
Basic List Groups
3.
List Groups With Badges
4.
List Groups With HTML Div Tags
5.
Active Item Using List Groups
6.
Disabled Item Using List Groups
7.
Contextual Classes
8.
Headings And Text Using List Classes
9.
FAQ’s
10.
Key Takeaways
Last Updated: Mar 27, 2024

List Group

Career growth poll
Do you think IIT Guwahati certified course can help you in your career?

Introduction

Bootstrap is an open-source framework used for front-end development. It contains CSS(Cascading Style Sheet), and JS(JavaScript) based design templates for various HTML tags like buttons, forms, images, lists, and many more. Bootstrap makes designing an HTML-based website a very efficient and smooth task.

The list tag displays elements in an organised fashion for user convenience. The items in a list can be both ordered as well as unordered. The list group is a set of classes in Bootstrap used to add design and enhance user interactiveness on the HTML list tag.

An undecorated HTML code for creating an unordered list without Bootstrap will look like this.

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <ul>
      <li>First</li>
      <li>Second</li>
      <li>Third</li>
      <li>Fourth</li>
    </ul>
  </body>
</html>

Basic List Groups

It is pretty evident that the above list is not very appealing to the eye and will not look quite good just the way it is on a website, so let us spice the list up with a little bit of Bootstrap. In the following examples, we will be using Bootstrap CDN.

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <title></title>
  </head>
  <body>
    <ul class = "list-group">
      <li class = "list-group-item">First</li>
      <li class = "list-group-item">Second</li>
      <li class = "list-group-item">Third</li>
      <li class = "list-group-item">Fourth</li>
    </ul>
  </body>
</html>

As evident from the above list, adding a few Bootstrap classes can make our list look more exciting and appealing. We have added two custom Bootstrap classes in this code snippet: list-group and list-group-item.

List Groups With Badges

We can use the HTML Span tag to add a badge to the items in the list using the Bootstrap badge class. In this section, we will add an HTML span tag to our previous code snippet and add the Bootstrap badge class.

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <title></title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
  <h1>Coding Ninjas</h1>
  <ul class="list-group">
    <li class="list-group-item">New <span class="badge">New</span></li>
    <li class="list-group-item">First <span class="badge">Edit</span></li>
    <li class="list-group-item">Second <span class="badge">New</span< /li>
    <li class="list-group-item">Third</li>
  </ul>
</body>
</html>

List Groups With HTML Div Tags

We created the lists in the above code snippets using the ul and li tags. We can also create a list using the div tag and p or a tag. In this section, we will create a list using the HTML div tag, and we will also take a glance at how we can add links for other sources to our list. tag adds links for other sources using the href, we provide an external URL or an internal section ID in the href column, and on clicking the list item, the user will direct to the specified path.

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <title></title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
  <h1>Coding Ninjas</h1>
  <div class="list-group">
    <a href="#" class="list-group-item">First <span class="badge">New</span></a>
    <a href="#" class="list-group-item">Second</a>
    <a href="#" class="list-group-item">Third</a>
  </div>
</body>
</html>

Active Item Using List Groups

Using the Bootstrap active class, we can highlight any list element by increasing the brightness of the background, making it stand out from the other elements. The highlighted element is known as an active element.

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <title></title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
  <h1>Coding Ninjas</h1>
  <div class="list-group">
    <a href="#" class="list-group-item active">First <span class="badge">New</span></a>
    <a href="#" class="list-group-item">Second</a>
    <a href="#" class="list-group-item">Third</a>
  </div>
</body>
</html> 

Disabled Item Using List Groups

Using the Bootstrap disabled class, We can prohibit the user from clicking on a particular list item, i.e., the cursor will turn to no-drop(🚫), and the user will not be allowed to click on the disabled list item. The disabled class will use dull grey color to highlight the selected list item contrary to the bright color in the case of the active list item. 

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <title></title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
  <h1>Coding Ninjas</h1>
  <div class="list-group">
    <a href="#" class="list-group-item active">First <span class="badge">Active</span></a>
    <a href="#" class="list-group-item disabled">Second<span class="badge">Disabled</span></a>
    <a href="#" class="list-group-item">Third</a>
  </div>
</body>
</html>

Contextual Classes

Contextual classes are yet another type of Bootstrap class used to highlight the list item based upon the impact they have to leave on the user. There are multiple types of contextual classes, and we will be discussing some of them in this section.

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <title></title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
  <h1>Coding Ninjas</h1>
  <div class="list-group">
    <a href="#" class="list-group-item active list-group-item-success">Success With The Active Class <span class="badge">Active</span></a>
    <a href="#" class="list-group-item list-group-item-success">Success Without The Active Class</a>
    <a href="#" class="list-group-item list-group-item-info">Info</a>
    <a href="#" class="list-group-item list-group-item-warning">Warning</a>
    <a href="#" class="list-group-item list-group-item-danger">Danger</a>
  </div>
</body>
</html>

Headings And Text Using List Classes

By this time, we have almost covered all the points one can have while creating a list, but what if someone wanted to list out paragraphs in the form of list items, having a title, and a follow-up sentence. So here, we will talk about the heading and text class.

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <title></title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
  <h1>Coding Ninjas</h1>
  <div class="list-group">
    <a href="#" class="list-group-item active">
      <h4 class="list-group-item-heading">Active</h4>
      <span class="badge">New</span>
      <p class="list-group-item-text">This is our first active item.</p>
    </a>
    <a href="#" class="list-group-item disabled">
      <h4 class="list-group-item-heading">Disable</h4>
      <p class="list-group-item-text">This item is disabled.</p>
    </a>
    <a href="#" class="list-group-item list-group-item-success">
      <h4 class="list-group-item-heading">Success</h4>
      <p class="list-group-item-text">This is a success message.</p>
    </a>
    <a href="#" class="list-group-item list-group-item-warning">
      <h4 class="list-group-item-heading">Warning</h4>
      <p class="list-group-item-text">This is a warning message.</p>
    </a>
  </div>
</body>
</html>

FAQ’s

  1. What is Bootstrap?
    Bootstrap is an open-source framework used for front-end development. It contains CSS(Cascading Style Sheet), and JS(JavaScript) based design templates for various HTML tags like buttons, forms, images, lists, and many more. Bootstrap makes designing an HTML-based website a very efficient and smooth task.
     
  2. What is a List Group?
    The li tag displays elements in an organized fashion for user convenience. The items in a list can be both ordered as well as unordered. The list group is a powerful and flexible set of classes in Bootstrap used to add design and enhance user interactiveness on the HTML li tag.
     
  3. How do you use the classes list-group and list-group-item?
    The two preceding classes present in List Group are list-group and list-group-item. We add list-group to ul or div tag and list-group-item to li or p tag, depending on the usage.
    These classes incorporate internal CSS, automatically sort the items in a list, and split the elements by a line of minimal thickness, producing a more appealing list.

Key Takeaways

This Blog covered all the necessary points about the Bootstrap List Class with the required code snippets. This Blog listed out all the essential classes and their respective implementations in a very user-friendly way

Don’t stop here; check out Coding Ninjas for more unique courses and guided paths. Also, try Coding Ninjas Studio for more exciting articles, interview experiences, and fantastic Data Structures and Algorithms problems.

Live masterclass