Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Fix the driver behind crashes, sound loss and screen glitches3Repair Windows errors before they cause bigger problemsIn Bootstrap 5.3, create a button by adding .btn and a variant such as .btn-primary to a native <button>. Create a badge with .badge and a color helper such as .text-bg-secondary. The examples below use Bootstrap 5.3; match the markup to the version your project loads.
Load Bootstrap 5.3
The CDN is a quick way to try these examples. Bootstrap’s quick-start documentation showed version 5.3.8 in its CDN examples when checked on October 3, 2026. If your project already uses Bootstrap, keep its existing version rather than adding a second copy. Bootstrap also documents package-manager installation and module setup.
As an Amazon Associate I earn from qualifying purchases.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap buttons and badges</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<main class="container py-4">
<button type="button" class="btn btn-primary">Save changes</button>
<span class="badge text-bg-secondary">New</span>
</main>
</body>
</html>For installation alternatives and current setup guidance, see Bootstrap’s getting-started documentation.
How do I create a Bootstrap button?
Use the base .btn class with one variant. Choose a native <button> for an action such as saving or submitting a form:
#1 Best Overall
<button type="button" class="btn btn-primary">Save changes</button>The available variants are .btn-primary, .btn-secondary, .btn-success, .btn-danger, .btn-warning, .btn-info, .btn-light, .btn-dark, and .btn-link. A variant affects appearance; give the control clear action text rather than relying on color to explain its purpose.
Choose a solid or outlined style
A solid variant gives an action stronger visual emphasis. To use an outlined treatment instead, replace the variant with its .btn-outline-* counterpart:
<button type="button" class="btn btn-outline-primary">View details</button>Some variants use light foreground colors and need a dark background for sufficient contrast. Check the actual foreground and background pairing on the finished page.
Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minutePC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Make a button small or large
Add .btn-sm or .btn-lg alongside the existing classes:
<button type="button" class="btn btn-primary btn-sm">Compact</button>
<button type="button" class="btn btn-primary btn-lg">Continue</button>For a custom size, set local button variables instead of changing every button globally:
<button type="button" class="btn btn-primary custom-button">Custom size</button>
<style>
.custom-button {
--bs-btn-padding-y: 0.6rem;
--bs-btn-padding-x: 1.2rem;
--bs-btn-font-size: 1.1rem;
}
</style>Use an anchor only for navigation
Use an <a> when the control navigates to a URL. Bootstrap styles anchors too. If an anchor triggers an in-page action instead of navigating, add role="button"; prefer a native button for actions where possible.
<a class="btn btn-primary" href="/account">Open account</a>
<a class="btn btn-primary" role="button" href="#refresh">Refresh panel</a>The base .btn class without a variant does not provide explicit hover and focus styling. If you use it alone, add your own visible :focus or :focus-visible styles.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Make buttons full width or stack them
Bootstrap 5.3 uses display and gap utilities for this layout. This replaces the older Bootstrap 4 .btn-block approach:
<div class="d-grid gap-2">
<button class="btn btn-primary" type="button">Save</button>
<button class="btn btn-secondary" type="button">Cancel</button>
</div>Use responsive display utilities when the buttons should stack at some viewport sizes and sit inline at others; adjust the layout at the breakpoint that suits your page.
How do I create a Bootstrap badge?
Add .badge and a color helper. Bootstrap 5.2 introduced .text-bg-{color} helpers, which combine a background with a contrasting foreground color:
<span class="badge text-bg-secondary">New</span>For a rounder shape, add .rounded-pill. Badge text scales with the font size of its immediate parent, so a badge inside a heading will inherit that larger context.
<span class="badge rounded-pill text-bg-primary">Featured</span>Older Bootstrap examples may pair .bg-* and .text-* utilities manually. For current 5.3 markup, use the combined .text-bg-* helper where it fits.
How do I add a badge to a Bootstrap button?
Put the badge inside the button and include visible text that explains the count:
<button type="button" class="btn btn-primary">
Notifications <span class="badge text-bg-secondary">4</span>
</button>Here, “Notifications” gives the number context. If a count or color would be unclear when read without visual context, add a text explanation with .visually-hidden.
Position a count on the button corner
Make the button a positioning context with .position-relative, then place the badge using positioning utilities. Include hidden text so the count’s meaning is not conveyed only by its location:
Free tools Windows power users keep installed
One-click scans. No signup required.
<button type="button" class="btn btn-primary position-relative">
Messages
<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill text-bg-danger">
4
<span class="visually-hidden">unread messages</span>
</span>
</button>See the official Bootstrap 5.3 badges documentation for the badge utilities and examples.
Represent disabled and toggled states correctly
Disable a native button
Use the native boolean attribute on a <button> when it cannot currently be activated:
<button type="button" class="btn btn-primary" disabled>Submitting…</button>Disable an anchor
An anchor does not support the disabled attribute. Bootstrap recommends the .disabled class with aria-disabled="true", and omitting href if possible:
Rank #4
<a class="btn btn-primary disabled" aria-disabled="true">Unavailable</a>If an href must remain, Bootstrap warns that pointer-events: none does not prevent keyboard activation. Also use tabindex="-1" and custom JavaScript to prevent the action.
Recommended Free Tools
Mark an already-on toggle
For a button that starts in a pressed state, include .active and aria-pressed="true" in its initial markup:
<button type="button" class="btn btn-primary active" aria-pressed="true">
Follow
</button>These attributes describe the initial state; if your interface lets the user toggle the button, update its pressed state along with the interaction.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Check accessibility and contrast
- Use meaningful visible text for the action, and do not rely on variant color alone to communicate meaning.
- Give badge counts context in visible wording or with
.visually-hiddentext, especially for corner-positioned counts. - Check contrast for the actual text and background combination. Bootstrap notes that some default palette combinations may not meet its cited WCAG 2.1 contrast recommendations, particularly against a light background.
- Test keyboard focus and interaction in the rendered page. Bootstrap’s accessibility guidance stresses that accessibility depends substantially on the author’s markup, styling, and scripting.
For further guidance, see Bootstrap’s accessibility overview.
Troubleshoot common button and badge problems
- The button has no expected style: confirm that Bootstrap CSS is loaded and that the page uses compatible markup for the loaded version. A button generally needs both
.btnand a variant class. - The button looks wrong on a light background: a light variant may need a dark surrounding surface. Check the foreground/background contrast rather than assuming a default variant is suitable.
- The count is hard to understand: add a visible label such as “Notifications” or a hidden explanation. Do not expect color or corner placement alone to convey meaning.
- An anchor still activates when styled as disabled:
.disabledandaria-disableddo not by themselves block keyboard activation if the link retains anhref. Omit the URL when possible; otherwise addtabindex="-1"and JavaScript that prevents activation. - Buttons no longer span the container: in Bootstrap 5.3, replace obsolete
.btn-blockmarkup with layout utilities such as.d-gridand.gap-2.
Or skip the browser setup
If you need a screenshot of the finished page, ScreenshotNeo can capture it through one GET request. This example saves a WebP shot of a Bootstrap page; replace the target URL with your page’s URL. See the ScreenshotNeo API documentation for request options.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp- Cookie banners are accepted and removed before capture; supported cleanup also removes known newsletter popups and chat widgets.
- Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed; response headers identify the page verdict and billing status.
- An MCP server provides
take_screenshot,get_page_info, andcapture_pdftools for AI agents. - The free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000 screenshots.
Sign up free for 1,000 screenshots a month, with no card required.
Quick Recap
Official Bootstrap references
- Buttons · Bootstrap v5.3
- Badges · Bootstrap v5.3
- Get started with Bootstrap · Bootstrap v5.3
- Accessibility · Bootstrap v5.0
- Migrating to v5 · Bootstrap v5.3
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
