BootstrapHow-ToBeginner · 3 min read

How to Use Button Colors in Bootstrap: Simple Guide

In Bootstrap, you use button colors by adding predefined classes like btn-primary, btn-success, or btn-danger to a button element along with the base btn class. These classes style the button with different colors to indicate various actions or statuses.

📐

Syntax

To color a button in Bootstrap, use the base class btn plus one of the color classes like btn-primary, btn-secondary, btn-success, btn-danger, btn-warning, btn-info, btn-light, or btn-dark.

Example: <button class="btn btn-primary">Primary</button>

html

<button class="btn btn-primary">Primary</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-danger">Danger</button>

Output

Three buttons labeled Primary (blue), Success (green), and Danger (red) with Bootstrap styling.

💻

Example

This example shows how to create buttons with different Bootstrap color classes. Each button uses the btn class plus a color class to change its background and border color.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap Button Colors Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container mt-4">
    <button type="button" class="btn btn-primary">Primary</button>
    <button type="button" class="btn btn-secondary">Secondary</button>
    <button type="button" class="btn btn-success">Success</button>
    <button type="button" class="btn btn-danger">Danger</button>
    <button type="button" class="btn btn-warning">Warning</button>
    <button type="button" class="btn btn-info">Info</button>
    <button type="button" class="btn btn-light">Light</button>
    <button type="button" class="btn btn-dark">Dark</button>
  </div>
</body>
</html>

Output

A webpage with eight buttons in a row, each with distinct Bootstrap colors: blue, gray, green, red, yellow, teal, light gray, and dark gray backgrounds.

⚠️

Common Pitfalls

Common mistakes when using Bootstrap button colors include:

Forgetting to include the base btn class, which results in no Bootstrap styling.
Using incorrect class names like button-primary instead of btn-primary.
Not loading the Bootstrap CSS file, so the classes have no effect.
Overriding Bootstrap styles unintentionally with custom CSS.

html

<!-- Wrong: missing base btn class -->
<button class="btn-primary">No Style</button>

<!-- Correct: includes base btn class -->
<button class="btn btn-primary">Styled Button</button>

Output

The first button appears as a plain button with no color styling; the second button appears with the Bootstrap primary blue color.

📊

Quick Reference

Class	Button Color	Use Case
btn-primary	Blue	Main action or primary button
btn-secondary	Gray	Secondary actions
btn-success	Green	Success or positive action
btn-danger	Red	Danger or destructive action
btn-warning	Yellow	Warning or caution
btn-info	Teal	Informational messages
btn-light	Light Gray	Light background buttons
btn-dark	Dark Gray	Dark background buttons

✅

Key Takeaways

Always use the base class btn with a color class like btn-primary to style buttons.

Bootstrap provides several color classes to indicate different meanings for buttons.

Make sure to include Bootstrap CSS in your project for the classes to work.

Avoid typos in class names and remember that btn is required for styling.

Use the color classes consistently to improve user understanding and UI clarity.