Flush/Remove Borders
The .list-group-flush class is used to remove some borders and rounded corners.
Example:
<!DOCTYPE html>
<html>
<head>
<!-- Load Bootstrap -->
<link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
crossorigin="anonymous">
<script src=
"https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
integrity=
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous">
</script>
<script src=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"
integrity=
"sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
crossorigin="anonymous">
</script>
</head>
<body class="text-center">
<div class="container mt-3">
<h1 class="text-success">
w3wiki
</h1>
<div class="container">
<ul class="list-group
list-group-flush">
<a href="#" class="list-group-item">
Android
</a>
<a href="#" class="list-group-item">
Web
</a>
<a href="#" class="list-group-item">
AI
</a>
</ul>
</div>
</div>
</body>
</html>
Output:
Bootstrap 5 List group
Bootstrap 5 is the latest major release by Bootstrap in which they have revamped the UI and made various changes. List groups are a flexible and powerful component for displaying a series of content. These can be modified and extended to support just about any content within. Use .list-group and .list-group-item classes to create a list of items. The .list-group class is used with <ul> element and .list-group-item is used with <li> element.
Syntax:
<div class="list-group"> Contents... <div>
Table of Content
- Bootstrap 5 List group
- Active list item
- List Group With Linked Items
- Disabled Item
- Flush/Remove Borders
- Horizontal List Groups
- Contextual Classes
- Link items with Contextual Classes
- List Group with Badges