Disabled Item
The .disabled class is used to disable the text content. This class set the text color to light. When used on links, it will remove the hover effect.
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" style="width: 700px;">
<h1 class="text-success">
w3wiki
</h1>
<div class="container">
<div class="list-group">
<a href="#" class="list-group-item disabled">
Android
</a>
<a href="#" class="list-group-item">
Web
</a>
<a href="#" class="list-group-item disabled">
AI
</a>
</div>
</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