/

List Groups


Default list group

  • List group item 1
  • List group item 2
  • List group item 3
BS5List(
  BS5ListItem("List group item 1"),
  BS5ListItem("List group item 2"),
  BS5ListItem("List group item 3"))
  
--- compact version ---

BS5List
.item("List group item 1")
.item("List group item 2")
.item("List group item 3")
<ul class="list-group">
  <li class="list-group-item">List group item 1</li>
  <li class="list-group-item">List group item 2</li>
  <li class="list-group-item">List group item 3</li>
</ul>

List group with an active item

  • List group item one
  • List group item two
  • List group item three
BS5List(
  BS5ListItem("List group item 1"),
  BS5ListItem(["active"], ["aria-current":"true"], "List group item 2"),
  BS5ListItem("List group item 3"))
  
--- compact version ---

BS5List
.item("List group item 1")
.item(["active"], ["aria-current":"true"], "List group item 2")
.item("List group item 3")
<ul class="list-group">
  <li class="list-group-item">List group item 1</li>
  <li class="active list-group-item" aria-current="true">List group item 2</li>
  <li class="list-group-item">List group item 3</li>
</ul>

List group with a disabled item

  • List group item 1
  • List group item 2
  • List group item 3
BS5List(
  BS5ListItem("List group item 1"),
  BS5ListItem(["disabled"], ["aria-disabled":"true"], "List group item 2"),
  BS5ListItem("List group item 3"))
  
--- compact version ---

BS5List
  .item("List group item 1")
  .item(["disabled"], ["aria-disabled":"true"], "List group item 2")
  .item("List group item 3")
<ul class="list-group">
  <li class="list-group-item">List group item 1</li>
  <li class="disabled list-group-item" aria-disabled="true">List group item 2</li>
  <li class="list-group-item">List group item 3</li>
</ul>

Working with Links

Buttons

BS5List(
  BS5ButtonLink("List group item 1"),
  BS5ButtonLink(["active"], ["aria-current":"true"], "List group item 2"),
  BS5ButtonLink(["diaabled"], ["aria-current":"true"], "List group item 3"))

--- compact version ---

BS5List
.button("List group item 1")
.button(["active"], ["aria-current":"true"], "List group item 2")
.button(["disabled"], ["aria-disabled":"true"], "List group item 3")

Flush

  • List group item 1
  • List group item 2
  • List group item 3
BS5List(["list-group-flush"],
  BS5ListItem("List group item 1"),
  BS5ListItem("List group item 2"),
  BS5ListItem("List group item 3"))

--- compact version ---

BS5List(["list-group-flush"])
.item("List group item 1")
.item("List group item 2")
.item("List group item 3")
<ul class="list-group list-group-flush">
  <li class="list-group-item">List group item 1</li>
  <li class="list-group-item">List group item 2</li>
  <li class="list-group-item">List group item 3</li>
</ul>

Horizontal

Using breakpoints with list groups

  • List group item 1
  • List group item 2
  • List group item 3

Sizes small and up (sm)

  • List group item 1
  • List group item 2
  • List group item 3

Sizes medium and up (md)

  • List group item 1
  • List group item 2
  • List group item 3

Sizes large and up (lg)

  • List group item 1
  • List group item 2
  • List group item 3

Sizes extra Large and up (xl)

  • List group item 1
  • List group item 2
  • List group item 3

Defining equal-width list group item

All breakpoints

  • List group item 1
  • List group item 2
  • List group item 3

Using colors in Listgroups

All breakpoints

  • List group item 1
  • List group item 2
  • List group item 3

Normal list group

  • Default list group item
  • Primary
  • Secondary
  • Succcess
  • Danger
  • Warning
  • Info
  • Light
  • Dark

List group with links

Badges

  • List group item one#
  • List group item one##
  • List group item one###

Tab panels

Tab pane 1: Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.
Tab pane 2: Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.
Tab pane 3: Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.