<button type="button" class="btn btn-primary">...</button>
<button type="button" class="btn btn-secondary">...</button>
<button type="button" class="btn btn-success">...</button>
<button type="button" class="btn btn-danger">...</button>
<button type="button" class="btn btn-warning">...</button>
<button type="button" class="btn btn-info">...</button>
<button type="button" class="btn btn-light">...</button>
<button type="button" class="btn btn-dark">...</button>
<button type="button" class="btn btn-link">...</button>
<button type="button" class="btn btn-outline-primary">...</button>
<button type="button" class="btn btn-outline-secondary">...</button>
<button type="button" class="btn btn-outline-success">...</button>
<button type="button" class="btn btn-outline-danger">...</button>
<button type="button" class="btn btn-outline-warning">...</button>
<button type="button" class="btn btn-outline-info">...</button>
<button type="button" class="btn btn-outline-light">...</button>
<button type="button" class="btn btn-outline-dark">...</button>
<button type="button" class="btn btn-outline-link">...</button>
<button type="button" class="btn btn-light-primary">...</button>
<button type="button" class="btn btn-light-secondary">...</button>
<button type="button" class="btn btn-light-success">...</button>
<button type="button" class="btn btn-light-danger">...</button>
<button type="button" class="btn btn-light-warning">...</button>
<button type="button" class="btn btn-light-info">...</button>
<button type="button" class="btn btn-light-light">...</button>
<button type="button" class="btn btn-light-dark">...</button>
<button type="button" class="btn btn-light-link">...</button>
<div class="row app-btn-list">
<div class="col-md-6 col-lg-4">
<button type="button" class="btn btn-primary"> <i
class="ti ti-download"></i> Primary</button>
<button type="button"
class="btn btn-secondary d-lg-inline-flex align-items-center">
Secondary <i class="ti ti-alert-triangle m-s-3"></i></button>
</div>
<div class="col-md-6 col-lg-4">
<button type="button" class="btn btn-outline-primary"> <i
class="ti ti-download"></i> Primary</button>
<button type="button"
class="btn btn-outline-secondary d-lg-inline-flex align-items-center">
Secondary <i class="ti ti-alert-triangle m-s-3"></i></button>
</div>
<div class="col-md-6 col-lg-4">
<button type="button" class="btn btn-light-primary"> <i
class="ti ti-download"></i> Primary</button>
<button type="button"
class="btn btn-light-secondary d-lg-inline-flex align-items-center">
Secondary <i class="ti ti-alert-triangle m-s-3"></i></button>
</div>
</div>
<div class="row app-btn-list">
<div class="col-md-6 col-lg-4 col-12">
<button type="button" class="btn btn-primary b-r-22"> <i
class="ti ti-download"></i> Primary</button>
<button type="button"
class="btn btn-secondary d-lg-inline-flex align-items-center b-r-22">
Secondary <i class="ti ti-alert-triangle m-s-3"></i></button>
</div>
<div class="col-md-6 col-lg-4 col-12">
<button type="button" class="btn btn-outline-primary b-r-22"> <i
class="ti ti-download"></i> Primary</button>
<button type="button"
class="btn btn-outline-secondary d-lg-inline-flex align-items-center b-r-22">
Secondary <i class="ti ti-alert-triangle m-s-3"></i></button>
</div>
<div class="col-md-6 col-lg-4 col-12">
<button type="button" class="btn btn-light-primary b-r-22"> <i
class="ti ti-download"></i> Primary</button>
<button type="button"
class="btn btn-light-secondary d-lg-inline-flex align-items-center b-r-22">
Secondary <i class="ti ti-alert-triangle m-s-3"></i></button>
</div>
</div>
<div class="row">
<div class="col-md-6 col-lg-4 col-12">
<button type="button"
class="btn btn-facebook b-r-22 text-white d-inline-flex-center"><i
class="ti ti-brand-facebook f-s-18 me-1"></i> Facebook </button>
<button type="button"
class="btn btn-twitter b-r-22 text-white d-inline-flex-center"><i
class="ti ti-brand-twitter f-s-18 me-1"></i> twitter </button>
</div>
<div class="col-md-6 col-lg-4 col-12">
<button type="button"
class="btn btn-outline-pinterest b-r-22 d-inline-flex-center"><i
class="ti ti-brand-pinterest f-s-18 me-1"></i> Pinterest
</button>
<button type="button"
class="btn btn-outline-linkedin b-r-22 d-inline-flex-center"><i
class="ti ti-brand-linkedin f-s-18 me-1"></i> Linkedin </button>
</div>
<div class="col-md-6 col-lg-4 col-12">
<button type="button"
class="btn btn-light-reddit b-r-22 d-inline-flex-center"><i
class="ti ti-brand-reddit f-s-18 me-1"></i> Reddit </button>
<button type="button"
class="btn btn-light-twitter b-r-22 d-inline-flex-center"><i
class="ti ti-brand-twitter f-s-18 me-1"></i> twitter </button>
</div>
</div>
<div class="app-btn-list">
<button type="button" class="btn btn-primary icon-btn b-r-4"> <i
class="ti ti-capture"></i></button>
<button type="button" class="btn btn-secondary icon-btn b-r-4"><i
class="ti ti-bell-ringing"></i></button>
<button type="button" class="btn btn-outline-primary icon-btn b-r-4"> <i
class="ti ti-capture"></i></button>
<button type="button" class="btn btn-outline-secondary icon-btn b-r-4"><i
class="ti ti-bell-ringing"></i></button>
<button type="button" class="btn btn-light-primary icon-btn b-r-4">
<i class="ti ti-capture"></i></button>
<button type="button" class="btn btn-light-secondary icon-btn b-r-4"><i
class="ti ti-bell-ringing"></i></button>
</div>
<button type="button" class="btn btn-facebook icon-btn b-r-22"><i
class="ti ti-brand-facebook text-white"></i></button>
<button type="button" class="btn btn-twitter icon-btn b-r-22"><i
class="ti ti-brand-twitter text-white"></i></button>
<button type="button" class="btn btn-pinterest icon-btn b-r-22"><i
class="ti ti-brand-pinterest text-white"></i></button>
<button type="button" class="btn btn-linkedin icon-btn b-r-22"><i
class="ti ti-brand-linkedin text-white"></i></button>
<button type="button" class="btn btn-reddit icon-btn b-r-22"><i
class="ti ti-brand-reddit text-white"></i></button>
<button type="button" class="btn btn-whatsapp icon-btn b-r-22"><i
class="ti ti-brand-whatsapp text-white"></i></button>
<button type="button" class="btn btn-gmail icon-btn b-r-22"><i
class="ti ti-brand-gmail text-white"></i></button>
<button type="button" class="btn btn-telegram icon-btn b-r-22"><i
class="ti ti-brand-telegram text-white"></i></button>
<button type="button" class="btn btn-youtube icon-btn b-r-22"><i
class="ti ti-brand-youtube text-white"></i></button>
<button type="button" class="btn btn-vimeo icon-btn b-r-22"><i
class="ti ti-brand-vimeo text-white"></i></button>
<button type="button" class="btn btn-behance icon-btn b-r-22"><i
class="ti ti-brand-behance text-white"></i></button>
<button type="button" class="btn btn-github icon-btn b-r-22"><i
class="ti ti-brand-github text-white"></i></button>
<button type="button" class="btn btn-skype icon-btn b-r-22"><i
class="ti ti-brand-skype text-white"></i></button>
<button type="button" class="btn btn-snapchat icon-btn b-r-22"><i
class="ti ti-brand-snapchat"></i></button>
Disable Buttons
<div class="row">
<div class="col-md-6 col-lg-4 col-12 mb-3 app-btn-list">
<button type="button" class="btn btn-primary active"> <i
class="ti ti-download"></i> Primary</button>
<button type="button"
class="btn btn-secondary d-lg-inline-flex align-items-center active">
Secondary <i class="ti ti-alert-triangle m-s-3"></i></button>
</div>
<div class="col-md-6 col-lg-4 col-12 mb-3 app-btn-list">
<button type="button" class="btn btn-outline-primary active"> <i
class="ti ti-download"></i> Primary</button>
<button type="button"
class="btn btn-outline-secondary d-lg-inline-flex align-items-center active">
Secondary <i class="ti ti-alert-triangle m-s-3"></i></button>
</div>
<div class="col-md-6 col-lg-4 col-12 mb-3 app-btn-list">
<button type="button" class="btn btn-light-primary active"> <i
class="ti ti-download"></i> Primary</button>
<button type="button"
class="btn btn-light-secondary d-lg-inline-flex align-items-center active">
Secondary <i class="ti ti-alert-triangle m-s-3"></i></button>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-12">
<button class="btn btn-primary d-inline-flex-center" type="button">
<span class="spinner-border spinner-border-sm me-2" role="status"
aria-hidden="true"></span>
Loading...
</button>
<button class="btn btn-secondary d-inline-flex-center" type="button">
Wait... <span class="spinner-border spinner-border-sm ms-2"
role="status" aria-hidden="true"></span>
</button>
<button class="btn btn-success icon-btn" type="button">
<span class="spinner-border spinner-border-sm" role="status"
aria-hidden="true"></span>
<span class="visually-hidden">Loading...</span>
</button>
<button class="btn btn-danger icon-btn" type="button">
<span class="spinner-grow spinner-grow-sm" role="status"
aria-hidden="true"></span>
<span class="visually-hidden">Loading...</span>
</button>
</div>
<div class="col-lg-6 col-12 mb-3">
<button class="btn btn-outline-primary d-inline-flex-center"
type="button">
<span class="spinner-border spinner-border-sm me-2" role="status"
aria-hidden="true"></span>
Loading...
</button>
<button class="btn btn-outline-secondary d-inline-flex-center"
type="button">
Wait... <span class="spinner-border spinner-border-sm ms-2"
role="status" aria-hidden="true"></span>
</button>
<button class="btn btn-outline-success icon-btn" type="button">
<span class="spinner-border spinner-border-sm" role="status"
aria-hidden="true"></span>
<span class="visually-hidden">Loading...</span>
</button>
<button class="btn btn-outline-danger icon-btn" type="button">
<span class="spinner-grow spinner-grow-sm" role="status"
aria-hidden="true"></span>
<span class="visually-hidden">Loading...</span>
</button>
</div>
<div class="col-lg-6 col-12 mb-3">
<button class="btn btn-light-primary d-inline-flex-center"
type="button">
<span class="spinner-border spinner-border-sm me-2" role="status"
aria-hidden="true"></span>
Loading...
</button>
<button class="btn btn-light-secondary d-inline-flex-center"
type="button">
Wait... <span class="spinner-border spinner-border-sm ms-2"
role="status" aria-hidden="true"></span>
</button>
<button class="btn btn-light-success icon-btn" type="button">
<span class="spinner-border spinner-border-sm" role="status"
aria-hidden="true"></span>
<span class="visually-hidden">Loading...</span>
</button>
<button class="btn btn-light-danger icon-btn" type="button">
<span class="spinner-grow spinner-grow-sm" role="status"
aria-hidden="true"></span>
<span class="visually-hidden">Loading...</span>
</button>
</div>
</div>
<div class="row">
<div class="col-md-6 col-lg-4 col-12">
<div class="d-grid gap-2">
<button class="btn btn-primary w-100" type="button">Button</button>
<button class="btn btn-secondary w-100"
type="button">Button</button>
</div>
</div>
<div class="col-md-6 col-lg-4 col-12">
<div class="d-grid gap-2">
<button class="btn btn-outline-primary w-100"
type="button">Button</button>
<button class="btn btn-outline-secondary w-100"
type="button">Button</button>
</div>
</div>
<div class="col-md-6 col-lg-4 col-12">
<div class="d-grid gap-2">
<button class="btn btn-light-primary w-100"
type="button">Button</button>
<button class="btn btn-light-secondary w-100"
type="button">Button</button>
</div>
</div>
</div>
<h1 class="mb-3">Example heading <span class="badge bg-secondary">New</span></h1>
<h2 class="mb-3">Example heading <span class="badge bg-secondary">New</span></h2>
<h3 class="mb-3">Example heading <span class="badge bg-secondary">New</span></h3>
<h4 class="mb-3">Example heading <span class="badge bg-secondary">New</span></h4>
<h5 class="mb-3">Example heading <span class="badge bg-secondary">New</span></h5>
<h6 class="mb-3">Example heading <span class="badge bg-secondary">New</span></h6>
<div class="row">
<div class="col-md-6 col-lg-4 col-12">
<div class="btn-group">
<a href="#" class="btn btn-secondary active"
aria-current="page">Active link</a>
<a href="#" class="btn btn-secondary">Link</a>
<a href="#" class="btn btn-secondary">Link</a>
</div>
</div>
<div class="col-md-6 col-lg-4 col-12">
<div class="btn-group">
<a href="#" class="btn btn-outline-secondary active"
aria-current="page">Active link</a>
<a href="#" class="btn btn-outline-secondary">Link</a>
<a href="#" class="btn btn-outline-secondary">Link</a>
</div>
</div>
<div class="col-md-6 col-lg-4 col-12">
<div class="btn-group">
<a href="#" class="btn btn-light-secondary active"
aria-current="page">Active link</a>
<a href="#" class="btn btn-light-secondary">Link</a>
<a href="#" class="btn btn-light-secondary">Link</a>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-12 mb-3">
<div class="btn-group btn-group-lg" role="group"
aria-label="Large button group">
<button type="button"
class="btn btn-outline-secondary">Left</button>
<button type="button"
class="btn btn-outline-secondary">Middle</button>
<button type="button"
class="btn btn-outline-secondary">Right</button>
</div>
</div>
<div class="col-lg-4 col-12 mb-3">
<div class="btn-group" role="group" aria-label="Default button group">
<button type="button"
class="btn btn-outline-secondary">Left</button>
<button type="button"
class="btn btn-outline-secondary">Middle</button>
<button type="button"
class="btn btn-outline-secondary">Right</button>
</div>
</div>
<div class="col-lg-4 col-12 mb-3">
<div class="btn-group btn-group-sm" role="group"
aria-label="Small button group">
<button type="button"
class="btn btn-outline-secondary">Left</button>
<button type="button"
class="btn btn-outline-secondary">Middle</button>
<button type="button"
class="btn btn-outline-secondary">Right</button>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-lg-4 col-12">
<div class="btn-group" role="group"
aria-label="Button group with nested dropdown">
<button type="button" class="btn btn-secondary">1</button>
<button type="button" class="btn btn-secondary">2</button>
<div class="btn-group" role="group">
<button type="button" class="btn btn-secondary dropdown-toggle"
data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Dropdown link</a>
</li>
<li><a class="dropdown-item" href="#">Dropdown link</a>
</li>
</ul>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 col-12">
<div class="btn-group" role="group"
aria-label="Button group with nested dropdown">
<button type="button" class="btn btn-outline-secondary">1</button>
<button type="button" class="btn btn-outline-secondary">2</button>
<div class="btn-group" role="group">
<button type="button"
class="btn btn-outline-secondary dropdown-toggle"
data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Dropdown link</a>
</li>
<li><a class="dropdown-item" href="#">Dropdown link</a>
</li>
</ul>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 col-12">
<div class="btn-group" role="group"
aria-label="Button group with nested dropdown">
<button type="button" class="btn btn-light-secondary">1</button>
<button type="button" class="btn btn-light-secondary">2</button>
<div class="btn-group" role="group">
<button type="button"
class="btn btn-light-secondary dropdown-toggle"
data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Dropdown link</a>
</li>
<li><a class="dropdown-item" href="#">Dropdown link</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-12 mb-3">
<div class="btn-group" role="group"
aria-label="Basic checkbox toggle button group">
<input type="checkbox" class="btn-check" id="btncheck1">
<label class="btn btn-outline-secondary" for="btncheck1">Checkbox
1</label>
<input type="checkbox" class="btn-check" id="btncheck2">
<label class="btn btn-outline-secondary" for="btncheck2">Checkbox
2</label>
<input type="checkbox" class="btn-check" id="btncheck3">
<label class="btn btn-outline-secondary" for="btncheck3">Checkbox
3</label>
</div>
</div>
<div class="col-lg-4 col-12 mb-3">
<div class="btn-group" role="group"
aria-label="Basic radio toggle button group">
<input type="radio" class="btn-check" name="btnradio" id="btnradio1"
checked>
<label class="btn btn-outline-secondary" for="btnradio1">Radio
1</label>
<input type="radio" class="btn-check" name="btnradio"
id="btnradio2">
<label class="btn btn-outline-secondary" for="btnradio2">Radio
2</label>
<input type="radio" class="btn-check" name="btnradio"
id="btnradio3">
<label class="btn btn-outline-secondary" for="btnradio3">Radio
3</label>
</div>
</div>
<div class="col-lg-4 col-12 mb-3">
<div class="btn-toolbar" role="toolbar"
aria-label="Toolbar with button groups">
<div class="btn-group me-2" role="group" aria-label="First group">
<button type="button" class="btn btn-secondary">1</button>
<button type="button" class="btn btn-secondary">2</button>
<button type="button" class="btn btn-secondary">3</button>
<button type="button" class="btn btn-secondary">4</button>
</div>
<div class="btn-group" role="group" aria-label="Third group">
<button type="button" class="btn btn-secondary">8</button>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-12">
<div class="btn-group-vertical mb-3" role="group"
aria-label="Vertical button group">
<button type="button" class="btn btn-secondary">Button</button>
<button type="button" class="btn btn-secondary">Button</button>
<button type="button" class="btn btn-secondary">Button</button>
</div>
<div class="btn-group-vertical ms-2 mb-3" role="group"
aria-label="Vertical button group">
<button type="button" class="btn btn-secondary">Button</button>
<button type="button" class="btn btn-secondary">Button</button>
<div class="btn-group" role="group">
<button type="button" class="btn btn-secondary dropdown-toggle"
data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Dropdown
link</a></li>
<li><a class="dropdown-item" href="#">Dropdown
link</a></li>
</ul>
</div>
</div>
<div class="btn-group-vertical ms-sm-2 mb-3" role="group"
aria-label="Vertical radio toggle button group">
<input type="radio" class="btn-check" name="vbtn-radio"
id="vbtn-radio1" checked>
<label class="btn btn-outline-secondary" for="vbtn-radio1">Radio
1</label>
<input type="radio" class="btn-check" name="vbtn-radio"
id="vbtn-radio2">
<label class="btn btn-outline-secondary" for="vbtn-radio2">Radio
2</label>
<input type="radio" class="btn-check" name="vbtn-radio"
id="vbtn-radio3">
<label class="btn btn-outline-secondary" for="vbtn-radio3">Radio
3</label>
</div>
</div>
<div class="col-lg-4 col-12 mb-3">
<div class="btn-group-vertical" role="group"
aria-label="Vertical button group">
<button type="button"
class="btn btn-outline-secondary">Button</button>
<button type="button"
class="btn btn-outline-secondary">Button</button>
<button type="button"
class="btn btn-outline-secondary">Button</button>
</div>
<div class="btn-group-vertical ms-2" role="group"
aria-label="Vertical button group">
<button type="button"
class="btn btn-outline-secondary">Button</button>
<button type="button"
class="btn btn-outline-secondary">Button</button>
<div class="btn-group" role="group">
<button type="button"
class="btn btn-outline-secondary dropdown-toggle"
data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Dropdown
link</a></li>
<li><a class="dropdown-item" href="#">Dropdown
link</a></li>
</ul>
</div>
</div>
</div>
<div class="col-lg-4 col-12 mb-3">
<div class="btn-group-vertical" role="group"
aria-label="Vertical button group">
<button type="button"
class="btn btn-light-secondary">Button</button>
<button type="button"
class="btn btn-light-secondary">Button</button>
<button type="button"
class="btn btn-light-secondary">Button</button>
</div>
<div class="btn-group-vertical ms-2" role="group"
aria-label="Vertical button group">
<button type="button"
class="btn btn-light-secondary">Button</button>
<button type="button"
class="btn btn-light-secondary">Button</button>
<div class="btn-group" role="group">
<button type="button"
class="btn btn-light-secondary dropdown-toggle"
data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Dropdown
link</a></li>
<li><a class="dropdown-item" href="#">Dropdown
link</a></li>
</ul>
</div>
</div>
</div>
</div>