Check out all the buttons options.
Default Success Info Warning Danger
Primary Secondary Tertiary Quaternary
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21
<div class="row"> <div class="col-md-6"> <h4>Default</h4> <p> <button type="button" class="btn btn-default mr-xs mb-sm">Default</button> <button type="button" class="btn btn-success mr-xs mb-sm">Success</button> <button type="button" class="btn btn-info mr-xs mb-sm">Info</button> <button type="button" class="btn btn-warning mr-xs mb-sm">Warning</button> <button type="button" class="btn btn-danger mr-xs mb-sm">Danger</button> </p> </div> <div class="col-md-6"> <h4>Colors</h4> <p> <button type="button" class="btn btn-primary mr-xs mb-sm">Primary</button> <button type="button" class="btn btn-secondary mr-xs mb-sm">Secondary</button> <button type="button" class="btn btn-tertiary mr-xs mb-sm">Tertiary</button> <button type="button" class="btn btn-quaternary mr-xs mb-sm">Quaternary</button> </p> </div> </div>
Default Primary Secondary Tertiary Quaternary Success Info Warning Danger
1 2 3 4 5 6 7 8 9 10 11 12
<script> // Button Loading $('#loadingButton').on('click', function () { var $btn = $(this).button('loading') // Business Logic... setTimeout(function () { // Reset Button $btn.button('reset'); }, 2000); }) </script>
Refresh Cloud