Embark on a journey of knowledge! Take the quiz and earn valuable credits.
Take A QuizChallenge yourself and boost your learning! Start the quiz now to earn credits.
Take A QuizUnlock your potential! Begin the quiz, answer questions, and accumulate credits along the way.
Take A Quiz
🧠 Why This Chapter
Matters
Bootstrap's true power lies in its rich set of ready-to-use
components that help developers build polished, interactive interfaces without
writing complex code from scratch. From buttons and cards to modals and
navbars, these components are styled and responsive by default, significantly
reducing development time.
This chapter walks you through the most essential Bootstrap
components, how to use them, customize them, and combine them for professional,
production-ready UIs.
✅ 1. Buttons
🔹 Basic Usage
<button
class="btn btn-primary">Primary</button>
<button
class="btn btn-secondary">Secondary</button>
Class |
Description |
btn |
Base class for all buttons |
btn-primary |
Blue Bootstrap button |
btn-outline-* |
Outline variant |
btn-lg / btn-sm |
Size variations |
🔹 Example:
<button
class="btn btn-danger btn-lg">Delete</button>
✅ Easily combine with disabled,
active, or block buttons using additional classes.
✅ 2. Alerts
Used to notify users of success, warning, error, or info
messages.
<div
class="alert alert-success" role="alert">
Operation
successful!
</div>
Class |
Purpose |
alert |
Base class |
alert-success |
Green (positive) |
alert-danger |
Red (error) |
alert-warning |
Yellow (caution) |
alert-info |
Blue (information) |
🔹 Dismissible Alert
<div
class="alert alert-warning alert-dismissible fade show" role="alert">
Warning! Something went wrong.
<button type="button"
class="btn-close"
data-bs-dismiss="alert"></button>
</div>
✅ Requires Bootstrap’s JavaScript
for dismissal.
✅ 3. Cards
Cards are flexible content containers.
<div
class="card" style="width: 18rem;">
<img src="img.jpg"
class="card-img-top" alt="...">
<div class="card-body">
<h5
class="card-title">Title</h5>
<p class="card-text">Some
text content.</p>
<a href="#" class="btn
btn-primary">Go somewhere</a>
</div>
</div>
Feature |
Use |
card |
Wrapper for content |
card-body |
Main container |
card-img-top |
Image header |
✅ Combine cards with grids or use
for product listings, profile panels, etc.
✅ 4. Navbars
Navigation bars help users browse your site.
🔹 Responsive Navbar
<nav
class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand"
href="#">Brand</a>
<button class="navbar-toggler"
data-bs-toggle="collapse" data-bs-target="#mainNav">
<span
class="navbar-toggler-icon"></span>
</button>
<div class="collapse
navbar-collapse" id="mainNav">
<ul class="navbar-nav
ms-auto">
<li
class="nav-item"><a class="nav-link active"
href="#">Home</a></li>
<li
class="nav-item"><a class="nav-link"
href="#">About</a></li>
</ul>
</div>
</div>
</nav>
✅ Fully responsive with hamburger
menu on small screens.
✅ 5. Dropdowns
🔹 Basic Dropdown
<div
class="dropdown">
<button class="btn btn-secondary
dropdown-toggle" data-bs-toggle="dropdown">
Dropdown
</button>
<ul class="dropdown-menu">
<li><a
class="dropdown-item" href="#">Item
1</a></li>
<li><a
class="dropdown-item" href="#">Item
2</a></li>
</ul>
</div>
✅ Use inside navbars, toolbars,
or as standalone menus.
✅ 6. Modals (Popup Dialogs)
🔹 Trigger Button
<button
class="btn btn-primary" data-bs-toggle="modal"
data-bs-target="#myModal">
Launch Modal
</button>
🔹 Modal Structure
<div
class="modal fade" id="myModal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div
class="modal-header">
<h5
class="modal-title">Modal Title</h5>
<button class="btn-close"
data-bs-dismiss="modal"></button>
</div>
<div
class="modal-body">Modal content here</div>
<div
class="modal-footer">
<button class="btn
btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
✅ Great for forms, confirmations,
popups.
✅ 7. Tooltips & Popovers
🔹 Tooltip
<button
data-bs-toggle="tooltip" title="Tooltip text">Hover
me</button>
🔹 Enable Tooltips with JS
var
tooltipTriggerList =
[].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
tooltipTriggerList.map(function
(tooltipTriggerEl) {
return new
bootstrap.Tooltip(tooltipTriggerEl);
});
✅ Require JavaScript
initialization.
✅ 8. Accordions
Useful for FAQs or toggling sections.
<div
class="accordion" id="faqAccordion">
<div class="accordion-item">
<h2 class="accordion-header"
id="headingOne">
<button
class="accordion-button" data-bs-toggle="collapse"
data-bs-target="#collapseOne">
Question 1
</button>
</h2>
<div id="collapseOne"
class="accordion-collapse collapse show"
data-bs-parent="#faqAccordion">
<div
class="accordion-body">Answer to Question 1</div>
</div>
</div>
</div>
✅ Use data-bs-parent to keep it
one-at-a-time expandable.
✅ 9. Spinners & Progress Bars
🔹 Spinner
<div
class="spinner-border text-primary" role="status">
<span
class="visually-hidden">Loading...</span>
</div>
🔹 Progress
<div
class="progress">
<div class="progress-bar"
style="width: 50%;">50%</div>
</div>
✅ Useful for loading indicators
or multi-step forms.
✅ 10. Recap Table: Bootstrap
Components
Component |
Class/Tag Used |
Purpose |
Buttons |
btn, btn-* |
Actions |
Alerts |
alert, alert-* |
Notifications |
Cards |
card, card-body |
Content containers |
Navbar |
navbar, navbar-brand |
Site navigation |
Dropdowns |
dropdown, dropdown-menu |
Option menus |
Modals |
modal, modal-dialog |
Popups, dialogs |
Accordions |
accordion, accordion-item |
Toggle sections |
Tooltips |
tooltip |
Hover hints |
Spinners |
spinner-border |
Loading indicators |
Progress bars |
progress, progress-bar |
Completion feedback |
Bootstrap is a free front-end framework used to create responsive, mobile-first websites using HTML, CSS, and JavaScript components.
✅ Yes — Bootstrap is actively maintained and widely used in both small and enterprise-level projects.
BootstraDo I need to know JavaScript to use Bootstrap?p 5 dropped jQuery, introduced new utilities, improved grid systems, and enhanced customizability with CSS variables.
❌ No — you can use most components with just HTML and CSS. But knowing JavaScript enhances your control over dynamic components.
You can include it via a CDN, download it locally, or install it using npm or yarn.
✅ Yes — use Sass variables or override styles with your own custom CSS to match your branding.
They serve different purposes. Bootstrap offers pre-built components and design systems, while Tailwind is utility-first and highly customizable.
✅ Yes — use Bootstrap directly or with wrappers like React-Bootstrap or BootstrapVue.
Bootstrap uses a 12-column grid system with breakpoints for different screen sizes, allowing for responsive layouts.
Please log in to access this content. You will be redirected to the login page shortly.
LoginReady to take your education and career to the next level? Register today and join our growing community of learners and professionals.
Comments(0)