Buttons
Component 1
<a href="#0" class="btn btn-dark btn-xl rounded-pill">Get started</a>
<a href="#0" class="btn btn-dark btn-xl">Get started</a>
<a href="#0" class="btn btn-dark btn-xl rounded-0">Get started</a>
<a href="#0" class="btn btn-light btn-xl rounded-pill">Get started</a>
<a href="#0" class="btn btn-light btn-xl">Get started</a>
<a href="#0" class="btn btn-light btn-xl rounded-0">Get started</a>
Component 2
<a href="#0" class="btn btn-outline-dark btn-xl rounded-pill">Get started</a>
<a href="#0" class="btn btn-outline-dark btn-xl">Get started</a>
<a href="#0" class="btn btn-outline-dark btn-xl rounded-0">Get started</a>
<a href="#0" class="btn btn-outline-light btn-xl rounded-pill">Get started</a>
<a href="#0" class="btn btn-outline-light btn-xl">Get started</a>
<a href="#0" class="btn btn-outline-light btn-xl rounded-0">Get started</a>
Component 3
<a href="#0" class="btn btn-dark btn-xl rounded-pill">Get started <i class="ti ti-arrow-narrow-right"></i></a>
<a href="#0" class="btn btn-dark btn-xl">Get started <i class="ti ti-arrow-narrow-right"></i></a>
<a href="#0" class="btn btn-dark btn-xl rounded-0">Get started <i class="ti ti-arrow-narrow-right"></i></a>
<a href="#0" class="btn btn-light btn-xl rounded-pill">Get started <i class="ti ti-arrow-narrow-right"></i></a>
<a href="#0" class="btn btn-light btn-xl">Get started <i class="ti ti-arrow-narrow-right"></i></a>
<a href="#0" class="btn btn-light btn-xl rounded-0">Get started <i class="ti ti-arrow-narrow-right"></i></a>
Component 4
<a href="#0" class="btn btn-outline-dark btn-xl rounded-pill">Get started <i class="ti ti-arrow-narrow-right"></i></a>
<a href="#0" class="btn btn-outline-dark btn-xl">Get started <i class="ti ti-arrow-narrow-right"></i></a>
<a href="#0" class="btn btn-outline-dark btn-xl rounded-0">Get started <i class="ti ti-arrow-narrow-right"></i></a>
<a href="#0" class="btn btn-outline-light btn-xl rounded-pill">Get started <i class="ti ti-arrow-narrow-right"></i></a>
<a href="#0" class="btn btn-outline-light btn-xl">Get started <i class="ti ti-arrow-narrow-right"></i></a>
<a href="#0" class="btn btn-outline-light btn-xl rounded-0">Get started <i class="ti ti-arrow-narrow-right"></i></a>
Component 5
<a href="#0" class="btn btn-dark btn-icon-xl rounded-pill"><i class="ti ti-arrow-narrow-right"></i></a>
<a href="#0" class="btn btn-dark btn-icon-xl"><i class="ti ti-arrow-narrow-right"></i></a>
<a href="#0" class="btn btn-dark btn-icon-xl rounded-0"><i class="ti ti-arrow-narrow-right"></i></a>
<a href="#0" class="btn btn-light btn-icon-xl rounded-pill"><i class="ti ti-arrow-narrow-right"></i></a>
<a href="#0" class="btn btn-light btn-icon-xl"><i class="ti ti-arrow-narrow-right"></i></a>
<a href="#0" class="btn btn-light btn-icon-xl rounded-0"><i class="ti ti-arrow-narrow-right"></i></a>
Component 6
<a href="#0" class="btn btn-outline-dark btn-icon-xl rounded-pill"><i class="ti ti-arrow-narrow-right"></i></a>
<a href="#0" class="btn btn-outline-dark btn-icon-xl"><i class="ti ti-arrow-narrow-right"></i></a>
<a href="#0" class="btn btn-outline-dark btn-icon-xl rounded-0"><i class="ti ti-arrow-narrow-right"></i></a>
<a href="#0" class="btn btn-outline-light btn-icon-xl rounded-pill"><i class="ti ti-arrow-narrow-right"></i></a>
<a href="#0" class="btn btn-outline-light btn-icon-xl"><i class="ti ti-arrow-narrow-right"></i></a>
<a href="#0" class="btn btn-outline-light btn-icon-xl rounded-0"><i class="ti ti-arrow-narrow-right"></i></a>
Component 7
<a href="#" class="btn-link link-light link-xl">Get started <i class="ti ti-arrow-narrow-right"></i></a>
<a href="#" class="btn-link link-dark link-xl">Get started <i class="ti ti-arrow-narrow-right"></i></a>
Component 8
<a href="#0" class="btn btn-dark btn-lg rounded-pill">Get started</a>
<a href="#0" class="btn btn-dark btn-lg">Get started</a>
<a href="#0" class="btn btn-dark btn-lg rounded-0">Get started</a>
<a href="#0" class="btn btn-light btn-lg rounded-pill">Get started</a>
<a href="#0" class="btn btn-light btn-lg">Get started</a>
<a href="#0" class="btn btn-light btn-lg rounded-0">Get started</a>
Component 9
<a href="#0" class="btn btn-outline-dark btn-lg rounded-pill">Get started</a>
<a href="#0" class="btn btn-outline-dark btn-lg">Get started</a>
<a href="#0" class="btn btn-outline-dark btn-lg rounded-0">Get started</a>
<a href="#0" class="btn btn-outline-light btn-lg rounded-pill">Get started</a>
<a href="#0" class="btn btn-outline-light btn-lg">Get started</a>
<a href="#0" class="btn btn-outline-light btn-lg rounded-0">Get started</a>
Component 10
<a href="#0" class="btn btn-dark btn-lg rounded-pill">Get started <i class="ti ti-arrow-narrow-right"></i></a>
<a href="#0" class="btn btn-dark btn-lg">Get started <i class="ti ti-arrow-narrow-right"></i></a>
<a href="#0" class="btn btn-dark btn-lg rounded-0">Get started <i class="ti ti-arrow-narrow-right"></i></a>
<a href="#0" class="btn btn-light btn-lg rounded-pill">Get started <i class="ti ti-arrow-narrow-right"></i></a>
<a href="#0" class="btn btn-light btn-lg">Get started <i class="ti ti-arrow-narrow-right"></i></a>
<a href="#0" class="btn btn-light btn-lg rounded-0">Get started <i class="ti ti-arrow-narrow-right"></i></a>
Component 11
<a href="#0" class="btn btn-outline-dark btn-lg rounded-pill">Get started <i class="ti ti-arrow-narrow-right"></i></a>
<a href="#0" class="btn btn-outline-dark btn-lg">Get started <i class="ti ti-arrow-narrow-right"></i></a>
<a href="#0" class="btn btn-outline-dark btn-lg rounded-0">Get started <i class="ti ti-arrow-narrow-right"></i></a>
<a href="#0" class="btn btn-outline-light btn-lg rounded-pill">Get started <i class="ti ti-arrow-narrow-right"></i></a>
<a href="#0" class="btn btn-outline-light btn-lg">Get started <i class="ti ti-arrow-narrow-right"></i></a>
<a href="#0" class="btn btn-outline-light btn-lg rounded-0">Get started <i class="ti ti-arrow-narrow-right"></i></a>
Component 12
<a href="#0" class="btn btn-dark btn-icon-lg rounded-pill"><i class="ti ti-arrow-narrow-right"></i></a>
<a href="#0" class="btn btn-dark btn-icon-lg"><i class="ti ti-arrow-narrow-right"></i></a>
<a href="#0" class="btn btn-dark btn-icon-lg rounded-0"><i class="ti ti-arrow-narrow-right"></i></a>
<a href="#0" class="btn btn-light btn-icon-lg rounded-pill"><i class="ti ti-arrow-narrow-right"></i></a>
<a href="#0" class="btn btn-light btn-icon-lg"><i class="ti ti-arrow-narrow-right"></i></a>
<a href="#0" class="btn btn-light btn-icon-lg rounded-0"><i class="ti ti-arrow-narrow-right"></i></a>
Component 13
<a href="#0" class="btn btn-outline-dark btn-icon-lg rounded-pill"><i class="ti ti-arrow-narrow-right"></i></a>
<a href="#0" class="btn btn-outline-dark btn-icon-lg"><i class="ti ti-arrow-narrow-right"></i></a>
<a href="#0" class="btn btn-outline-dark btn-icon-lg rounded-0"><i class="ti ti-arrow-narrow-right"></i></a>
<a href="#0" class="btn btn-outline-light btn-icon-lg rounded-pill"><i class="ti ti-arrow-narrow-right"></i></a>
<a href="#0" class="btn btn-outline-light btn-icon-lg"><i class="ti ti-arrow-narrow-right"></i></a>
<a href="#0" class="btn btn-outline-light btn-icon-lg rounded-0"><i class="ti ti-arrow-narrow-right"></i></a>
Component 14
<a href="#" class="btn-link link-light link-lg">Get started <i class="ti ti-arrow-narrow-right"></i></a>
<a href="#" class="btn-link link-dark link-lg">Get started <i class="ti ti-arrow-narrow-right"></i></a>
Component 15
<a href="#0" class="btn btn-dark rounded-pill">Get started</a>
<a href="#0" class="btn btn-dark">Get started</a>
<a href="#0" class="btn btn-dark rounded-0">Get started</a>
<a href="#0" class="btn btn-light rounded-pill">Get started</a>
<a href="#0" class="btn btn-light">Get started</a>
<a href="#0" class="btn btn-light rounded-0">Get started</a>
Component 16
<a href="#0" class="btn btn-outline-dark rounded-pill">Get started</a>
<a href="#0" class="btn btn-outline-dark">Get started</a>
<a href="#0" class="btn btn-outline-dark rounded-0">Get started</a>
<a href="#0" class="btn btn-outline-light rounded-pill">Get started</a>
<a href="#0" class="btn btn-outline-light">Get started</a>
<a href="#0" class="btn btn-outline-light rounded-0">Get started</a>
Component 17
<a href="#0" class="btn btn-dark rounded-pill">Get started <i class="ti ti-arrow-narrow-right"></i></a>
<a href="#0" class="btn btn-dark">Get started <i class="ti ti-arrow-narrow-right"></i></a>
<a href="#0" class="btn btn-dark rounded-0">Get started <i class="ti ti-arrow-narrow-right"></i></a>
<a href="#0" class="btn btn-light rounded-pill">Get started <i class="ti ti-arrow-narrow-right"></i></a>
<a href="#0" class="btn btn-light">Get started <i class="ti ti-arrow-narrow-right"></i></a>
<a href="#0" class="btn btn-light rounded-0">Get started <i class="ti ti-arrow-narrow-right"></i></a>
Component 18
<a href="#0" class="btn btn-outline-dark rounded-pill">Get started <i class="ti ti-arrow-narrow-right"></i></a>
<a href="#0" class="btn btn-outline-dark">Get started <i class="ti ti-arrow-narrow-right"></i></a>
<a href="#0" class="btn btn-outline-dark rounded-0">Get started <i class="ti ti-arrow-narrow-right"></i></a>
<a href="#0" class="btn btn-outline-light rounded-pill">Get started <i class="ti ti-arrow-narrow-right"></i></a>
<a href="#0" class="btn btn-outline-light">Get started <i class="ti ti-arrow-narrow-right"></i></a>
<a href="#0" class="btn btn-outline-light rounded-0">Get started <i class="ti ti-arrow-narrow-right"></i></a>
Component 19
<a href="#0" class="btn btn-dark btn-icon rounded-pill"><i class="ti ti-arrow-narrow-right"></i></a>
<a href="#0" class="btn btn-dark btn-icon"><i class="ti ti-arrow-narrow-right"></i></a>
<a href="#0" class="btn btn-dark btn-icon rounded-0"><i class="ti ti-arrow-narrow-right"></i></a>
<a href="#0" class="btn btn-light btn-icon rounded-pill"><i class="ti ti-arrow-narrow-right"></i></a>
<a href="#0" class="btn btn-light btn-icon"><i class="ti ti-arrow-narrow-right"></i></a>
<a href="#0" class="btn btn-light btn-icon rounded-0"><i class="ti ti-arrow-narrow-right"></i></a>
Component 20
<a href="#0" class="btn btn-outline-dark btn-icon rounded-pill"><i class="ti ti-arrow-narrow-right"></i></a>
<a href="#0" class="btn btn-outline-dark btn-icon"><i class="ti ti-arrow-narrow-right"></i></a>
<a href="#0" class="btn btn-outline-dark btn-icon rounded-0"><i class="ti ti-arrow-narrow-right"></i></a>
<a href="#0" class="btn btn-outline-light btn-icon rounded-pill"><i class="ti ti-arrow-narrow-right"></i></a>
<a href="#0" class="btn btn-outline-light btn-icon"><i class="ti ti-arrow-narrow-right"></i></a>
<a href="#0" class="btn btn-outline-light btn-icon rounded-0"><i class="ti ti-arrow-narrow-right"></i></a>
Component 21
<a href="#" class="btn-link link-light link-md">Get started <i class="ti ti-arrow-narrow-right"></i></a>
<a href="#" class="btn-link link-dark link-md">Get started <i class="ti ti-arrow-narrow-right"></i></a>
Component 22
<a href="#0" class="btn btn-dark btn-sm rounded-pill">Get started</a>
<a href="#0" class="btn btn-dark btn-sm">Get started</a>
<a href="#0" class="btn btn-dark btn-sm rounded-0">Get started</a>
<a href="#0" class="btn btn-light btn-sm rounded-pill">Get started</a>
<a href="#0" class="btn btn-light btn-sm">Get started</a>
<a href="#0" class="btn btn-light btn-sm rounded-0">Get started</a>
Component 23
<a href="#0" class="btn btn-outline-dark btn-sm rounded-pill">Get started</a>
<a href="#0" class="btn btn-outline-dark btn-sm">Get started</a>
<a href="#0" class="btn btn-outline-dark btn-sm rounded-0">Get started</a>
<a href="#0" class="btn btn-outline-light btn-sm rounded-pill">Get started</a>
<a href="#0" class="btn btn-outline-light btn-sm">Get started</a>
<a href="#0" class="btn btn-outline-light btn-sm rounded-0">Get started</a>
Component 24
<a href="#0" class="btn btn-dark btn-sm rounded-pill">Get started <i class="ti ti-arrow-narrow-right"></i></a>
<a href="#0" class="btn btn-dark btn-sm">Get started <i class="ti ti-arrow-narrow-right"></i></a>
<a href="#0" class="btn btn-dark btn-sm rounded-0">Get started <i class="ti ti-arrow-narrow-right"></i></a>
<a href="#0" class="btn btn-light btn-sm rounded-pill">Get started <i class="ti ti-arrow-narrow-right"></i></a>
<a href="#0" class="btn btn-light btn-sm">Get started <i class="ti ti-arrow-narrow-right"></i></a>
<a href="#0" class="btn btn-light btn-sm rounded-0">Get started <i class="ti ti-arrow-narrow-right"></i></a>
Component 25
<a href="#0" class="btn btn-outline-dark btn-sm rounded-pill">Get started <i class="ti ti-arrow-narrow-right"></i></a>
<a href="#0" class="btn btn-outline-dark btn-sm">Get started <i class="ti ti-arrow-narrow-right"></i></a>
<a href="#0" class="btn btn-outline-dark btn-sm rounded-0">Get started <i class="ti ti-arrow-narrow-right"></i></a>
<a href="#0" class="btn btn-outline-light btn-sm rounded-pill">Get started <i class="ti ti-arrow-narrow-right"></i></a>
<a href="#0" class="btn btn-outline-light btn-sm">Get started <i class="ti ti-arrow-narrow-right"></i></a>
<a href="#0" class="btn btn-outline-light btn-sm rounded-0">Get started <i class="ti ti-arrow-narrow-right"></i></a>
Component 26
<a href="#0" class="btn btn-dark btn-icon-sm rounded-pill"><i class="ti ti-arrow-narrow-right"></i></a>
<a href="#0" class="btn btn-dark btn-icon-sm"><i class="ti ti-arrow-narrow-right"></i></a>
<a href="#0" class="btn btn-dark btn-icon-sm rounded-0"><i class="ti ti-arrow-narrow-right"></i></a>
<a href="#0" class="btn btn-light btn-icon-sm rounded-pill"><i class="ti ti-arrow-narrow-right"></i></a>
<a href="#0" class="btn btn-light btn-icon-sm"><i class="ti ti-arrow-narrow-right"></i></a>
<a href="#0" class="btn btn-light btn-icon-sm rounded-0"><i class="ti ti-arrow-narrow-right"></i></a>
Component 27
<a href="#0" class="btn btn-outline-dark btn-icon-sm rounded-pill"><i class="ti ti-arrow-narrow-right"></i></a>
<a href="#0" class="btn btn-outline-dark btn-icon-sm"><i class="ti ti-arrow-narrow-right"></i></a>
<a href="#0" class="btn btn-outline-dark btn-icon-sm rounded-0"><i class="ti ti-arrow-narrow-right"></i></a>
<a href="#0" class="btn btn-outline-light btn-icon-sm rounded-pill"><i class="ti ti-arrow-narrow-right"></i></a>
<a href="#0" class="btn btn-outline-light btn-icon-sm"><i class="ti ti-arrow-narrow-right"></i></a>
<a href="#0" class="btn btn-outline-light btn-icon-sm rounded-0"><i class="ti ti-arrow-narrow-right"></i></a>
Component 28
<a href="#" class="btn-link link-light link-sm">Get started <i class="ti ti-arrow-narrow-right"></i></a>
<a href="#" class="btn-link link-dark link-sm">Get started <i class="ti ti-arrow-narrow-right"></i></a>
Component 29
<a href="#0" class="btn btn-dark btn-xsm rounded-pill">Get started</a>
<a href="#0" class="btn btn-dark btn-xsm">Get started</a>
<a href="#0" class="btn btn-dark btn-xsm rounded-0">Get started</a>
<a href="#0" class="btn btn-light btn-xsm rounded-pill">Get started</a>
<a href="#0" class="btn btn-light btn-xsm">Get started</a>
<a href="#0" class="btn btn-light btn-xsm rounded-0">Get started</a>
Component 30
<a href="#0" class="btn btn-outline-dark btn-xsm rounded-pill">Get started</a>
<a href="#0" class="btn btn-outline-dark btn-xsm">Get started</a>
<a href="#0" class="btn btn-outline-dark btn-xsm rounded-0">Get started</a>
<a href="#0" class="btn btn-outline-light btn-xsm rounded-pill">Get started</a>
<a href="#0" class="btn btn-outline-light btn-xsm">Get started</a>
<a href="#0" class="btn btn-outline-light btn-xsm rounded-0">Get started</a>
Component 31
<a href="#0" class="btn btn-dark btn-xsm rounded-pill">Get started <i class="ti ti-arrow-narrow-right"></i></a>
<a href="#0" class="btn btn-dark btn-xsm">Get started <i class="ti ti-arrow-narrow-right"></i></a>
<a href="#0" class="btn btn-dark btn-xsm rounded-0">Get started <i class="ti ti-arrow-narrow-right"></i></a>
<a href="#0" class="btn btn-light btn-xsm rounded-pill">Get started <i class="ti ti-arrow-narrow-right"></i></a>
<a href="#0" class="btn btn-light btn-xsm">Get started <i class="ti ti-arrow-narrow-right"></i></a>
<a href="#0" class="btn btn-light btn-xsm rounded-0">Get started <i class="ti ti-arrow-narrow-right"></i></a>
Component 32
<a href="#0" class="btn btn-outline-dark btn-xsm rounded-pill">Get started <i class="ti ti-arrow-narrow-right"></i></a>
<a href="#0" class="btn btn-outline-dark btn-xsm">Get started <i class="ti ti-arrow-narrow-right"></i></a>
<a href="#0" class="btn btn-outline-dark btn-xsm rounded-0">Get started <i class="ti ti-arrow-narrow-right"></i></a>
<a href="#0" class="btn btn-outline-light btn-xsm rounded-pill">Get started <i class="ti ti-arrow-narrow-right"></i></a>
<a href="#0" class="btn btn-outline-light btn-xsm">Get started <i class="ti ti-arrow-narrow-right"></i></a>
<a href="#0" class="btn btn-outline-light btn-xsm rounded-0">Get started <i class="ti ti-arrow-narrow-right"></i></a>
Component 33
<a href="#0" class="btn btn-dark btn-icon-xsm rounded-pill"><i class="ti ti-arrow-narrow-right"></i></a>
<a href="#0" class="btn btn-dark btn-icon-xsm"><i class="ti ti-arrow-narrow-right"></i></a>
<a href="#0" class="btn btn-dark btn-icon-xsm rounded-0"><i class="ti ti-arrow-narrow-right"></i></a>
<a href="#0" class="btn btn-light btn-icon-xsm rounded-pill"><i class="ti ti-arrow-narrow-right"></i></a>
<a href="#0" class="btn btn-light btn-icon-xsm"><i class="ti ti-arrow-narrow-right"></i></a>
<a href="#0" class="btn btn-light btn-icon-xsm rounded-0"><i class="ti ti-arrow-narrow-right"></i></a>
Component 34
<a href="#0" class="btn btn-outline-dark btn-icon-xsm rounded-pill"><i class="ti ti-arrow-narrow-right"></i></a>
<a href="#0" class="btn btn-outline-dark btn-icon-xsm"><i class="ti ti-arrow-narrow-right"></i></a>
<a href="#0" class="btn btn-outline-dark btn-icon-xsm rounded-0"><i class="ti ti-arrow-narrow-right"></i></a>
<a href="#0" class="btn btn-outline-light btn-icon-xsm rounded-pill"><i class="ti ti-arrow-narrow-right"></i></a>
<a href="#0" class="btn btn-outline-light btn-icon-xsm"><i class="ti ti-arrow-narrow-right"></i></a>
<a href="#0" class="btn btn-outline-light btn-icon-xsm rounded-0"><i class="ti ti-arrow-narrow-right"></i></a>
Component 35
<a href="#" class="btn-link link-light link-xsm">Get started <i class="ti ti-arrow-narrow-right"></i></a>
<a href="#" class="btn-link link-dark link-xsm">Get started <i class="ti ti-arrow-narrow-right"></i></a>