Buttons
A single class, btn, turns a plain <button> (or even an <a>) into a properly padded, rounded, clickable-looking element — pair it with a color modifier and you have a finished button with no custom CSS at all.
Color variants
HTML index.html
<button class="btn btn-primary">Primary</button> <button class="btn btn-secondary">Secondary</button> <button class="btn btn-success">Success</button> <button class="btn btn-danger">Danger</button>
Rendered result
Four solid, rounded-corner buttons side by side, each filled with a different theme color and white text: blue, gray, green, and red — every one already has hover and focus styling built in, without you writing a line of CSS.
Outline buttons
Add outline- before the color name for a lighter, bordered-only style — useful for a secondary action that shouldn't compete visually with a primary button next to it:
HTML index.html
<button class="btn btn-primary">Save</button> <button class="btn btn-outline-secondary">Cancel</button>
Rendered result
A solid blue "Save" button next to a "Cancel" button that's just an outlined gray border with gray text on a transparent background — visually clearly secondary to "Save," even though both are the same size.
Sizes and disabled state
HTML index.html
<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" disabled>Disabled</button>
Rendered result
Three blue buttons of visibly decreasing size — large, default, small — followed by a fourth blue button that looks faded/washed-out and doesn't respond to hover, matching the standard "this is unavailable" look.
The disabled attribute is plain HTML, not a Bootstrap class — Bootstrap just supplies the faded styling and turns off pointer events for any element carrying it.
Note:
btn works on <a href="..."> just as well as <button>, and it's tempting to use whichever one you reach for first — but they mean different things. A <button> triggers an action on the current page (submitting a form, opening a modal); an <a> navigates somewhere. Styling one as the other doesn't change what it does, and screen readers announce them differently — pick based on behavior, not looks.