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>

 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>