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.

Bootstrap Documentation

Basic

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.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros
<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.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros
<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>

With badges

  • Cras justo odio 14
  • Dapibus ac facilisis in 2
  • Morbi leo risus 1 
<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>

Examples

Here are some more advanced custom examples we’ve made in order to bring more functionality with some really cool list group examples.

Online status

Image placeholder
John Sullivan

Working remotely from Starbucks

● Online
Action Another action Something else here
Image placeholder
Heather Wright

In the mood for creating something big

● In a meeting
Action Another action Something else here
Image placeholder
James Lewis

You can run, but you can't hide

● Offline
Action Another action Something else here 
<div class="list-group">
    
    
    
    
    <div class="list-group-item">
        <div class="row flex-column flex-md-row align-items-center">
    <div class="col-auto">
        <!-- Avatar -->
        
<a href="#" class="avatar rounded-circle">
    <img alt="Image placeholder" src="../../assets/img/theme/light/team-1-800x800.jpg" class="">

</a>
    </div>
    <div class="col ml-md-n2 text-center text-md-left">
        <a href="#!" class="h6 text-sm mb-0">John Sullivan</a><p class="card-text text-sm text-muted mb-0">
            Working remotely from Starbucks
        </p><div>
            <span class="text-success">●</span>
            <small>Online</small>
        </div>
    </div>
    <hr class="divider divider-fade my-3 d-md-none" />
    <div class="col-12 col-md-auto d-flex justify-content-between align-items-center">
        <button type="button" class="btn btn-sm btn-secondary">Add</button>
        <!-- Dropdown -->
        <div class="dropdown ml-2">
            <a href="#" class="action-item" role="button" data-toggle="dropdown" aria-haspopup="true" data-expanded="false">
                <i class="fas fa-ellipsis-v"></i>
            </a>
            <div class="dropdown-menu dropdown-menu-right">
                <a href="#!" class="dropdown-item">
                    Action
                </a>
                <a href="#!" class="dropdown-item">
                    Another action
                </a>
                <a href="#!" class="dropdown-item">
                    Something else here
                </a>
            </div>
        </div>
    </div>
</div>

    </div>
    
    
    <div class="list-group-item">
        <div class="row flex-column flex-md-row align-items-center">
    <div class="col-auto">
        <!-- Avatar -->
        
<a href="#" class="avatar rounded-circle">
    <img alt="Image placeholder" src="../../assets/img/theme/light/team-2-800x800.jpg" class="">

</a>
    </div>
    <div class="col ml-md-n2 text-center text-md-left">
        <a href="#!" class="h6 text-sm mb-0">Heather Wright</a><p class="card-text text-sm text-muted mb-0">
            In the mood for creating something big
        </p><div>
            <span class="text-warning">●</span>
            <small>In a meeting</small>
        </div>
    </div>
    <hr class="divider divider-fade my-3 d-md-none" />
    <div class="col-12 col-md-auto d-flex justify-content-between align-items-center">
        <button type="button" class="btn btn-sm btn-secondary">Add</button>
        <!-- Dropdown -->
        <div class="dropdown ml-2">
            <a href="#" class="action-item" role="button" data-toggle="dropdown" aria-haspopup="true" data-expanded="false">
                <i class="fas fa-ellipsis-v"></i>
            </a>
            <div class="dropdown-menu dropdown-menu-right">
                <a href="#!" class="dropdown-item">
                    Action
                </a>
                <a href="#!" class="dropdown-item">
                    Another action
                </a>
                <a href="#!" class="dropdown-item">
                    Something else here
                </a>
            </div>
        </div>
    </div>
</div>

    </div>
    
    
    <div class="list-group-item">
        <div class="row flex-column flex-md-row align-items-center">
    <div class="col-auto">
        <!-- Avatar -->
        
<a href="#" class="avatar rounded-circle">
    <img alt="Image placeholder" src="../../assets/img/theme/light/team-3-800x800.jpg" class="">

</a>
    </div>
    <div class="col ml-md-n2 text-center text-md-left">
        <a href="#!" class="h6 text-sm mb-0">James Lewis</a><p class="card-text text-sm text-muted mb-0">
            You can run, but you can't hide
        </p><div>
            <span class="text-danger">●</span>
            <small>Offline</small>
        </div>
    </div>
    <hr class="divider divider-fade my-3 d-md-none" />
    <div class="col-12 col-md-auto d-flex justify-content-between align-items-center">
        <button type="button" class="btn btn-sm btn-secondary">Add</button>
        <!-- Dropdown -->
        <div class="dropdown ml-2">
            <a href="#" class="action-item" role="button" data-toggle="dropdown" aria-haspopup="true" data-expanded="false">
                <i class="fas fa-ellipsis-v"></i>
            </a>
            <div class="dropdown-menu dropdown-menu-right">
                <a href="#!" class="dropdown-item">
                    Action
                </a>
                <a href="#!" class="dropdown-item">
                    Another action
                </a>
                <a href="#!" class="dropdown-item">
                    Something else here
                </a>
            </div>
        </div>
    </div>
</div>

    </div>
    
</div>

Notifications

Mail sent to Alex Michael
2 hrs ago
You liked a comment from Sandra Wayne
3 hrs ago
New likes from Jason Miller
5 hrs ago 
<div class="list-group">
    
    
    <div class="list-group-item">
        
<div class="d-flex">
	<div>
		<i class="fas fa-bell mr-3"></i>
	</div>
	<div>
		<div class="text-sm lh-150">
			Mail sent to <span class="text-dark font-weight-bold">Alex Michael</span>
		</div>
		<small class="d-block text-muted">2 hrs ago</small>
	</div>
</div>

    </div>
    
    <div class="list-group-item">
        
<div class="d-flex">
	<div>
		<i class="fas fa-thumbs-up mr-3"></i>
	</div>
	<div>
		<div class="text-sm lh-150">
			You liked a comment from <span class="text-dark font-weight-bold">Sandra Wayne</span>
		</div>
		<small class="d-block text-muted">3 hrs ago</small>
	</div>
</div>

    </div>
    
    <div class="list-group-item">
        
<div class="d-flex">
	<div>
		<i class="fas fa-thumbs-up mr-3"></i>
	</div>
	<div>
		<div class="text-sm lh-150">
			New likes from <span class="text-dark font-weight-bold">Jason Miller</span>
		</div>
		<small class="d-block text-muted">5 hrs ago</small>
	</div>
</div>

    </div>
    
</div>

Messages

AM
Alex Michael 2 hrs ago

Some quick example text to build on the card title.

SW
Sandra Wayne 3 hrs ago

Some quick example text to build on the card title.

JM
Jason Miller 5 hrs ago

Some quick example text to build on the card title. 

<div class="list-group">
    
    
    <div class="list-group-item">
        
<div class="d-flex align-items-center" data-toggle="tooltip" data-placement="right" data-title="2 hrs ago">
    <div>
        
<span class="avatar bg-primary text-white rounded-circle">AM</span>
    </div>
    <div class="flex-fill ml-3">
		<div class="h6 text-sm mb-0">Alex Michael <small class="float-right text-muted">2 hrs ago</small></div>
		<p class="text-sm lh-140 mb-0">
			Some quick example text to build on the card title.
		</p>
    </div>
</div>

    </div>
    
    <div class="list-group-item">
        
<div class="d-flex align-items-center" data-toggle="tooltip" data-placement="right" data-title="3 hrs ago">
    <div>
        
<span class="avatar bg-warning text-white rounded-circle">SW</span>
    </div>
    <div class="flex-fill ml-3">
		<div class="h6 text-sm mb-0">Sandra Wayne <small class="float-right text-muted">3 hrs ago</small></div>
		<p class="text-sm lh-140 mb-0">
			Some quick example text to build on the card title.
		</p>
    </div>
</div>

    </div>
    
    <div class="list-group-item">
        
<div class="d-flex align-items-center" data-toggle="tooltip" data-placement="right" data-title="5 hrs ago">
    <div>
        
<span class="avatar bg-info text-white rounded-circle">JM</span>
    </div>
    <div class="flex-fill ml-3">
		<div class="h6 text-sm mb-0">Jason Miller <small class="float-right text-muted">5 hrs ago</small></div>
		<p class="text-sm lh-140 mb-0">
			Some quick example text to build on the card title.
		</p>
    </div>
</div>

    </div>
    
</div>

Projects

Image placeholder
Purpose Design System
Pending
20 Aug 2018
Image placeholder
Website redesign
Completed
20 Aug 2018
Image placeholder
Webpixels website launch
Delayed
20 Aug 2018 
<div class="list-group">
    
    
    <div class="list-group-item">
        
<div class="d-flex align-items-center justify-content-between">
    <div>
        
    <img alt="Image placeholder" src="../../assets/img/theme/light/brand-avatar-1.png" class="avatar  rounded-circle">

    </div>
    <div class="flex-fill pl-3 text-limit">
        <h6 class="progress-text mb-1 text-sm d-block text-limit">Purpose Design System</h6>
        <div class="progress progress-xs mb-0">
            <div class="progress-bar bg-warning" role="progressbar" style="width: 60%;" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
        <div class="d-flex justify-content-between text-xs text-muted text-right mt-1">
            <div>
                <span class="font-weight-bold text-warning">Pending</span>
            </div>
            <div>
                20 Aug 2018
            </div>
        </div>
    </div>
</div>

    </div>
    
    <div class="list-group-item">
        
<div class="d-flex align-items-center justify-content-between">
    <div>
        
    <img alt="Image placeholder" src="../../assets/img/theme/light/brand-avatar-2.png" class="avatar  rounded-circle">

    </div>
    <div class="flex-fill pl-3 text-limit">
        <h6 class="progress-text mb-1 text-sm d-block text-limit">Website redesign</h6>
        <div class="progress progress-xs mb-0">
            <div class="progress-bar bg-success" role="progressbar" style="width: 100%;" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
        <div class="d-flex justify-content-between text-xs text-muted text-right mt-1">
            <div>
                <span class="font-weight-bold text-success">Completed</span>
            </div>
            <div>
                20 Aug 2018
            </div>
        </div>
    </div>
</div>

    </div>
    
    <div class="list-group-item">
        
<div class="d-flex align-items-center justify-content-between">
    <div>
        
    <img alt="Image placeholder" src="../../assets/img/theme/light/brand-avatar-3.png" class="avatar  rounded-circle">

    </div>
    <div class="flex-fill pl-3 text-limit">
        <h6 class="progress-text mb-1 text-sm d-block text-limit">Webpixels website launch</h6>
        <div class="progress progress-xs mb-0">
            <div class="progress-bar bg-danger" role="progressbar" style="width: 72%;" aria-valuenow="72" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
        <div class="d-flex justify-content-between text-xs text-muted text-right mt-1">
            <div>
                <span class="font-weight-bold text-danger">Delayed</span>
            </div>
            <div>
                20 Aug 2018
            </div>
        </div>
    </div>
</div>

    </div>
    
</div>
Image placeholder
Purpose Design System
Development
$2500
Image placeholder
Website redesign
Identity
$1800
Image placeholder
Webpixels website launch
Branding
$3150 
<div class="list-group">
    
    
    <div class="list-group-item">
        
<div class="media align-items-center">
    <div class="mr-3">
        
    <img alt="Image placeholder" src="../../assets/img/theme/light/brand-avatar-1.png" class="avatar  rounded-circle">

    </div>
    <div class="media-body">
        <h6 class="text-sm d-block text-limit mb-0">Purpose Design System</h6>
        <span class="d-block text-sm text-muted">Development</span>
    </div>
    <div class="media-body text-right">
        <span class="text-sm text-dark font-weight-bold ml-3">
            $2500
        </span>
    </div>
</div>

    </div>
    
    <div class="list-group-item">
        
<div class="media align-items-center">
    <div class="mr-3">
        
    <img alt="Image placeholder" src="../../assets/img/theme/light/brand-avatar-2.png" class="avatar  rounded-circle">

    </div>
    <div class="media-body">
        <h6 class="text-sm d-block text-limit mb-0">Website redesign</h6>
        <span class="d-block text-sm text-muted">Identity</span>
    </div>
    <div class="media-body text-right">
        <span class="text-sm text-dark font-weight-bold ml-3">
            $1800
        </span>
    </div>
</div>

    </div>
    
    <div class="list-group-item">
        
<div class="media align-items-center">
    <div class="mr-3">
        
    <img alt="Image placeholder" src="../../assets/img/theme/light/brand-avatar-3.png" class="avatar  rounded-circle">

    </div>
    <div class="media-body">
        <h6 class="text-sm d-block text-limit mb-0">Webpixels website launch</h6>
        <span class="d-block text-sm text-muted">Branding</span>
    </div>
    <div class="media-body text-right">
        <span class="text-sm text-dark font-weight-bold ml-3">
            $3150
        </span>
    </div>
</div>

    </div>
    
</div>
Image placeholder
Purpose Design System
Development
Image placeholder
Website redesign
Identity
Image placeholder
Webpixels website launch
Branding 
<div class="list-group">
    
    
    <div class="list-group-item">
        
<div class="media align-items-center">
    <div class="mr-3">
        
    <img alt="Image placeholder" src="../../assets/img/theme/light/brand-avatar-1.png" class="avatar  rounded-circle">

    </div>
    <div class="media-body text-limit">
        <h6 class="text-sm d-block text-limit mb-0">Purpose Design System</h6>
        <span class="d-block text-sm text-muted">Development</span>
    </div>
    <div class="media-body text-right">
        <button type="button" class="btn btn-sm btn-secondary">Open</button>
    </div>
</div>


    </div>
    
    <div class="list-group-item">
        
<div class="media align-items-center">
    <div class="mr-3">
        
    <img alt="Image placeholder" src="../../assets/img/theme/light/brand-avatar-2.png" class="avatar  rounded-circle">

    </div>
    <div class="media-body text-limit">
        <h6 class="text-sm d-block text-limit mb-0">Website redesign</h6>
        <span class="d-block text-sm text-muted">Identity</span>
    </div>
    <div class="media-body text-right">
        <button type="button" class="btn btn-sm btn-secondary">Open</button>
    </div>
</div>


    </div>
    
    <div class="list-group-item">
        
<div class="media align-items-center">
    <div class="mr-3">
        
    <img alt="Image placeholder" src="../../assets/img/theme/light/brand-avatar-3.png" class="avatar  rounded-circle">

    </div>
    <div class="media-body text-limit">
        <h6 class="text-sm d-block text-limit mb-0">Webpixels website launch</h6>
        <span class="d-block text-sm text-muted">Branding</span>
    </div>
    <div class="media-body text-right">
        <button type="button" class="btn btn-sm btn-secondary">Open</button>
    </div>
</div>


    </div>
    
</div>