Updated June 16, 2023
Introduction to Bootstrap List Group
The bootstrap list group is a flexible component to create an element list per the required format. The list group is modifying a list or group of content in the link or button style using classes. The list group is a user-friendly component of Bootstrap to make an unordered list in an elegant manner and ideal format. The list-group classes not only needed <ul> and <li> tags but also used many tags of HTML files to create a list.
Syntax
The list group is a user-friendly component for making a sorted content list.
The basic bootstrap list-group syntax is below.
<ul class= "list-group">
<li class= "list-group-item"> first list-group content
</li>
<li class= "list-group-item"> second list-group content
</li>
<li class= "list-group-item"> third list-group content
</li>
<li class= "list-group-item"> fourth list-group content
</li>
</ul>Description: The <ul> tag is used to display an unordered list which is the default list group. The class list-group is placed inside of <ul> tag to set the list-group in Bootstrap. We place the class “list-group-item” inside the <li> tag to display list items in a series format.
How do List Group Classes work in Bootstrap?
Below are the steps to work:
Step #1
The support files include in the <head> section of the HTML file. The bootstrap support files are below.
<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>Step #2
The list-group syntax is placed in the <body> section of the HTML file. The basic syntax of the list-group is below.
<body>
<div class="container-fluid">
<ul class= "list-group">
<li class= "list-group-item"> first list-group content </li>
<li class= "list-group-item"> second list-group content </li>
<li class= "list-group-item"> third list-group content </li>
<li class= "list-group-item"> fourth list-group content </li>
</ul>
</div>
</body>- We place the list-group with hyperlink syntax in the body section.
- The list-group with hyperlink syntax is below.
<div class= "list-group">
<a href= "google.com" class= "list-group-item"> Google link </a>
<a href= "facebook.com" class= "list-group-item"> Facebook Link </a>
<a href= "microsoft.com" class= "list-group-item"> Microsoft Link </a>
<a href= "youtube.com" class= "list-group-item"> Youtube Link </a>
</div>Description:
- The list-group class is placed in the <div> tag instead of <ul> tag.
- The href =”#” placed inside of <a> tag. We use this link for the hyperlink.
- The list-group-item is placed inside of <a> tag instead of <li> tag.
Step #3
The active class applies to the list-group-item class, highlighting and enhancing the visibility of the currently selected group item in the list.
<div class= "list-group">
<a href= "google.com" class= "list-group-item active"> Google link </a>
<a href= "facebook.com" class= "list-group-item"> Facebook Link </a>
</div>Examples
Below are examples mentioned:
Example #1
The basic bootstrap list-group example and output.
Code:
<!DOCTYPE html>
<html>
<head>
<title> Bootstrap list-group Tutorial </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>
<div class="container-fluid">
<b>Bootstrap List-Group Example </b>
<ul class= "list-group">
<li class= "list-group-item"> first list-group content
</li>
<li class= "list-group-item"> second list-group content
</li>
<li class= "list-group-item"> third list-group content
</li>
<li class= "list-group-item"> fourth list-group content </li>
</ul>
</div>
</body>
</html>Output:
Description:
- The example and output above demonstrate the basic list group.
- The <ul> and <li> tag used for an unordered list and their items.
- The basic list-group employs the list-group and list-group-item class.
Example #2
The list group with active and disabled class examples and output.
Code:
<!DOCTYPE html>
<html>
<head>
<title> Bootstrap list-group Tutorial </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>
<div class="container-fluid">
<b>Bootstrap List-Group Example </b>
<ul class= "list-group">
<li class= "list-group-item active"> first list-group content
</li>
<li class= "list-group-item"> second list-group content
</li>
<li class= "list-group-item"> third list-group content
</li>
<li class= "list-group-item disabled"> fourth list-group content </li>
</ul>
</div>
</body>
</html>Output:
Description:
- The first list-group content includes the active class with the list-group-item.
- The fourth list-group content includes the disabled class with the list-group-item.
- The example and output shown above to know the active and disabled class in the group item.
Example #3
The list group with Hyperlink examples and output.
Code:
<!DOCTYPE html>
<html>
<head>
<title> Bootstrap list-group Tutorial </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>
<div class="container-fluid">
<b>Bootstrap List-Group with Hyperlink Example </b>
<div class= "list-group">
<a href= "google.com" class= "list-group-item"> Google link </a>
<a href= "facebook.com" class= "list-group-item"> Facebook Link </a>
<a href= "microsoft.com" class= "list-group-item"> Microsoft Link </a>
<a href= "youtube.com" class= "list-group-item"> Youtube Link </a>
</div>
</div>
</body>
</html>Output:
Example #4
The list group with contextual class examples and output.
Code:
<!DOCTYPE html>
<html>
<head>
<title> Bootstrap list-group Tutorial </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>
<div class="container-fluid">
<b>Bootstrap List-Group Example </b>
<div class= "list-group">
<a href= "google.com" class= "list-group-item list-group-item-danger"> Google link </a>
<a href= "facebook.com" class= "list-group-item list-group-item-warning"> Facebook Link </a>
<a href= "microsoft.com" class= "list-group-item list-group-item-success"> Microsoft Link </a>
<a href= "youtube.com" class= "list-group-item list-group-item-info"> Youtube Link </a>
</div>
</div>
</body>
</html>Output:
Description:
- The example and output demonstrate the contextual classes in the list group.
- The Google link combines the list-group-item-danger class with the list-group-item.
- The Facebook link pairs the list-group-item-warning class with the list-group-item.
- The Microsoft link associates the list-group-item-success class with the list-group-item.
- The YouTube link includes the list-group-item-info class along with the list-group-item.
Example #5
The list group with customizing content examples and output.
Code:
<!DOCTYPE html>
<html>
<head>
<title> Bootstrap list-group Tutorial </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>
<div class="container-fluid">
<b>Bootstrap List-Group Example </b>
<ul class="list-group">
<li class="list-group-item active">
<h3 class="list-group-item-heading"> HTML Tutorial </h3>
<p class="list-group-item-text"> This is basic website language with tags and attribute. </p>
</li>
<li class="list-group-item ">
<h3 class="list-group-item-heading"> CSS Tutorial </h3>
<p class="list-group-item-text"> This is used for Styling website. </p>
</li>
<li class="list-group-item ">
<h3 class="list-group-item-heading"> Javascript Tutorial </h3>
<p class="list-group-item-text"> This is used for validation and rules to website. </p>
</li>
<li class="list-group-item">
<h3 class="list-group-item-heading"> Bootstrap Tutorial </h3>
<p class="list-group-item-text"> This is advance language for website. </p>
</li>
</ul>
</div>
</body>
</html>Output:
Description:
- The content heading utilizes the list-group-item-heading class, which is placed inside the <h3> tag.
- The list-group-item-text class is used to style and format the content within the list group item. This class is placed inside the <p> tag.
- The example and output show how to customize content classes in the list group.
Conclusion
Users can modify the content list as per their requirements using the Bootstrap list group. The list group helps to make different styles of content series using minimum coding. This is a user-friendly component and easy to understand for users.
Recommended Articles
This is a guide to Bootstrap List Group. Here we discuss an introduction, syntax, and steps to apply list group in Bootstrap with examples. You can also go through our other related articles to learn more –
