Bootstrap 5-List Group
The most basic list group is an unordered list with list items:
To create a basic list group, use an < ul> element with class .list-group, and <li> elements with class .list-group-item:
Basic List Groups
<html lang = "en"><head>
<title> Bootstrap 5 Example </title>
<meta name = "viewport" content = "width=device-width, initial-scale = 1">
<link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js">
</script>
</head>
<body>
<div class="container">
<h4> Basic List Group </h4>
<ul class = "list-group">
<li class = "list-group-item"> First Value </li>
<li class = "list-group-item"> Second Value </li>
<li class = "list-group-item"> Third Value </li>
<li class = "list-group-item"> Fourth Value </li>
</ul>
</div>
</body>
</html>
Output
Basic List Group
- First Value
- Second Value
- Third Value
- Fourth Value
Active List Group
<html lang = "en"><head>
<title> Bootstrap 5 Example </title>
<meta name = "viewport" content = "width=device-width, initial-scale = 1">
<link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js">
</script>
</head>
<body>
<div class="container">
<h4> Active List Group</h4>
<ul class = "list-group">
<li class = "list-group-item active"> First Value </li>
<li class = "list-group-item"> Second Value </li>
<li class = "list-group-item"> Third Value </li>
<li class = "list-group-item"> Fourth Value </li>
</ul>
</div>
</body>
</html>
Output
Active List Group
- First Value
- Second Value
- Third Value
- Fourth Value
Disabled-List Group
<html lang = "en"><head>
<title> Bootstrap 5 Example </title>
<meta name = "viewport" content = "width=device-width, initial-scale = 1">
<link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js">
</script>
</head>
<body>
<div class="container">
<h4> Disabled List Group </h4>
<ul class = "list-group">
<li class = "list-group-item active"> First Value </li>
<li class = "list-group-item"> Second Value </li>
<li class = "list-group-item"> Third Value </li>
<li class = "list-group-item"> Fourth Value </li>
</ul>
</div>
</body>
</html>
Output
Basic Pagination
Disabled List Group
- First Value
- Second Value
- Third Value
- Fourth Value
List group with link
<html lang = "en"><head>
<title> Bootstrap 5 Example </title>
<meta name = "viewport" content = "width=device-width, initial-scale = 1">
<link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js">
</script>
</head>
<body>
<div class="container">
<h4> List Groups With Link </h4>
<ul class = "list-group">
<a href = "#" class = "list-group-item list-group-item-action active"First Value></a>
<a href = "#" class = "list-group-item list-group-item-action active"Second Value></a>
<a href = "#" class = "list-group-item list-group-item-action active">Third Value</a>
<a href = "#" class = "list-group-item list-group-item-action active">Fourth Value;</a>
</ul>
</div>
</body>
</html>