List group is a highly effective and flexible element that is looked up in Bootstrap 4. The component is used for showing a string or 'list' material. The list group materials can certainly be changed and extended to support pretty much any kind of material inside through some features accessible for modification within the list in itself. These types of list groups may also be operated for navigation along with the use of the proper modifier class.
In Bootstrap 4, the Bootstrap List Template is a component that designs the unordered lists in a certain manner considering it paves the way for creating custom-made material inside structure lists without needing to concerned about the performance trouble ( due to the fact that the language looks after that by itself). ( discover more)
Shown in this article are the features which are available inside the list group element within Bootstrap 4:
• Unordered list: The absolute most common kind of list group which you are able to produce in Bootstrap 4 is an unordered list that has a series of items using the appropriate classes. You have the ability to built upon it by using the various solutions that are readily available in the element.
• Active stuffs: You are able to highlight the current active pick by simply incorporating the
.active
.list-group-item
• Disabled pieces: You are able to as well de-highlight a list material making it come out as although it has been disabled. You simply have to add the
.disabled
.list-group-item
• Links and Buttons: With help from the buttons tag, you are able to effortlessly produce an actionable object within the Bootstrap List Group what means that you will certainly have the ability to provide hover, active, and disabled states to these kinds of items with the use of the
.list-group-item-action
<div>
<li>
.btn
• Contextual classes: This is an additional nifty component that is part of the list group element which empowers you to style each list element using a descriptive color and background. These are especially practical for emphasize individual items as well as categorizing all of them according to color-'s code.
• Badges: You have the ability to additionally include badges to a list thing to demonstrate the unread counts, activity on the object, and make it easy for additional involved components via installing additional services. ( learn more)
The absolute most common list group is an unordered list along with list elements and the correct classes. Build upon it through the approaches that follow, alternatively utilizing your specific CSS as wished.
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
Amplify a
.active
.list-group-item
<ul class="list-group">
<li class="list-group-item active">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
Bring in
.disabled
.list-group-item
<ul class="list-group">
<li class="list-group-item disabled">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
Work with
<a>
<button>
.list-group-item-action
<li>
<div>
Make sure to not utilize the usual
.btn
<div class="list-group">
<a href="#" class="list-group-item active">
Cras justo odio
</a>
<a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a>
<a href="#" class="list-group-item list-group-item-action">Porta ac consectetur ac</a>
<a href="#" class="list-group-item list-group-item-action disabled">Vestibulum at eros</a>
</div>
By having
<button>
disabled
.disabled
<a>
<div class="list-group">
<button type="button" class="list-group-item list-group-item-action active">
Cras justo odio
</button>
<button type="button" class="list-group-item list-group-item-action">Dapibus ac facilisis in</button>
<button type="button" class="list-group-item list-group-item-action">Morbi leo risus</button>
<button type="button" class="list-group-item list-group-item-action">Porta ac consectetur ac</button>
<button type="button" class="list-group-item list-group-item-action" disabled>Vestibulum at eros</button>
</div>
Use contextual classes to form list elements with a stateful background along with colour.
<ul class="list-group">
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
<li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
<li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
<li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
</ul>
Contextual classes as well do work with
.list-group-item-action
.active
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-success">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-info">Cras sit amet nibh libero</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-warning">Porta ac consectetur ac</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-danger">Vestibulum at eros</a>
</div>
Employing colour to incorporate indicating simply presents a graphic signifier, which in turn will certainly not be shown to users of assistive technologies -- just like screen readers. Make certain that information marked with the different colors is either obvious from the content itself (e.g. the visible message), or is featured with different methods, just like extra text covered up using the
.sr-only
Add in badges to any kind of list group piece to reveal unread counts, activity, and a lot more through several utilities. Keep in mind the justify-content-between utility class and the badge's location.
<ul class="list-group">
<li class="list-group-item justify-content-between">
Cras justo odio
<span class="badge badge-default badge-pill">14</span>
</li>
<li class="list-group-item justify-content-between">
Dapibus ac facilisis in
<span class="badge badge-default badge-pill">2</span>
</li>
<li class="list-group-item justify-content-between">
Morbi leo risus
<span class="badge badge-default badge-pill">1</span>
</li>
</ul>
Provide practically any sort of HTML in, even for linked list groups similar to the one listed below, through flexbox utilities.
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action flex-column align-items-start active">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">List group item heading</h5>
<small>3 days ago</small>
</div>
<p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
<small>Donec id elit non mi porta.</small>
</a>
<a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">List group item heading</h5>
<small class="text-muted">3 days ago</small>
</div>
<p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
<small class="text-muted">Donec id elit non mi porta.</small>
</a>
<a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">List group item heading</h5>
<small class="text-muted">3 days ago</small>
</div>
<p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
<small class="text-muted">Donec id elit non mi porta.</small>
</a>
</div>
In conclusion, list group is a handy and robust element in Bootstrap 4 that makes it possible for you to set up an unordered list more organised, interactive, and responsive without spoiling on the appearance as well as layout of the list items themselves.