Bootstrap button sizes not working?

Bootstrap changed the names of their buttons from 2.x ➡ to 3.x

Version Comparison

|    2.x     |   3.x   |   4.x   |
|------------|---------|---------|
| .btn-large | .btn-lg | .btn-lg |
| .btn-small | .btn-sm | .btn-sm |
| .btn-mini  | .btn-xs |    -    |

Demo for Bootstrap 3

So your updated code should look like this:

<div class="btn-group">
    <a class="btn btn-xs btn-success" href="#">Approve</a>
    <a class="btn btn-xs btn-danger" href="#">Deny</a>
</div>
<br>
<div class="btn-group">
    <a class="btn btn-sm btn-success" href="#">Approve</a>
    <a class="btn btn-sm btn-danger" href="#">Deny</a>
</div>
<br>
<div class="btn-group">
    <a class="btn btn-success" href="#">Approve</a>
    <a class="btn btn-danger" href="#">Deny</a>
</div>

Demo in jsFiddle which will produce this:

screenshot

Docs from various versions

  • Bootstrap Buttons 2.x
  • Bootstrap Buttons 3.x
  • Bootstrap Buttons 4.x
  • Migration Guide 2 ➡ 3
  • Migration Guide 3 ➡ 4

(If someone came here wondering why btn-xs or btn-group-xs is not working in >= 4.0)

Change log from bootstrap 3.0 to 4.0:

Dropped the .btn-xs class entirely as .btn-sm is proportionally much smaller than v3’s.

...

Dropped the .btn-group-xs class entirely given removal of .btn-xs.

Source