Bootstrap button sizes not working?

Profile picture for THE JOATMON
THE JOATMON

Here are three different button sizes:

<!-- language: lang-html --> 
<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:

screenshot

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

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:

<!-- language: lang-html --> <pre><code>&lt;div class=&quot;btn-group&quot;&gt; &lt;a class=&quot;btn <b>btn-xs</b> btn-success&quot; href=&quot;#&quot;&gt;Approve&lt;/a&gt; &lt;a class=&quot;btn <b>btn-xs</b> btn-danger&quot; href=&quot;#&quot;&gt;Deny&lt;/a&gt; &lt;/div&gt; &lt;br&gt; &lt;div class=&quot;btn-group&quot;&gt; &lt;a class=&quot;btn <b>btn-sm</b> btn-success&quot; href=&quot;#&quot;&gt;Approve&lt;/a&gt; &lt;a class=&quot;btn <b>btn-sm</b> btn-danger&quot; href=&quot;#&quot;&gt;Deny&lt;/a&gt; &lt;/div&gt; &lt;br&gt; &lt;div class=&quot;btn-group&quot;&gt; &lt;a class=&quot;btn btn-success&quot; href=&quot;#&quot;&gt;Approve&lt;/a&gt; &lt;a class=&quot;btn btn-danger&quot; href=&quot;#&quot;&gt;Deny&lt;/a&gt; &lt;/div&gt; </code></pre>

Demo in jsFiddle which will produce this:

screenshot

Docs from various versions