Buttons
Bootstrap 3 gives every clickable element — <a>, <button>, or
<input> — a consistent look through one base class, .btn, plus a
second class that picks the color and a third that picks the size. We'll build every variant here and
finish with a real "Submit Trail" button set for TrailMap, our hiking-trail directory app.
The Base Class: .btn
Every Bootstrap 3 button starts with .btn. On its own it just gives padding, a border-radius, and a pointer cursor — you always pair it with a style class.
<button type="button" class="btn btn-default">Default Button</button>Button Style Variants
Add one of these seven classes alongside .btn to set the color and meaning of the button:
| Class | Meaning |
|---|---|
.btn-default | Neutral, no strong meaning (the plain gray button) |
.btn-primary | The main call-to-action on the page |
.btn-success | A positive or confirming action |
.btn-info | An informational, low-emphasis action |
.btn-warning | An action that needs caution |
.btn-danger | A destructive or irreversible action |
.btn-link | Looks like a plain text link but behaves like a button |
<button class="btn btn-primary">Primary</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-info">Info</button>
<button class="btn btn-warning">Warning</button>
<button class="btn btn-danger">Danger</button>
<button class="btn btn-link">Link</button>Button Sizes
Stack a sizing class next to .btn and the style class to scale the whole button up or down. Bootstrap 3 has four sizes — the default (no extra class), plus three modifier classes:
<button class="btn btn-primary btn-lg">Large</button>
<button class="btn btn-primary">Default</button>
<button class="btn btn-primary btn-sm">Small</button>
<button class="btn btn-primary btn-xs">Extra Small</button>.btn-xs gives you a fourth, extra-small size below .btn-sm. It's a real, commonly-used Bootstrap 3 class — handy for compact toolbars and table row actions — but it was removed in later versions. Bootstrap 4 and 5 only ship .btn-lg and .btn-sm; there is no built-in extra-small button anymore.Full-Width Buttons: .btn-block
Add .btn-block to make a button span the full width of its parent — great for mobile forms and single-action cards.
<button type="button" class="btn btn-primary btn-block">Full-Width Button</button>Disabled Buttons
For an <a> element styled as a disabled button, add the .disabled class (links can't carry a real disabled attribute). For an actual <button> or <input>, use the disabled attribute — Bootstrap's CSS fades it and removes pointer events automatically.
<button type="button" class="btn btn-primary" disabled="disabled">Disabled</button>
<a href="#" class="btn btn-default disabled">Disabled Link</a>Buttons on Different Elements
.btn classes work identically on <a>, <button>, and <input type="button"> / <input type="submit">, so you can pick whichever element fits the job — a link that navigates, a button that runs JavaScript, or a submit input inside a form.
<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">TrailMap Example: Submit Trail Buttons
TrailMap lets hikers submit a new trail for review. We give the primary action a large, full-width, brand-colored button, and a smaller neutral "Save Draft" button next to a "Discard" danger button:
<!-- TrailMap: "Submit Trail" form actions -->
<button type="submit" class="btn btn-success btn-lg btn-block">Submit Trail for Review</button>
<button type="button" class="btn btn-default">Save Draft</button>
<button type="button" class="btn btn-danger btn-sm">Discard</button>.btn-group.