List Menu
- An active item
- Item - 1
- Item - 2
- Item - 3
- Item - 4
- Item - 1
- Item - 2
- Item - 3
- Item - 4
Group Heading - 1
Group Heading - 2
Copy
<div class="row">
<div class="col-lg-4 mt-3">
<ul class="list-group card">
<h6>Group Heading - 1 </h6>
<li class="list-group-item active">An active item</li>
<li class="list-group-item">Item - 1 </li>
<li class="list-group-item">Item - 2</li>
<li class="list-group-item">Item - 3</li>
<li class="list-group-item">Item - 4</li>
<h6>Group Heading - 2 </h6>
<li class="list-group-item">Item - 1 </li>
<li class="list-group-item">Item - 2</li>
<li class="list-group-item">Item - 3</li>
<li class="list-group-item">Item - 4</li>
</ul>
</div>
</div>
Copy
.list-group-item+.list-group-item {
border-bottom: none;
}
.list-group-item {
font-size: 14px;
padding: 10px 15px;
border: none;
}
.list-group-item.active {
background: #167DF5;
}
.list-group-item:hover {
background: #f6f9ff;
cursor: pointer;
color: #212529;
}