Bootstrap Components Explained — Alerts, Buttons, Cards & Accordion
Bootstrap components are pre-built, reusable HTML/CSS/JS patterns for common UI needs — like a furniture showroom with ready-to-use pieces instead of building from raw wood.
What You’ll Learn
- Display dismissible alerts with semantic color variants
- Use badges for notification counts and labels
- Create buttons with colors, outlines, sizes, and groups
- Build cards with headers, images, and grid layouts
- Implement collapse, accordion, progress bars, and spinners
Why Components Matter
Building UI patterns from scratch (alerts, buttons, cards) requires consistent CSS for colors, padding, hover states, and responsive behavior. Bootstrap’s components are accessible, responsive, and cross-browser tested out of the box.
At DodaTech, Durga Antivirus Pro uses alert components for threat notifications, Doda Browser uses cards for bookmark previews, and DodaZIP uses progress bars for file compression status — all leveraging Bootstrap’s pre-built components.
Your Learning Path
flowchart LR
A[Bootstrap Content] --> B[Components 1: Alerts, Buttons, Cards]
B --> C[Components 2: Nav, Navbar, Dropdowns]
C --> D[Components 3: Modals, Carousel, Tooltips]
D --> E[Bootstrap Forms]
B:::current
classDef current fill:#0d6efd,color:#fff,stroke:#0a58ca,stroke-width:2px
bootstrap.bundle.min.js (the JS bundle) for interactive components like collapse and accordion. See the Bootstrap Basics.Alerts — Communicating Messages
Alerts are styled message boxes that convey information, warnings, or errors. Think of them as color-coded sticky notes on your page.
<!-- Each alert uses a semantic color class:
- primary (blue) = general information
- success (green) = positive outcome
- danger (red) = error or critical issue
- warning (yellow) = caution
- info (cyan) = neutral information -->
<div class="alert alert-primary">Simple primary alert</div>
<div class="alert alert-success">Success! Operation completed.</div>
<div class="alert alert-danger">Error! Something went wrong.</div>
<div class="alert alert-warning">Warning! Check your input.</div>
<div class="alert alert-info">Info: new updates available.</div>
<!-- Dismissible alert: add alert-dismissible + fade show + close button.
The data-bs-dismiss="alert" attribute tells Bootstrap to hide this
alert when the close button is clicked. -->
<div class="alert alert-warning alert-dismissible fade show">
<strong>Warning!</strong> Your session will expire soon.
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
<!-- Alert with a link: use alert-link to match the alert color -->
<div class="alert alert-info">
Read our <a href="#" class="alert-link">terms and conditions</a>.
</div>Why fade show? fade enables the fade-in animation, show makes the alert visible initially. Without show, the alert would be hidden.
Badges — Small Labels and Counts
Badges are small text labels for counts, statuses, or tags. They’re designed to sit inside other elements.
<!-- Basic badges use bg-* for background color -->
<span class="badge bg-primary">Primary</span>
<span class="badge bg-success">Success</span>
<span class="badge bg-danger">Danger</span>
<span class="badge bg-warning text-dark">Warning</span> <!-- text-dark for contrast -->
<span class="badge bg-info text-dark">Info</span>
<!-- Pill shape: add rounded-pill for capsule shape -->
<span class="badge rounded-pill bg-primary">99+</span>
<!-- Badge inside a button: positioned as a notification counter -->
<button class="btn btn-primary position-relative">
Inbox
<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
99+ <span class="visually-hidden">unread messages</span>
</span>
</button>
<!-- Badge can also be a link -->
<a href="#" class="badge bg-primary">Link badge</a>Buttons — Action Triggers
Buttons come in color variants, outline styles, and sizes:
<!-- Color variants: the class pattern is btn btn-{color} -->
<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-danger">Danger</button>
<button class="btn btn-warning">Warning</button>
<button class="btn btn-info">Info</button>
<button class="btn btn-light">Light</button>
<button class="btn btn-dark">Dark</button>
<button class="btn btn-link">Link (looks like hyperlink)</button>
<!-- Outline buttons: transparent background, colored border -->
<button class="btn btn-outline-primary">Primary Outline</button>
<button class="btn btn-outline-danger">Danger Outline</button>
<!-- Sizes -->
<button class="btn btn-primary btn-lg">Large button</button>
<button class="btn btn-primary">Default</button>
<button class="btn btn-primary btn-sm">Small button</button>
<!-- Full-width block button -->
<button class="btn btn-primary d-grid w-100">Full width</button>
<!-- States -->
<button class="btn btn-primary" disabled>Disabled (can't click)</button>
<button class="btn btn-primary active">Active (pressed state)</button>
<!-- Button with loading spinner -->
<button class="btn btn-primary" disabled>
<span class="spinner-border spinner-border-sm"></span>
Loading...
</button>Button Groups — Grouping Related Actions
<!-- Horizontal group: buttons merge together visually -->
<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>
<!-- Button toolbar: multiple groups in a row -->
<div class="btn-toolbar">
<div class="btn-group me-2">...</div>
<div class="btn-group">...</div>
</div>
<!-- Vertical group: stacked -->
<div class="btn-group-vertical">
<button class="btn btn-primary">Top</button>
<button class="btn btn-primary">Middle</button>
<button class="btn btn-primary">Bottom</button>
</div>Cards — Content Containers
Cards are flexible content containers. Think of them as digital index cards — each one holds related content (image, text, links) in a distinct visual box.
<!-- Basic card: card wraps everything, card-body holds the content.
style="width: 18rem;" controls the card width. Without it,
the card expands to fill its parent. -->
<div class="card" style="width: 18rem;">
<!-- card-img-top: image sits ABOVE the body -->
<img src="photo.jpg" class="card-img-top" alt="Card image">
<div class="card-body">
<h5 class="card-title">Card Title</h5>
<p class="card-text">Some quick example text for the card.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
<!-- Card with header and footer -->
<div class="card">
<div class="card-header">Featured</div>
<div class="card-body">
<h5 class="card-title">Special title</h5>
<p class="card-text">Content here.</p>
</div>
<div class="card-footer text-muted">2 days ago</div>
</div>
<!-- Horizontal card: image on left, content on right using grid -->
<div class="card mb-3" style="max-width: 540px;">
<div class="row g-0">
<div class="col-md-4">
<img src="photo.jpg" class="img-fluid rounded-start" alt="...">
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">Horizontal Card</h5>
<p class="card-text">Content beside the image.</p>
</div>
</div>
</div>
</div>
<!-- Card grid: row-cols creates a responsive card grid.
1 column on mobile, 3 on md+ -->
<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col"><div class="card">...</div></div>
<div class="col"><div class="card">...</div></div>
<div class="col"><div class="card">...</div></div>
</div>Collapse & Accordion — Show/Hide Content
Collapse toggles the visibility of content. Accordion is a group of collapses where only one stays open.
<!-- Basic collapse: clicking the button toggles the content.
data-bs-toggle="collapse" tells Bootstrap what to do.
data-bs-target="#collapseExample" says which element to toggle. -->
<p>
<a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample">
Toggle content
</a>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-body">Hidden content revealed.</div>
</div>
<!-- Accordion: multiple collapsible items, one opens at a time.
data-bs-parent="#accordionExample" links items together —
when one opens, others close. -->
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne">
Accordion Item #1
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
<div class="accordion-body">Content for item 1.</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo">
Accordion Item #2
</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
<div class="accordion-body">Content for item 2.</div>
</div>
</div>
</div>Why data-bs- prefix? Bootstrap 5 uses data-bs- (not data-) to avoid conflicts with other JavaScript frameworks and custom data attributes.
Progress Bars — Visual Task Completion
<!-- Basic progress bar: the outer div is the track,
the inner div is the filled portion. -->
<div class="progress">
<div class="progress-bar" style="width: 25%">25%</div>
</div>
<!-- Colored variants -->
<div class="progress">
<div class="progress-bar bg-success" style="width: 40%">40%</div>
</div>
<!-- Striped effect -->
<div class="progress">
<div class="progress-bar progress-bar-striped" style="width: 65%">65%</div>
</div>
<!-- Animated striped (stripes move) -->
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 75%">75%</div>
</div>
<!-- Multiple bars stacked -->
<div class="progress">
<div class="progress-bar bg-success" style="width: 35%">35%</div>
<div class="progress-bar bg-warning" style="width: 20%">20%</div>
<div class="progress-bar bg-danger" style="width: 10%">10%</div>
</div>Spinners — Loading Indicators
<!-- Border spinner (circular rotating ring) -->
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<!-- Growing spinner (pulsating circle) -->
<div class="spinner-grow" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<!-- Colored spinners -->
<div class="spinner-border text-primary"></div>
<div class="spinner-border text-danger"></div>
<!-- Sizes -->
<div class="spinner-border spinner-border-sm"></div>
<div class="spinner-border" style="width: 3rem; height: 3rem;"></div>Common Mistakes
1. Forgetting data-bs- prefix
Bootstrap 5 uses data-bs-toggle, data-bs-target, data-bs-dismiss (not data-toggle, data-target). The old Bootstrap 4 prefixes don’t work.
2. Placing content directly in .card without .card-body
Content inside a card must be wrapped in .card-body. Without it, there’s no padding and the text touches the card edges.
3. Not including the JS bundle for interactive components
Collapse, accordion, and dismissible alerts require Bootstrap’s JavaScript. HTML-only Bootstrap (CSS only) won’t toggle anything.
4. Removing data-bs-parent breaks accordion behavior
Without data-bs-parent, accordion items become independent collapses — multiple items can be open at once.
5. Using inline styles for progress bar colors instead of bg-*
Use bg-success, bg-warning, bg-danger etc. on progress bars. Inline style="background: red" won’t integrate with Bootstrap’s theme.
Practice Questions
What class do you add to make an alert dismissible? Answer:
alert-dismissibleon the alert container, plus a<button class="btn-close" data-bs-dismiss="alert">inside it.How do you make all cards in a row the same height? Answer: Add
h-100to each.card(or to the.card-body). This forces all cards to fill their grid column height equally.What’s the difference between
collapseandaccordion? Answer: Collapse is a single toggle (show/hide). Accordion is a group of collapses linked bydata-bs-parent— only one item stays open at a time.Why do some badges need
text-darkadded? Answer: Warning and info backgrounds are light-colored. Dark text on a light background is readable. Primary/dark backgrounds need white text.How do you create a loading button? Answer: Add a spinner inside the button and disable it:
<button class="btn btn-primary" disabled><span class="spinner-border spinner-border-sm"></span> Loading...</button>.
Challenge: Build a pricing page with 3 cards (Basic, Pro, Enterprise) in a responsive grid. The middle card (Pro) should be highlighted with a primary border. Include a badge on each card saying “Popular” for the Pro plan only.
FAQ
Try It Yourself
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Pricing Plans</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container py-5">
<h1 class="text-center display-5">Pricing Plans</h1>
<p class="text-center lead text-muted mb-5">Choose the plan that fits your needs</p>
<div class="row row-cols-1 row-cols-md-3 g-4 justify-content-center">
<div class="col">
<div class="card h-100 text-center">
<div class="card-header"><h5 class="mb-0">Basic</h5></div>
<div class="card-body">
<h2 class="card-title display-6">$9<span class="fs-6 text-muted">/mo</span></h2>
<ul class="list-unstyled mt-3 mb-4">
<li class="py-1">10 GB Storage</li>
<li class="py-1">5 Users</li>
<li class="py-1">Email Support</li>
</ul>
<button class="btn btn-outline-primary w-100">Get Started</button>
</div>
</div>
</div>
<div class="col">
<div class="card h-100 text-center border-primary">
<div class="card-header bg-primary text-white">
<h5 class="mb-0">Pro <span class="badge bg-light text-dark ms-2">Popular</span></h5>
</div>
<div class="card-body">
<h2 class="card-title display-6">$29<span class="fs-6 text-muted">/mo</span></h2>
<ul class="list-unstyled mt-3 mb-4">
<li class="py-1">50 GB Storage</li>
<li class="py-1">Unlimited Users</li>
<li class="py-1">Priority Support</li>
</ul>
<button class="btn btn-primary w-100">Get Started</button>
</div>
</div>
</div>
<div class="col">
<div class="card h-100 text-center">
<div class="card-header"><h5 class="mb-0">Enterprise</h5></div>
<div class="card-body">
<h2 class="card-title display-6">$99<span class="fs-6 text-muted">/mo</span></h2>
<ul class="list-unstyled mt-3 mb-4">
<li class="py-1">500 GB Storage</li>
<li class="py-1">Unlimited Users</li>
<li class="py-1">24/7 Phone Support</li>
</ul>
<button class="btn btn-outline-primary w-100">Contact Us</button>
</div>
</div>
</div>
</div>
<div class="mt-5">
<div class="alert alert-info d-flex align-items-center">
<div>All plans include a 14-day free trial. No credit card required.</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>This sandbox demonstrates: cards with header/body/footer, buttons (outline, primary, full-width), badges, alerts, and grid layout — a complete pricing page.
What’s Next
| Topic | Description |
|---|---|
| Bootstrap Navigation | Navs, navbar, dropdowns, pagination |
| Bootstrap Interactive Components | Modals, carousel, tooltips, popovers |
| Bootstrap Forms | Form inputs, validation, and layout |
| CSS Flexbox | The layout engine behind Bootstrap components |
What’s Next
Congratulations on completing this Bootstrap Components 1 tutorial! Here’s where to go from here:
- Practice daily — Consistency is more important than long study sessions
- Build a project — Apply what you learned by building something real
- Explore related topics — Check out other tutorials in the same category
- Join the community — Discuss with other learners and share your progress
Remember: every expert was once a beginner. Keep coding!
Built by the developers of DodaTech
Doda Browser, DodaZIP & Durga Antivirus Pro