Bootstrap Buttons
Bootstrap's .btn class instantly styles buttons, links, and inputs consistently. Combine it with a color variant like .btn-primary or .btn-outline-danger to match your design's meaning and style.
You can also control button size with .btn-lg or .btn-sm, and create disabled or block-level (full-width) buttons using additional utility classes.
<button class="btn btn-primary">Button</button>Button styles
Solid variants like .btn-primary have a filled background, while outline variants like .btn-outline-primary show only a colored border and text until hovered.
Sizes and states
Add .btn-lg or .btn-sm to change size. Add the disabled attribute (or .disabled class on links) to prevent interaction, and .w-100 to make a button full width.
<button class="btn btn-primary">Primary</button>
<button class="btn btn-outline-danger">Outline Danger</button>A solid blue button and an outlined red buttonbtn-primary is filled, while btn-outline-danger only shows the border and text color until hovered.
<button class="btn btn-success btn-lg w-100">Large Full-Width Button</button>A large green button that stretches across the full width of its containerbtn-lg increases the button's size, and w-100 makes it span 100% of the parent width.
Key points
- .btn is the base class for all Bootstrap buttons.
- Color variants include primary, secondary, success, danger, warning, info, light, dark.
- Outline variants use .btn-outline-{color}.
- .btn-lg and .btn-sm change button size.