Hello Dear Readers, Today In this Post, You will learn Bootstrap 5 Tutorial In Hindi #24 | Bootstrap 5 List Group Classes. Earlier I have shared the Bootstrap 5 Tutorial In Hindi #23 | Bootstrap 5 Button Group Classes. and now it’s time to Bootstrap 5 List Group Classes.
In this tutorial, You will learn full Bootstrap 5. If you want to go deep into the tutorial so you can watch the full video which is below Hope it will help you all thank you for visiting.
In this tutorial, you will learn Bootstrap Tutorial In Hindi, Bootstrap 5 List Group Classes. Here You can learn what is a bootstrap framework, what are the advantages of the bootstrap tutorial in Hindi. Make sure to Subscribe, Share the video, and Like it, for more tutorials in Hindi like this one!
List group
List groups are a flexible and powerful component for displaying a series of content. Modify and extend them to support just about any content within.
Basic example
The most basic list group is an unordered list with list items and the proper classes. Build upon it with the options that follow, or with your own CSS as needed.
Active items
Add .active to a .list-group-item to indicate the current active selection.
Disabled items
Add .disabled to a .list-group-item to make it appear disabled. Note that some elements with .disabled will also require custom JavaScript to fully disable their click events (e.g., links).
Links and buttons
Use <a>s or <button>s to create actionable list group items with hover, disabled, and active states by adding .list-group-item-action. We separate these pseudo-classes to ensure list groups made of non-interactive elements (like <li>s or <div>s) don’t provide a click or tap affordance.
Be sure to not use the standard .btn classes here.
With <button>s, you can also make use of the disabled attribute instead of the .disabled class. Sadly, <a>s don’t support the disabled attribute.
Contextual classes
Use contextual classes to style list items with a stateful background and color.
Flush
Add .list-group-flush to remove some borders and rounded corners to render list group items edge-to-edge in a parent container (e.g., cards).
You can activate a list group navigation without writing any JavaScript by simply specifying data-toggle="list" or on an element. Use these data attributes on .list-group-item.