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
Image placeholder
Heather Wright

In the mood for creating something big

● In a meeting
Image placeholder
James Lewis

You can run, but you can't hide

● Offline 
<div class="list-group">
    
    
    
    
    <div class="list-group-item">
        <div class="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-n2">
        <a href="#!" class="d-block h6 mb-0">John Sullivan</a><p class="card-text text-sm text-muted mb-0">
            Working remotely from Starbucks
        </p><div>
            <span class="text-sm text-success">●</span>
            <small>Online</small>
        </div>
    </div>
    <div class="col-auto">
        <button type="button" class="btn btn-xs btn-secondary btn-icon">
            <span class="btn-inner--icon"><i class="far fa-plus"></i></span>
            <span class="btn-inner--text">Add</span>
        </button>
    </div>
</div>

    </div>
    
    
    <div class="list-group-item">
        <div class="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-n2">
        <a href="#!" class="d-block h6 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-sm text-warning">●</span>
            <small>In a meeting</small>
        </div>
    </div>
    <div class="col-auto">
        <button type="button" class="btn btn-xs btn-secondary btn-icon">
            <span class="btn-inner--icon"><i class="far fa-plus"></i></span>
            <span class="btn-inner--text">Add</span>
        </button>
    </div>
</div>

    </div>
    
    
    <div class="list-group-item">
        <div class="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-n2">
        <a href="#!" class="d-block h6 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-sm text-danger">●</span>
            <small>Offline</small>
        </div>
    </div>
    <div class="col-auto">
        <button type="button" class="btn btn-xs btn-secondary btn-icon">
            <span class="btn-inner--icon"><i class="far fa-plus"></i></span>
            <span class="btn-inner--text">Add</span>
        </button>
    </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="far 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 class="list-group-item">
        
<div class="d-flex">
	<div>
		<i class="far 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 class="list-group-item">
        
<div class="d-flex">
	<div>
		<i class="far 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>
### 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 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 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>
### Projects
Image placeholder
Purpose Website UI
Pending
20 Apr
Image placeholder
Website Redesign
Completed
21 Apr
Image placeholder
Webpixels Website
Delayed
23 Apr 
<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 Website UI</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 Apr
            </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>
                21 Apr
            </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</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>
                23 Apr
            </div>
        </div>
    </div>
</div>

    </div>
    
</div>
Image placeholder
Purpose Website UI
Development
$2500
Image placeholder
Website Redesign
Identity
$1800
Image placeholder
Webpixels Website
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 Website UI</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</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 Website UI
Development
Image placeholder
Website Redesign
Identity
Image placeholder
Webpixels Website
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 Website UI</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</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>
Summary