Demo - Bootstrap 5

Levels

Areas

Sections

20.12.2020 / 22.02.2021

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

List group item 1

List group item 2

List group item 3

BS5List(
  BS5ListLink(["href":"#"], "List group item 1"),
  BS5ListLink(["active"], ["href":"#", "aria-disabled":"true"], "List group item 2"),
  BS5ListLink(["disabled"], ["href":"#", "aria-disabled":"true", "tabindex":"-1"], "List group item 3"))

--- compact version ---

BS5List
.link(["href":"#"], "List group item 1")
.link(["active"], ["href":"#", "aria-disabled":"true"], "List group item 2")
.link(["disabled"], ["href":"#", "aria-disabled":"true", "tabindex":"-1"], "List group item 3")

Buttons

List group item 1

List group item 2

List group item 3

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

Default list group item

Badges

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

Custom content

Active item

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

Etiam eleifend velit leo.

Normal item

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

Etiam eleifend velit leo.

Disabled item

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

Etiam eleifend velit leo.

Tab panels

Tab pane 1 Tab pane 2 Tab pane 3

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.