English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Bootstrap4 Basic Tutorial

Bootstrap4 List groups

List groups are very useful and flexible components for displaying element lists in a beautiful way. In the most basic form, list groups simply have .list-An unordered list of group class, while list items have .list-group-item class.

Most basic list groups are unordered.

To create a list group, you can add .list to the <ul> element-Group class, in Add .list to the <li> element-group-Item class:

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap 示例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js">/script>
</head>
<body
<div class="container">
　　<h2>Basic list group</h2>
　　<ul class="list-group">
　　　　<li class="list-group-item">First item</li>
　　　　<li class="list-group-item">Second item</li>
　　　　<li class="list-group-item">Third item</li>
　　</ul>
</div>
</body>
</html>
Test and See ‹/›

The effect after running is as follows:

Active state list item

To set the active state list item, add .active class:

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap 示例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js">/script>
</head>
<body
<div class="container">
　　<h2>Active state list item</h2>
　　<ul class="list-group">
　　　　<li class="list-group-item active">Active item</li>
　　　　<li class="list-group-item">Second item</li>
　　　　<li class="list-group-item">Third item</li>
　　</ul>
</div>
</body>
</html>
Test and See ‹/›

Disabled list item

.disabled class is used to set disabled list items:

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap 示例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js">/script>
</head>
<body
<div class="container">
　　<h2>Disabled list item</h2>
　　<ul class="list-group">
　　　　<li class="list-group-item disabled">Disabled item</li>
　　　　<li class="list-group-item">Second item</li>
　　　　<li class="list-group-item">Third item</li>
　　</ul>
</div>
</body>
</html>
Test and See ‹/›

Linked list item

To create a linked list item, you can replace <ul> with <div> Replace <a> with <li>. If you want to display a gray background when hovering over the mouse, add .list-group-item-Action class:

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap 示例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js">/script>
</head>
<body
<div class="container">
　　<h2>Linked list item</h2>
　　<div class="list-group">
　　　　<a href="#" class="list-group-item list-group-item-action">First item</a>
　　　　<a href="#" class="list-group-item list-group-item-action">Second item</a>
　　　　<a href="#" class="list-group-item list-group-item-action">Third item</a>
　　</div>
</div>
</body>
</html>
Test and See ‹/›

Multiple color list items

The color of the list items can be set by the following list: .list-group-item-success, list-group-item-secondary, list-group-item-info, list-group-item-warning, .list-group-item-danger, list-group-item-dark and list-group-item-light:

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap 示例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js">/script>
</head>
<body
<div class="container">
　　<h2>Multi-colored List Items</h2>
　　<ul class="list-group">
　　　　<li class="list-group-item list-group-item-success">Success List Item</li>
　　　　<li class="list-group-item list-group-item-secondary">Secondary List Item</li>
　　　　<li class="list-group-item list-group-item-info">Info List Item</li>
　　　　<li class="list-group-item list-group-item-warning">Warning List Item</li>
　　　　<li class="list-group-item list-group-item-danger">Danger List Item</li>
　　　　<li class="list-group-item list-group-item-primary">Primary List Item</li>
　　　　<li class="list-group-item list-group-item-dark">Dark Grey List Item</li>
　　　　<li class="list-group-item list-group-item-light">Light List Item</li>
　　</ul>
</div>
</body>
</html>
Test and See ‹/›

链接的多种颜色列表项

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap 示例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js">/script>
</head>
<body
<div class="container">
　　<h2>Multi-colored List Items</h2>
　　<div class="list-group">
　　　　<a href="#" class="list-group-item list-group-item-action">Active List Item</a>
　　　　<a href="#" class="list-group-item list-group-item-success">Success List Item</a>
　　　　<a href="#" class="list-group-item list-group-item-secondary">Secondary List Item</a>
　　　　<a href="#" class="list-group-item list-group-item-info">Info List Item</a>
　　　　<a href="#" class="list-group-item list-group-item-warning">Warning List Item</a>
　　　　<a href="#" class="list-group-item list-group-item-danger">Danger List Item</a>
　　　　<a href="#" class="list-group-item list-group-item-primary">Primary List Item</a>
　　　　<a href="#" class="list-group-item list-group-item-dark">Dark Grey List Item</a>
　　　　<a href="#" class="list-group-item list-group-item-light">Light List Item</a>
　　</div>
</div>
</body>
</html>
Test and See ‹/›
Bootstrap4 CardBootstrap4 Pagination