Bootstrap Buttons, Badges and Alerts
Buttons, badges and alerts are small components you will use on almost every Bootstrap page.
Buttons
Add the base class btn plus a colour class like btn-primary. The class works on <button>, <a> and <input> elements.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="p-4">
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Delete</button>
<button type="button" class="btn btn-warning">Warning</button>
<a href="#" class="btn btn-dark">Link as button</a>
<hr>
<button type="button" class="btn btn-outline-primary">Outline</button>
<button type="button" class="btn btn-outline-secondary">Cancel</button>
</body>
</html>btn-outline-* buttons have only a border and coloured text, and fill in when you hover.
Sizes and States
| Class or attribute | Effect |
|---|---|
btn-lg | Large button |
btn-sm | Small button |
w-100 | Full-width button |
disabled attribute | Greyed out, cannot be clicked |
active class | Looks pressed |
Example
<button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-primary btn-sm">Small</button>
<button type="button" class="btn btn-secondary" disabled>Disabled</button>
<button type="button" class="btn btn-success w-100 mt-2">Pay Rs 2,500</button>Button Groups
Put buttons inside a btn-group to join them together:
Example
<div class="btn-group" role="group">
<button type="button" class="btn btn-outline-primary">Day</button>
<button type="button" class="btn btn-outline-primary active">Week</button>
<button type="button" class="btn btn-outline-primary">Month</button>
</div>Badges
A badge is a small label or counter. Use badge with a text-bg-* colour.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="p-4">
<h4>Web Development <span class="badge text-bg-success">New</span></h4>
<p>Seats left: <span class="badge text-bg-danger rounded-pill">3</span></p>
<button type="button" class="btn btn-primary">
Messages <span class="badge text-bg-light">5</span>
</button>
</body>
</html>Alerts
Alerts show feedback messages. Use alert plus a colour, and add role="alert" so screen readers announce them.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="p-4">
<div class="alert alert-success" role="alert">Your admission form was submitted.</div>
<div class="alert alert-warning" role="alert">Classes are off on Friday due to rain.</div>
<div class="alert alert-danger alert-dismissible fade show" role="alert">
<strong>Error:</strong> The CNIC number must have 13 digits.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>The last alert has a close button. It needs the Bootstrap JavaScript bundle, which reads data-bs-dismiss="alert" and removes the alert when clicked.
Always add type="button" to buttons that are not meant to submit a form. Inside a <form>, a button without a type submits the form by default.
Exercise
Exercise
Which classes make a green button with only a border and green text?