Bootstrap 4 tutorial

Components (7): List group

Language

English (英語)Japanese (日本語)

List group

Basic example

• Cras justo odio
• Dapibus ac facilisis in
• Morbi leo risus
• Porta ac consectetur ac
• Vestibulum at eros

• List group ul.list-group Attribute
  • Attribute (sets width) style="width: 320px;"
  • Item li.list-group-item
    • Text (e.g.) Cras justo odio

Active items

Add .active to an active item. See example below (set to the first item).

• Cras justo odio
• Dapibus ac facilisis in
• Morbi leo risus
• Porta ac consectetur ac
• Vestibulum at eros

Disabled items

Add .disabled to a disabled item. See example below (set to the first item).

• Cras justo odio
• Dapibus ac facilisis in
• Morbi leo risus
• Porta ac consectetur ac
• Vestibulum at eros

Links and buttons

An interactive list group can be built with a parent div.list-group and items (a|button).list-group-item

• List group div.list-group
  • Item (a|button).list-group-item Attribute
    • Add .list-group-item-action to respond to hover

Example for a : a.list-group-item.list-group-item-action(.active)

Cras justo odioDapibus ac facilisis inMorbi leo risusPorta ac consectetur acVestibulum at eros

Example for button : button.list-group-item.list-group-item-action(.active)

Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum at eros

Flush

Add .list-group-flush to remove rounded border.

ul.list-group.list-group-flush

• Cras justo odio
• Dapibus ac facilisis in
• Morbi leo risus
• Porta ac consectetur ac
• Vestibulum at eros

Contextual classes

Add .list-group-item-(primary|secondary|success|...) to items.

• (default) Dapibus ac facilisis in
• .list-group-item-primary This is a primary list group item
• .list-group-item-secondary This is a secondary list group item
• .list-group-item-success This is a success list group item
• .list-group-item-danger This is a danger list group item
• .list-group-item-warning This is a warning list group item
• .list-group-item-info This is a info list group item
• .list-group-item-light This is a light list group item
• .list-group-item-dark This is a dark list group item

Example with adding .list-item-group-action (responds to hover)

• (default) Dapibus ac facilisis in
• .list-group-item-primary This is a primary list group item
• .list-group-item-secondary This is a secondary list group item
• .list-group-item-success This is a success list group item
• .list-group-item-danger This is a danger list group item
• .list-group-item-warning This is a warning list group item
• .list-group-item-info This is a info list group item
• .list-group-item-light This is a light list group item
• .list-group-item-dark This is a dark list group item

With badges

Example using badges

• Cras justo odio14
• Dapibus ac facilisis in2
• Morbi leo risus1

• ul.list-group Attribute
  • Sets width style="width: 320px;"
  • Items li.list-group-item Attributes
    • Uses flex .d-flex (see Flex)
    • Horizontal alignment .justify-content-between
    • Vertical alignment .align-items-center
    • Text (e.g.) Cras justo odio
    • Pill badge span.badge.badge-primary.badge-pill
      • Text (e.g.) 14

Custom content

Example using Flex utilities

• List group div.list-group
  • Item a Attributes
    • Class .active (first item only)
    • Items to top-down .flex-column
    • Aligned to top .align-items-start
    • First row div Attributes
      • Uses flex .d-flex
      • Force maximum width to the parent .w-100
      • Arrange inner items at start and end edges .justify-content-between
      • h5 (justified to leftmost)
        • Text List group item heading ...
      • small (justified to rightmost)
        • Text 3 days ago
    • Second row (paragraph) p
      • Text Donec id elit non mi porta gravida at eget ...
    • Third row (small text) small
      • Text Donec id elit non mi porta.

JavaScript behavior (tabbable panes)

You can build tabbable panes with a list group (using bootstrap.js) as follows.

• List group div.list-group Attribute
  • Accessibility attribute role="tablist"
  • Item a.list-group-item(.list-group-item-action)? Attributes
    • Set .active to an initially-visible item
    • Attribute id="{item-id}"
    • Attribute data-toggle="list"
    • Attribute href="#{content-id}"
    • Accessibility attribute role="tab"
    • Accessibility attribute aria-controls="{content-id}"
• Content-side div.tab-content
  • Content item div.tab-pane(.fade) Attributes
    • Add.fade for animation (fade in/out) effect
    • Set .show.active to an initially-visible item
    • Attribute id="{content-id}"
    • Accessibility attribute role="tabpanel"
    • Accessibility attribute aria-labelledby="{item-id}"