List

Basic List Group

  • An item
  • A second item
  • A third item
  • A fourth item
  • And a fifth one

	<ul class="list-group">
		<li class="list-group-item fs-14 text-body">An item</li>
		<li class="list-group-item fs-14 text-body">A second item</li>
		<li class="list-group-item fs-14 text-body">A third item</li>
		<li class="list-group-item fs-14 text-body">A fourth item</li>
		<li class="list-group-item fs-14 text-body">And a fifth one</li>
	</ul>

Active items

  • An active item
  • A second item
  • A third item
  • A fourth item
  • And a fifth one

	<ul class="list-group">
		<li class="list-group-item fs-14 text-white active" aria-current="true">An active item</li>
		<li class="list-group-item fs-14 text-body">A second item</li>
		<li class="list-group-item fs-14 text-body">A third item</li>
		<li class="list-group-item fs-14 text-body">A fourth item</li>
		<li class="list-group-item fs-14 text-body">And a fifth one</li>
	</ul>

Disabled items

  • A disabled item
  • A second item
  • A third item
  • A fourth item
  • And a fifth one

	<ul class="list-group">
		<li class="list-group-item fs-14 text-body disabled" aria-disabled="true">A disabled item</li>
		<li class="list-group-item fs-14 text-body">A second item</li>
		<li class="list-group-item fs-14 text-body">A third item</li>
		<li class="list-group-item fs-14 text-body">A fourth item</li>
		<li class="list-group-item fs-14 text-body">And a fifth one</li>
	</ul>

Links and buttons

The current link item A second link item A third link item A fourth link item A disabled link item 

	<div class="list-group">
		<a href="#" class="list-group-item list-group-item-action text-white fs-14 active" aria-current="true">
			The current link item
		</a>
		<a href="#" class="list-group-item list-group-item-action text-body fs-14">A second link item</a>
		<a href="#" class="list-group-item list-group-item-action text-body fs-14">A third link item</a>
		<a href="#" class="list-group-item list-group-item-action text-body fs-14">A fourth link item</a>
		<a class="list-group-item list-group-item-action disabled text-body fs-14" aria-disabled="true">A disabled link item</a>
	</div>

Flush List

  • An item
  • A second item
  • A third item
  • A fourth item
  • And a fifth one

	<ul class="list-group list-group-flush">
		<li class="list-group-item fs-14 text-body">An item</li>
		<li class="list-group-item fs-14 text-body">A second item</li>
		<li class="list-group-item fs-14 text-body">A third item</li>
		<li class="list-group-item fs-14 text-body">A fourth item</li>
		<li class="list-group-item fs-14 text-body">And a fifth one</li>
	</ul>

Numbered List

  1. A list item
  2. A list item
  3. A list item

	<ol class="list-group list-group-numbered">
		<li class="list-group-item fs-14 text-body">A list item</li>
		<li class="list-group-item fs-14 text-body">A list item</li>
		<li class="list-group-item fs-14 text-body">A list item</li>
	</ol>

Numbered List With Badges

  1. Subheading
    Content for list item
    14
  2. Subheading
    Content for list item
    14
  3. Subheading
    Content for list item
    14 

	<ol class="list-group list-group-numbered">
		<li class="list-group-item d-flex justify-content-between align-items-start">
			<div class="ms-2 me-auto fs-14 text-body">
				<div class="fw-bold text-dark">Subheading</div>
				Content for list item
			</div>
			<span class="badge bg-primary rounded-pill">14</span>
		</li>
		<li class="list-group-item d-flex justify-content-between align-items-start">
			<div class="ms-2 me-auto fs-14 text-body">
				<div class="fw-bold text-dark">Subheading</div>
				Content for list item
			</div>
			<span class="badge bg-primary rounded-pill">14</span>
		</li>
		<li class="list-group-item d-flex justify-content-between align-items-start">
			<div class="ms-2 me-auto fs-14 text-body">
				<div class="fw-bold text-dark">Subheading</div>
				Content for list item
			</div>
			<span class="badge bg-primary rounded-pill">14</span>
		</li>
	</ol>

Horizontal List

  • An item
  • A second item
  • A third item
  • An item
  • A second item
  • A third item
  • An item
  • A second item
  • A third item
  • An item
  • A second item
  • A third item
  • An item
  • A second item
  • A third item
  • An item
  • A second item
  • A third item

	<ul class="list-group list-group-horizontal">
		<li class="list-group-item fs-14 text-body">An item</li>
		<li class="list-group-item fs-14 text-body">A second item</li>
		<li class="list-group-item fs-14 text-body">A third item</li>
	</ul>
	<ul class="list-group list-group-horizontal-sm">
		<li class="list-group-item fs-14 text-body">An item</li>
		<li class="list-group-item fs-14 text-body">A second item</li>
		<li class="list-group-item fs-14 text-body">A third item</li>
	</ul>
	<ul class="list-group list-group-horizontal-md">
		<li class="list-group-item fs-14 text-body">An item</li>
		<li class="list-group-item fs-14 text-body">A second item</li>
		<li class="list-group-item fs-14 text-body">A third item</li>
	</ul>
	<ul class="list-group list-group-horizontal-lg">
		<li class="list-group-item fs-14 text-body">An item</li>
		<li class="list-group-item fs-14 text-body">A second item</li>
		<li class="list-group-item fs-14 text-body">A third item</li>
	</ul>
	<ul class="list-group list-group-horizontal-xl">
		<li class="list-group-item fs-14 text-body">An item</li>
		<li class="list-group-item fs-14 text-body">A second item</li>
		<li class="list-group-item fs-14 text-body">A third item</li>
	</ul>
	<ul class="list-group list-group-horizontal-xxl">
		<li class="list-group-item fs-14 text-body">An item</li>
		<li class="list-group-item fs-14 text-body">A second item</li>
		<li class="list-group-item fs-14 text-body">A third item</li>
	</ul>

Variants List

  • A simple default list group item
  • A simple primary list group item
  • A simple secondary list group item
  • A simple success list group item
  • A simple danger list group item
  • A simple warning list group item
  • A simple info list group item
  • A simple light list group item
  • A simple dark list group item

	<ul class="list-group">
		<li class="list-group-item fs-14">A simple default list group item</li>

		<li class="list-group-item list-group-item-primary fs-14">A simple primary list group item</li>
		<li class="list-group-item list-group-item-secondary fs-14">A simple secondary list group item</li>
		<li class="list-group-item list-group-item-success fs-14">A simple success list group item</li>
		<li class="list-group-item list-group-item-danger fs-14">A simple danger list group item</li>
		<li class="list-group-item list-group-item-warning fs-14">A simple warning list group item</li>
		<li class="list-group-item list-group-item-info fs-14">A simple info list group item</li>
		<li class="list-group-item list-group-item-light fs-14">A simple light list group item</li>
		<li class="list-group-item list-group-item-dark fs-14">A simple dark list group item</li>
	</ul>

For links and buttons

A simple default list group item A simple primary list group item A simple secondary list group item A simple success list group item A simple danger list group item A simple warning list group item A simple info list group item A simple light list group item A simple dark list group item 

	<div class="list-group">
		<a href="#" class="list-group-item list-group-item-action fs-14">A simple default list group item</a>

		<a href="#" class="list-group-item list-group-item-action list-group-item-primary fs-14">A simple primary list group item</a>
		<a href="#" class="list-group-item list-group-item-action list-group-item-secondary fs-14">A simple secondary list group item</a>
		<a href="#" class="list-group-item list-group-item-action list-group-item-success fs-14">A simple success list group item</a>
		<a href="#" class="list-group-item list-group-item-action list-group-item-danger fs-14">A simple danger list group item</a>
		<a href="#" class="list-group-item list-group-item-action list-group-item-warning fs-14">A simple warning list group item</a>
		<a href="#" class="list-group-item list-group-item-action list-group-item-info fs-14">A simple info list group item</a>
		<a href="#" class="list-group-item list-group-item-action list-group-item-light fs-14">A simple light list group item</a>
		<a href="#" class="list-group-item list-group-item-action list-group-item-dark fs-14">A simple dark list group item</a>
	</div>

Custom Content List

List group item heading
3 days ago

Some placeholder content in a paragraph.

And some small print.
List group item heading
3 days ago

Some placeholder content in a paragraph.

And some muted small print.
List group item heading
3 days ago

Some placeholder content in a paragraph.

And some muted small print. 

	<div class="list-group">
		<a href="#" class="list-group-item list-group-item-action active" aria-current="true">
			<div class="d-flex w-100 justify-content-between">
				<h5 class="mb-1 text-white">List group item heading</h5>
				<small>3 days ago</small>
			</div>
			<p class="mb-1">Some placeholder content in a paragraph.</p>
			<small>And some small print.</small>
		</a>
		<a href="#" class="list-group-item list-group-item-action">
			<div class="d-flex w-100 justify-content-between">
				<h5 class="mb-1">List group item heading</h5>
				<small class="text-body-secondary">3 days ago</small>
			</div>
			<p class="mb-1">Some placeholder content in a paragraph.</p>
			<small class="text-body-secondary">And some muted small print.</small>
		</a>
		<a href="#" class="list-group-item list-group-item-action">
			<div class="d-flex w-100 justify-content-between">
				<h5 class="mb-1">List group item heading</h5>
				<small class="text-body-secondary">3 days ago</small>
			</div>
			<p class="mb-1">Some placeholder content in a paragraph.</p>
			<small class="text-body-secondary">And some muted small print.</small>
		</a>
	</div>

Checkboxes & radios


	<ul class="list-group mb-25">
		<li class="list-group-item">
			<input class="form-check-input me-1" type="checkbox" value="" id="firstCheckbox">
			<label class="form-check-label fs-14 text-body" for="firstCheckbox">First checkbox</label>
		</li>
		<li class="list-group-item">
			<input class="form-check-input me-1" type="checkbox" value="" id="secondCheckbox">
			<label class="form-check-label fs-14 text-body" for="secondCheckbox">Second checkbox</label>
		</li>
		<li class="list-group-item">
			<input class="form-check-input me-1" type="checkbox" value="" id="thirdCheckbox">
			<label class="form-check-label fs-14 text-body" for="thirdCheckbox">Third checkbox</label>
		</li>
	</ul>

	<ul class="list-group">
		<li class="list-group-item">
			<input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="firstRadio" checked>
			<label class="form-check-label fs-14 text-body" for="firstRadio">First radio</label>
		</li>
		<li class="list-group-item">
			<input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="secondRadio">
			<label class="form-check-label fs-14 text-body" for="secondRadio">Second radio</label>
		</li>
		<li class="list-group-item">
			<input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="thirdRadio">
			<label class="form-check-label fs-14 text-body" for="thirdRadio">Third radio</label>
		</li>
	</ul>

Copyright © Dess Is Proudly Owned by Coder Deves

Theme System