Buttons header small text goes here...
<!-- dropdown -->
<div class="btn-group">
<a href="#" class="btn btn-default">Dropdown</a>
<a href="#" class="btn btn-default dropdown-toggle" data-bs-toggle="dropdown">
<i class="fa fa-caret-down"></i>
</a>
<ul class="dropdown-menu dropdown-menu-end">
...
</ul>
</div>
<!-- dropup -->
<div class="btn-group dropup">
...
</div>
<a href="#" class="btn btn-primary btn-lg">Large Button</a>
<a href="#" class="btn btn-primary">Default Button</a>
<a href="#" class="btn btn-primary btn-sm">Small Button</a>
<a href="#" class="btn btn-primary btn-xs">Extra Small</a>
<a href="#" class="btn btn-default disabled">Disabled Button</a>
<a href="#" class="btn btn-default active">Active Button</a>
<a href="#" class="btn btn-primary d-block">Block Button</a>
<a href="#" class="btn btn-lg btn-primary">
<span class="d-flex align-items-center text-left">
<i class="fab fa-twitter fa-3x me-3 text-black"></i>
<span>
<span class="d-block"><b>Twitter Bootstrap</b></span>
<span class="d-block fs-12px opacity-7">Version 4.0</span>
</span>
</span>
</a>
<!-- button group vertical -->
<div class="btn-group-vertical">
<button class="btn btn-purple">Button</button>
<button class="btn btn-purple active">Button</button>
<button class="btn btn-purple">Button</button>
</div>
<!-- button group justified -->
<div class="btn-group w-100">
...
</div>