Bootstrap 5 Learning Kit

Page Navigation:

List group

Default

  • List group item one
  • List group item two
  • List group item three

Active item

  • List group item one
  • List group item two
  • List group item three

Disabled item

  • List group item one
  • List group item two
  • List group item three

Links

List group item one List group item two List group item three

Buttons

Flush

  • List group item one
  • List group item two
  • List group item three

Numbered

  1. List group item one
  2. List group item two
  3. List group item three

Horizontal

All breakpoints

  • List group item one
  • List group item two
  • List group item three

Small and up

  • List group item one
  • List group item two
  • List group item three

Medium and up

  • List group item one
  • List group item two
  • List group item three

Large and up

  • List group item one
  • List group item two
  • List group item three

Extra large and up

  • List group item one
  • List group item two
  • List group item three

Equal-width list group item

  • List group item one
  • List group item two
  • List group item three

Contextual color classes

Normal list group

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

List group with links

Default list group item Primary list group item Secondary list group item Success list group item Danger list group item Warning list group item Info list group item Light list group item Dark list group item

Badges

  • List group item one #
  • List group item two ##
  • List group item three ###

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.

Checks and radios

Checks

Radios

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.