List Groups

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.

Minimal

  • Cras justo odio
  • Dapibus ac facilisis in
  • Cras justo odio
  • Dapibus ac facilisis in
<ul class="list-group list-group-minimal">
  <li class="list-group-item d-flex align-items-center">
    <div>
      <i class="fs-24 icon-check2 bg-primary text-white icon-boxed mr-2"></i>
    </div>
    Cras justo odio
  </li>
  <li class="list-group-item d-flex align-items-center">
    <div>
      <i class="fs-24 icon-check2 bg-primary text-white icon-boxed mr-2"></i>
    </div>
    Dapibus ac facilisis in
  </li>
</ul>

Cards

  • Cras justo odio New
  • Dapibus ac facilisis in
  • Cras justo odio
  • Dapibus ac facilisis in
<ul class="list-group list-group-lines">
  <li class="list-group-item d-flex align-items-center boxed">
    <i class="icon-check2 mr-2 text-primary fs-24"></i>
    Cras justo odio
    <span class="badge badge-green">New</span>
  </li>
  <li class="list-group-item d-flex align-items-center">
    <i class="icon-check2 mr-2 text-primary fs-24"></i>
    Dapibus ac facilisis in
  </li>
</ul>
.boxed Add to .list-group-item to highlight it.