Loading...
Default
<button type="button" class="btn btn-primary">Primary</button><button type="button" class="btn btn-secondary">Secondary</button><button type="button" class="btn btn-success">Success</button><button type="button" class="btn btn-danger">Danger</button><button type="button" class="btn btn-warning">Warning</button><button type="button" class="btn btn-info">Info</button><button type="button" class="btn btn-light">Light</button><button type="button" class="btn btn-dark">Dark</button>
Square
<button type="button" class="btn btn-primary btn-square">Primary</button>
Outline
<button type="button" class="btn btn-outline-primary">Primary</button>
Rounded
<button type="button" class="btn btn-primary btn-rounded">Primary</button>
Uppercase
<button type="button" class="btn btn-primary btn-uppercase">Primary</button>
Disabled
<button type="button" class="btn btn-primary disabled">Primary</button><!-- or --><button type="button" class="btn btn-primary" disabled>Primary</button>
Button with Icon
<button type="button" class="btn btn-outline-secondary btn-uppercase"><i class="ti-plus mr-2"></i>Create User </button><button type="button" class="btn btn-success btn-uppercase"><i class="ti-check-box mr-2"></i>Save </button><button type="button" class="btn btn-outline-warning btn-rounded btn-uppercase"><i class="ti-settings mr-2"></i>Settings </button><button type="button" class="btn btn-danger btn-square btn-uppercase"><i class="ti-trash mr-2"></i>Delete </button>
Only Icon
<button type="button" class="btn btn-outline-secondary"><i class="ti-plus"></i></button><button type="button" class="btn btn-success"><i class="ti-check-box"></i></button><button type="button" class="btn btn-warning btn-rounded"><i class="ti-settings"></i></button><button type="button" class="btn btn-danger btn-square"><i class="ti-trash"></i></button>
Only Icon Floating
<button type="button" class="btn btn-secondary btn-floating"><i class="ti-plus"></i></button>
Loader Buttons
<button type="button" class="btn btn-primary" disabled><span class="spinner-border spinner-border-sm mr-2" role="status" aria-hidden="true"></span>Loading... </button>
Pulse
<button type="button" class="btn btn-primary btn-pulse"><i class="ti-user mr-2"></i>Profile </button>
Store Buttons
<a href="#" class="btn btn-apple"><i class="fa fa-apple"></i><span><span>Download on the</span><span>App Store</span></span></a><a href="#" class="btn btn-google-play"><img src="google_play_button.png" alt="image"><span><span>Get in on</span><span>Google Play</span></span></a>
Social Buttons
<button type="button" class="btn btn-facebook"><i class="fa fa-facebook-square mr-2"></i>Facebook </button><button type="button" class="btn btn-google"><i class="fa fa-google mr-2"></i>Google </button><button type="button" class="btn btn-twitter"><i class="fa fa-twitter mr-2"></i>Twitter </button><button type="button" class="btn btn-linkedin"><i class="fa fa-linkedin mr-2"></i>Linkedin </button>...
Sizes
<button type="button" class="btn btn-secondary btn-sm">Button</button><button type="button" class="btn btn-secondary">Button</button><button type="button" class="btn btn-secondary btn-lg">Button</button>
Button Group
<div class="btn-group" role="group" aria-label="Basic example"><button type="button" class="btn btn-dark">Left</button><button type="button" class="btn btn-dark">Middle</button><button type="button" class="btn btn-dark">Right</button></div>
<div class="btn-group" role="group" aria-label="Basic example"><button type="button" class="btn btn-primary"><i class="ti-control-pause"></i></button><button type="button" class="btn btn-success"><i class="ti-control-play"></i></button><button type="button" class="btn btn-warning"><i class="ti-control-forward"></i></button></div>
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups"><div class="btn-group mr-2" role="group" aria-label="First group"><button type="button" class="btn btn-dark">1</button><button type="button" class="btn btn-dark">2</button><button type="button" class="btn btn-dark">3</button><button type="button" class="btn btn-dark">4</button></div><div class="btn-group mr-2" role="group" aria-label="Second group"><button type="button" class="btn btn-dark">5</button><button type="button" class="btn btn-dark">6</button><button type="button" class="btn btn-dark">7</button></div><div class="btn-group" role="group" aria-label="Third group"><button type="button" class="btn btn-dark">8</button></div></div>


<div class="btn-group btn-group-lg" role="group" aria-label="Large button group"><button type="button" class="btn btn-dark">Left</button><button type="button" class="btn btn-dark">Middle</button><button type="button" class="btn btn-dark">Right</button></div><div class="btn-group" role="group" aria-label="Default button group"><button type="button" class="btn btn-dark">Left</button><button type="button" class="btn btn-dark">Middle</button><button type="button" class="btn btn-dark">Right</button></div><div class="btn-group btn-group-sm" role="group" aria-label="Small button group"><button type="button" class="btn btn-dark">Left</button><button type="button" class="btn btn-dark">Middle</button><button type="button" class="btn btn-dark">Right</button></div>
<div class="btn-group" role="group" aria-label="Button group with nested dropdown"><button type="button" class="btn btn-dark">1</button><button type="button" class="btn btn-dark">2</button><div class="btn-group" role="group"><button id="btnGroupDrop1" type="button" class="btn btn-dark dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown </button><div class="dropdown-menu" aria-labelledby="btnGroupDrop1"><a class="dropdown-item" href="#">Dropdown link</a><a class="dropdown-item" href="#">Dropdown link</a></div></div></div>
<div class="btn-group-vertical" role="group" aria-label="Vertical button group"><button type="button" class="btn btn-primary"><i class="fa fa-cloud-upload"></i></button><button type="button" class="btn btn-primary"><i class="fa fa-calendar"></i></button><button type="button" class="btn btn-primary"><i class="fa fa-database"></i></button><button type="button" class="btn btn-primary"><i class="fa fa-cog"></i></button><button type="button" class="btn btn-primary"><i class="fa fa-heart-o"></i></button><button type="button" class="btn btn-primary"><i class="fa fa-share"></i></button></div>