Bootstrap button sizes not working?

Question

Here are three different button sizes:

<div class="btn-group btn-small">     <button class="btn btn-small btn-success" href="#" type="button">Approve</button>     <button class="btn btn-small btn-danger" href="#" type="button">Deny</button> </div>  <div class="btn-group">     <a class="btn btn-mini btn-success" href="#">Approve</a>     <a class="btn btn-mini btn-danger" href="#">Deny</a> </div>  <div class="btn-group">     <a class="btn btn-success" href="#">Approve</a>     <a class="btn btn-danger" href="#">Deny</a> </div> 

All three of those result in this:

Why would btn, btn-success, btn-danger and btn-group all work, but not btn-mini/small/etc?

Answer 1

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:

Docs from various versions

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