v5.x | Lists

# List Items List Style HTML Element Borders Orientation

Add Hover

Add Active Item

Add Badges

Include Disabled Item

Add Numbers

example

An item 99 An item 99 An item 99

An item
A second item
A disabled item

An item
An item
An item

Title

Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic vero est corporis optio! Laudantium nisi necessitatibus exercitationem consequatur quisquam dignissimos.
TagTag
today
Title

Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic vero est corporis optio! Laudantium nisi necessitatibus exercitationem consequatur quisquam dignissimos.
TagTag
today

---- Numbered, Flush List --------
<div class="d-flex justify-content-between px-4 pt-4 pb-2">
<div>
<button type="text" class="btn btn-primary" id="beautify">
   <i class="fad fa-indent me-2"></i>Prettify</button>
<button type="text" class="btn btn-primary" id="update-preview">
   <i class="fad fa-angle-double-up me-2"></i>Update</button>
</div>
<div>
<button type="text" class="btn btn-primary copier" data-clipboard-target="#code"
   data-toggle="tooltip" data-placement="bottom"><i
      class="fad fa-clone me-2"></i>Copy</button>
</div>
</div>
</div>
---- Standard bordered list with badges --------

<div class="list-group">
<a href="#"
   class="list-group-item d-flex justify-content-between align-items-center py-2 list-group-item-action active"
   aria-current="true">
   An item
   <span class="badge bg-light text-dark rounded-pill">99</span>
</a>
<a href="#" class="list-group-item d-flex justify-content-between align-items-center py-2 list-group-item-action"
   aria-current="false">
   An item
   <span class="badge bg-light text-dark rounded-pill">99</span>
</a>
<a href="#" class="list-group-item d-flex justify-content-between align-items-center py-2 list-group-item-action"
   aria-current="false">
   An item
   <span class="badge bg-light text-dark rounded-pill">99</span>
</a>
</div>
---- Horizontal list --------
<ul class="list-group list-group-horizontal">
   <li class="list-group-item list-group-item-action active" aria-current="true">An item</li>
   <li class="list-group-item list-group-item-action" aria-current="false">An item</li>
   <li class="list-group-item list-group-item-action" aria-current="false">An item</li>
</ul>
---- Complex list --------                        
<ul class="list-group my-4">
<li class="list-group-item d-flex justify-content-between align-items-start">
   <div class="ms-2 me-auto">
      <div class="fw-bold">Title</div>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic vero est corporis optio!
         Laudantium nisi necessitatibus exercitationem consequatur quisquam dignissimos.</p>
      <span class="badge text-bg-light rounded-pill">Tag</span><span
         class="badge text-bg-light rounded-pill">Tag</span>
   </div>
   <small>today</small>
</li>
<li class="list-group-item d-flex justify-content-between align-items-start">
   <div class="ms-2 me-auto">
      <div class="fw-bold">Title</div>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic vero est corporis optio!
         Laudantium nisi necessitatibus exercitationem consequatur quisquam dignissimos.</p>
      <span class="badge text-bg-light rounded-pill">Tag</span><span
         class="badge text-bg-light rounded-pill">Tag</span>
   </div>
   <small>today</small>
</li> </ul>

Custom JS

There are many ways to add auto-incrementing numbers. One way that has worked for me is to add your numbers dynamically with javascript for any element with the .step class after the DOM has loaded. This is a solution which worked for me.

// Add the step numbers with jQuery
$(".step").each(function (index) {
$(this).prepend(`${index + 1}`);                  
});

// Add the step numbers with vanilla JS
document.querySelectorAll('.step').forEach(function (element, index) {
element.insertAdjacentText('afterbegin', `${index + 1}`);
});

Listsv5.x

Custom JS