Dashboard
Bordered Button
EXTRA SMALL SMALL MEDIUM LARGETRY SMARTY DEMO 30 days demo for free
Theme Button
EXTRA SMALL SMALL MEDIUM LARGETRY SMARTY DEMO 30 days demo for free
<!-- Default --> <button type="button" class="btn btn-secondary">Default</button> <!-- Primary --> <button type="button" class="btn btn-primary">Primary</button> <!-- Success --> <button type="button" class="btn btn-success">Success</button> <!-- Info --> <button type="button" class="btn btn-info">Info</button> <!-- Warning --> <button type="button" class="btn btn-warning">Warning</button> <!-- Danger --> <button type="button" class="btn btn-danger">Danger</button> <!-- Deemphasize a button by making it look like a link while maintaining button behavior --> <button type="button" class="btn btn-link">Link Button</button>
Fancy larger or smaller buttons? Add .btn-lg
, .btn-sm
, or .btn-sm
for additional sizes.
<!-- Large button --> <button type="button" class="btn btn-primary btn-lg">Large button</button> <!-- Default (medium) button --> <button type="button" class="btn btn-primary">Default button</button> <!-- Small button --> <button type="button" class="btn btn-primary btn-sm">Small button</button> <!-- Extra small button --> <button type="button" class="btn btn-primary btn-sm">Extra small button</button> <!-- Block level button (full width) --> <button type="button" class="btn btn-secondary btn-lg btn-block">Block level button</button>
<--
AVAILABLE CLASSES
btn-primary
btn-danger
btn-warning
btn-info
btn-secondary
-->
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Default <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li><a href="#"><i class="fa fa-edit"></i> Action</a></li>
<li><a href="#"><i class="fa fa-question-circle"></i> Another action</a></li>
<li><a href="#"><i class="fa fa-print"></i> Something else here</a></li>
<li class="dropdown-divider"></li>
<li><a href="#"><i class="fa fa-cogs"></i> Separated link</a></li>
</ul>
</div>
<--
AVAILABLE CLASSES
btn-primary
btn-danger
btn-warning
btn-info
btn-secondary
-->
<div class="btn-group">
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#"><i class="fa fa-edit"></i> Action</a></li>
<li><a href="#"><i class="fa fa-question-circle"></i> Another action</a></li>
<li><a href="#"><i class="fa fa-print"></i> Something else here</a></li>
<li class="dropdown-divider"></li>
<li><a href="#"><i class="fa fa-cogs"></i> Separated link</a></li>
</ul>
</div>
Trigger dropdown menus above elements by adding .dropup
to the parent.
<--
AVAILABLE CLASSES
btn-primary
btn-danger
btn-warning
btn-info
btn-secondary
-->
<div class="btn-group dropup">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Default
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#"><i class="fa fa-edit"></i> Action</a></li>
<li><a href="#"><i class="fa fa-question-circle"></i> Another action</a></li>
<li><a href="#"><i class="fa fa-print"></i> Something else here</a></li>
<li class="dropdown-divider"></li>
<li><a href="#"><i class="fa fa-cogs"></i> Separated link</a></li>
</ul>
</div>
<!-- Bordered Extra Small --> <a href="#" class="btn btn-sm btn-secondary btn-bordered"> <i class="et-megaphone"></i> <span>Extra Small</span> </a> <!-- Bordered Small --> <a href="#" class="btn btn-sm btn-secondary btn-bordered"> <i class="et-megaphone"></i> <span>Small</span> </a> <!-- Bordered Medium --> <a href="#" class="btn btn-secondary btn-bordered"> <i class="et-megaphone"></i> <span>Medium</span> </a> <!-- Bordered Large --> <a href="#" class="btn btn-lg btn-secondary btn-bordered"> <i class="et-megaphone"></i> <span>Large</span> </a> <!-- Bordered Extra Large --> <a href="#" class="btn btn-xlg btn-secondary btn-bordered size-20"> TRY SMARTY DEMO <span class="block font-lato">30 days demo for free</span> </a>
<!-- Bordered Extra Small --> <a href="#" class="btn btn-sm btn-primary"> <i class="et-megaphone"></i> <span>Extra Small</span> </a> <!-- Bordered Small --> <a href="#" class="btn btn-sm btn-primary"> <i class="et-megaphone"></i> <span>Small</span> </a> <!-- Bordered Medium --> <a href="#" class="btn btn-primary"> <i class="et-megaphone"></i> <span>Medium</span> </a> <!-- Bordered Large --> <a href="#" class="btn btn-lg btn-primary"> <i class="et-megaphone"></i> <span>Large</span> </a> <!-- Bordered Extra Large --> <a href="#" class="btn btn-xlg btn-primary size-20"> TRY SMARTY DEMO <span class="block font-lato">30 days demo for free</span> </a>