List group
List Groups are used to display a series of content. We can modify them to support any content as per our needs. The use of List-Groups is just to display a series or list of content in an organized way.
Class | Description | Syntax |
---|---|---|
Disabled | Makes the list group disabled. | .disabled |
Active | Indicates the currently active item. | .active |
Hyperlinks and Buttons | Creates actionable list items with multiple states. | .list-group-item-action |
Flush | Flush class to remove some borders and rounded corners data | .list-group-flush |
Contextual | Style list items with suitable backgrounds and colors. | .list-group-item-primary|secondary|info|light |
Badges | Adds badges to list group items. | .badge |
Example Code:
<!DOCTYPE html>
<html>
<head>
<title>List Groups example</title>
<!-- Link Bootstrap Files -->
<link rel="stylesheet"
href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
integrity=
"sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
crossorigin="anonymous">
<script src=
"https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity=
"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous">
</script>
<script src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"
integrity=
"sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
crossorigin="anonymous">
</script>
</head>
<body>
<p>To do list</p>
<ul class="list-group">
<!-- active list group item -->
<li class="list-group-item active">study</li>
<!-- disabled list group item -->
<li class="list-group-item disabled">pay bills</li>
<li class="list-group-item">call mom</li>
<!-- Contextual list group item -->
<li class="list-group-item
list-group-item-info">
Info list group item
</li>
</ul>
<div>
<!-- hyperlink list group item -->
<a href="#" class="list-group-item list-group-item-action">drop an email</a>
</div>
<!-- badge list group item -->
<button type="button" class="list-group-item list-group-item-action">
UPDATES
<span class="badge badge-pill badge-danger">2</span>
</button>
</body>
</html>
Bootstrap Cheat Sheet – A Basic Guide to Bootstrap
Bootstrap is a free, open-source, potent CSS framework and toolkit used to create modern and responsive websites and web applications. It is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first websites. Nowadays, websites are perfect for all browsers and all sizes of screens.