Buttons

Bootstrap really helps to create slick professional buttons with no hassle without having to write CSS from the ground up. You simply add classes to an (or) element to make it more appealing

1. The Base Class

All Bootstrap buttons have the btn class, which sets up the padding, font-size, and positioning. But a button with only btn is transparent, so you need to stick a color class next to it:

HTML

<button type="button" class="btn btn-primary">Click Me</button>

2. Color Varieties (The “Theme” Classes)

Bootstrap uses semantic names for colors, meaning the name describes the intent (like “danger” for a delete button) rather than just the color name.

Class	Color	Common Use
`btn-primary`	Blue	Main actions (Submit, Save)
`btn-secondary`	Grey	Less important actions (Cancel)
`btn-success`	Green	Positive actions (Complete, Success)
`btn-danger`	Red	Negative actions (Delete, Remove)
`btn-warning`	Yellow	Cautionary actions
`btn-info`	Teal	Neutral info or instructions
`btn-light`	White/Light Grey	Subtle actions on dark backgrounds
`btn-dark`	Black/Dark Grey	High contrast actions
`btn-link`	Transparent	Looks like a text link but acts like a button

3. Outline Buttons

If you want a cleaner look where the button is hollow and only fills with color when you hover over it, replace btn-[color] with btn-outline-[color].

Example: class="btn btn-outline-primary"
Result: A blue border with a transparent background that turns blue when moused over.

4. Controlling the Size

By default, buttons are medium-sized. You can change this by adding a sizing class:

Large: btn-lg (Big and bold)
Small: btn-sm (Compact for tight spaces)
Block Level: To make a button span the full width of its container, you wrap it in a div with the class d-grid.

5. States: Active and Disabled

You can provide a visual indication to the user of whether a button is “pressed” or not accessible until they are)

Disabled: Add the disabled attribute to a <button> tag. It will look faded and won’t respond to clicks.
Active: Applies the active class to the button which makes it look darker (like it is toggled on).

6. Button Groups

To relate radio buttons for example “Left”, “Center” and “Right” alignments, you may glue it together with btn-group class on a parent container.

HTML

<div class="btn-group">
  <button class="btn btn-primary">Left</button>
  <button class="btn btn-primary">Middle</button>
  <button class="btn btn-primary">Right</button>
</div>