Bootstrap List group

Bootstrap List group
Nikhil
Published on 2021-07-24 13:35:34

Group of people on a list

List groups are a versatile and powerful component that may be used to display a succession of items. Modify and extend them to support almost any type of material.

As an example,

An unordered list with list items and the appropriate classes is the simplest basic list group. Build on it using the choices below or your own CSS if necessary.

Example:

<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>

 

Active items

Add .active to a .list-group-item to indicate the current active selection.

Example:

<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>

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).

<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>

 

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.

<div class="list-group">
    <a href="#" class="list-group-item list-group-item-action 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>

 

Contextual classes

Use contextual classes to style list items with a stateful background and color.

<ul class="list-group">
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item list-group-item-primary">This is a primary list group item</li>
    <li class="list-group-item list-group-item-secondary">This is a secondary list group item</li>
    <li class="list-group-item list-group-item-success">This is a success list group item</li>
    <li class="list-group-item list-group-item-danger">This is a danger list group item</li>
    <li class="list-group-item list-group-item-warning">This is a warning list group item</li>
    <li class="list-group-item list-group-item-info">This is a info list group item</li>
    <li class="list-group-item list-group-item-light">This is a light list group item</li>
    <li class="list-group-item list-group-item-dark">This is a dark list group item</li>
</ul>

 

With badges

Add badges to any list group item to show unread counts, activity, and more with the help of some utilities.

Example:

<ul class="list-group">
    <li class="list-group-item d-flex justify-content-between align-items-center">
        Cras justo odio
        <span class="badge badge-primary badge-pill">14</span>
    </li>
    <li class="list-group-item d-flex justify-content-between align-items-center">
        Dapibus ac facilisis in
        <span class="badge badge-primary badge-pill">2</span>
    </li>
    <li class="list-group-item d-flex justify-content-between align-items-center">
        Morbi leo risus
        <span class="badge badge-primary badge-pill">1</span>
    </li>
</ul>

 

Fade effect

To make tabs panel fade in, add .fade to each .tab-pane. The first tab pane must also have .show to make the initial content visible.

Example:

<div class="tab-content">
    <div class="tab-pane fade show active" id="home" role="tabpanel">...</div>
    <div class="tab-pane fade" id="profile" role="tabpanel">...</div>
    <div class="tab-pane fade" id="messages" role="tabpanel">...</div>
    <div class="tab-pane fade" id="settings" role="tabpanel">...</div>
</div>

ATutorialHub Related Guide

Comments (8)

Leave a Comment

Your email address will not be published. Required fields are marked*

User Comments

html tutorial comments

panduranga gupta

2021-07-05 07:03:13

good website for learning and help me a lot

html tutorial comments

raju

2021-09-25 14:58:47

The awsome website i am looking like for a long time, good work atutorialhub team keep doing

html tutorial comments

Shivani

2021-09-01 15:03:56

Learning a lot from the courses present on atutorialhub. The courses are very well explained. Great experience

html tutorial comments

Harshitha

2021-09-10 15:05:45

It is very helpful to students and easy to learn the concepts

html tutorial comments

Sowmya

2021-09-14 15:06:41

Great job Tutorials are easy to understand Please make use of it

html tutorial comments

Zain Khan

2021-09-18 15:07:23

Great content and customized courses.

html tutorial comments

Rudrakshi Bhatt

2021-09-09 15:08:10

Well structured coursed and explained really well!

html tutorial comments

Pavana Somashekar

2021-09-11 15:09:08

Good platform for beginners and learn a lot on this website