List Groups & Badges

LIST GROUP

• ul class="list-group"
• li class="list-group-item
• li class="list-group-item
• li class="list-group-item
• li class="list-group-item

LIST GROUP WITH LINKS

ul class="list-group" a class="list-group-item" a class="list-group-item" a class="list-group-item" a class="list-group-item"

CONTEXTUAL CLASSES

• ul class="list-group"
• li class="list-group-item list-group-item-action"
• li class="list-group-item list-group-item-action active"
• li class="list-group-item list-group-item-action"
• li class="list-group-item list-group-item-action"

• ul class="list-group"
• li class="list-group-item list-group-item-warning"
• li class="list-group-item list-group-item-success"
• li class="list-group-item list-group-item-info"
• li class="list-group-item list-group-item-danger"

ul class="list-group" a class="list-group-item" a class="list-group-item" a class="list-group-item" a class="list-group-item"

LIST GROUP WITH BADGE

• ul class="list-group"
• li class="list-group-item justify-content-between" | span class="badge badge-default badge-pill" 30
• li class="list-group-item
• li class="list-group-item
• li class="list-group-item

CUSTOM CONTENT

1. div class="list-group"
2. a class="list-group-item list-group-action flex-column align-items-start active"
3. div class="d-flex w-100 justify-content-between"
4. h5 class="mb-1"
5. small>3 days ag
6. p class="mb-1"
7. small>By Tony Thomas

BREADCRUMB

1. Home

1. breadcrumb
2. breadcrumb-item active

1. breadcrumb
2. breadcrumb-item
3. breadcrumb-item active