Bootstrap class: .list-group

<ul class="list-group">
  <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>

Preview

Morbi leo risus
Porta ac consectetur ac
Vestibulum at eros

Use Shuffle AI to build your own Bootstrap templates

Quickly design stunning Bootstrap templates with the power of Shuffle AI — no coding required.

Check .list-group in a real project

Click one of the examples listed below to open the Shuffle Visual Editor with the UI library that uses the selected component.

Open in Visual Editor →

Tips 💡

You don't need to remember all CSS classes. Just use the Bootstrap Editor instead.

Sass source

/* _card.scss:78 */
+ .list-group {
  .list-group-item:first-child {
    border-top: 0;
  }

/* _list-group.scss:5 */
.list-group {
  display: flex;
  flex-direction: column;

  // No need to set list-style: none; since .list-group-item is block level
  padding-left: 0; // reset padding because ul and ol
  margin-bottom: 0;
}

Uses variables

/* _card.scss:78 */


/* _list-group.scss:5 */