Basic Buttons
										
<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>
										
									
Outline Buttons
										
<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>
										
									
Light Buttons
										
<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>
										
									
Icon 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>
										
									
Radious
										
<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>
										
									
Social Buttons
Icon Button
	

	<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>

	
Social Buttons
Disable Buttons
										

										
									
Active 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>
										
									
Loading Buttons
										
 <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>
										
									
Block Buttons
										
<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>
										
									
Button with sizes
										
<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>
										
									
Radious Button
										
<button type="button" class="btn btn-primary b-r-0">Primary</button>
<button type="button" class="btn btn-secondary b-r-6">Secondary</button>
<button type="button" class="btn btn-success b-r-10">Danger</button>
<button type="button" class="btn btn-danger b-r-22">Danger</button>
										
									
Button Group
										
<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>
										
									
Sizes
										
<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>
										
									
Nesting
										
<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>
										
									
Checkbox Radio
											
<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>
											
										
Button Vertical
										
<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>