Buy Now
Menu
 
Preview Download

List Group

The Qoduby template supports the List Group component that comes with Bootstrap. You can take a look at examples of this below.

Also check out the Bootstrap List Group documentation for more information. https://getbootstrap.com/docs/5.3/components/list-group/

Single Button
  • An item
  • A second item
  • A third item
  • A fourth item
  • And a fifth one
										
<ul class="list-group">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
  <li class="list-group-item">A fourth item</li>
  <li class="list-group-item">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 active" aria-current="true">An active item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
  <li class="list-group-item">A fourth item</li>
  <li class="list-group-item">And a fifth one</li>
</ul>
Links Items
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 active" aria-current="true">
    The current link item
  </a>
  <a href="#" class="list-group-item list-group-item-action">A second link item</a>
  <a href="#" class="list-group-item list-group-item-action">A third link item</a>
  <a href="#" class="list-group-item list-group-item-action">A fourth link item</a>
  <a class="list-group-item list-group-item-action disabled">A disabled link item</a>
</div>
2023© Qoduby