Bootstrap 5 Fundamentals: Complete Guide
Full Bootstrap 5 syllabus — containers, grid, components, forms, dark mode, and a landing page project with real-life examples.
Bootstrap HOME — what this course covers
Bootstrap is the world's most popular CSS framework. It gives you ready-made classes for layout, buttons, forms, navbars, and more — so you build good-looking pages faster.
This Rishtaara Bootstrap 5 course uses simple English, a real-life example, and copy-paste HTML with Bootstrap 5 classes.
Real-life example: Bootstrap is like a furniture kit from IKEA. You still assemble the page, but the legs, screws, and instructions are already prepared — you do not build every chair from raw wood.
- Layout: containers, grid, flex, utilities
- Components: buttons, cards, navbar, modal, carousel
- Forms: inputs, validation, floating labels
- Final project: complete landing page
Get Started — Bootstrap 5 CDN
The fastest way to use Bootstrap is the CDN (Content Delivery Network). Add one CSS link in <head> and one JS script before </body>. No download needed.
Bootstrap 5 does not need jQuery. Use bootstrap.bundle.min.js — it includes Popper for dropdowns, tooltips, and popovers.
Real-life example: CDN is like borrowing tools from a neighbor instead of buying a full toolbox. You link to Bootstrap's files on the internet and start building immediately.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My Bootstrap Page</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
rel="stylesheet"
/>
</head>
<body>
<h1 class="text-primary">Hello, Bootstrap 5!</h1>
<p class="lead">Built with the CDN — no install required.</p>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Basic Template
Every Bootstrap page needs: DOCTYPE, viewport meta tag, Bootstrap CSS, your content, then Bootstrap JS. The viewport meta tag makes the page work on mobile phones.
Put your custom CSS after Bootstrap's link so your rules can override defaults when needed.
Real-life example: The basic template is like a school exam answer sheet — fixed header (head), blank space for answers (body), and a footer stamp (scripts).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Rishtaara — Bootstrap Starter</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="style.css" rel="stylesheet" />
</head>
<body>
<div class="container py-4">
<h1>Welcome</h1>
<p>Your content goes here.</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Bootstrap Editor
Use VS Code with the Live Server extension. Create .html files, save, and the browser refreshes automatically. Press F12 to open DevTools and inspect Bootstrap classes.
You can also try an online HTML playground for quick experiments, but saving files locally is better for learning.
Real-life example: VS Code is your workshop bench. Live Server is the assistant who instantly shows you what you built without you walking to the display room every time.
- VS Code — free, syntax highlighting, extensions
- Live Server — auto refresh on save
- Browser DevTools (F12) — see which Bootstrap classes apply
Exercises, Quiz, Syllabus, Study Plan & Interview Prep
After each lesson, rebuild the examples yourself without looking. Change colors, text, and layout until it feels easy.
Rishtaara links MCQ quizzes and interview questions for Bootstrap once this course is wired up. Use the syllabus in lesson 22 as your checklist.
Real-life example: Reading about cricket is not the same as playing. Exercises are your practice nets — quizzes are the friendly match before the real game.
- Exercises: copy code, then modify it blind
- Quiz: test class names and component structure
- Study plan: 2 lessons per day → finish in ~12 days
- Interview prep: explain grid, utilities, and when to use Bootstrap vs Tailwind
Containers
A container wraps your content and centers it on the page with responsive horizontal padding. Bootstrap has three main options: .container (responsive max-width), .container-fluid (full width), and breakpoint-specific containers.
Use .container for most websites — it keeps text readable on large screens. Use .container-fluid for dashboards or full-bleed hero sections.
Real-life example: A container is like a tray on a dining table. The table is the full browser width; the tray keeps your plate and glass neatly in the middle with space on the sides.
<div class="container bg-light py-3 mb-3">
<h2>Fixed container</h2>
<p>Max-width changes at breakpoints — content stays centered.</p>
</div>
<div class="container-fluid bg-primary text-white py-3">
<h2>Fluid container</h2>
<p>Always 100% width of the screen.</p>
</div>Responsive containers
Classes like .container-sm, .container-md, .container-lg, .container-xl, and .container-xxl are 100% wide until their breakpoint, then behave like .container.
This is useful when you want edge-to-edge layout on phones but a boxed layout on desktop.
Real-life example: Responsive containers are like a window blind — fully open (wide) on a small room, but capped at a neat width when the wall is huge.
<div class="container-lg border p-4">
<p>Full width on phones. Becomes a boxed layout from the lg breakpoint up.</p>
</div>Grid Basic
Bootstrap's grid uses rows and columns. A .row goes inside a .container. Columns use .col-* classes. The grid has 12 columns — you can split a row into halves (.col-6 + .col-6), thirds (.col-4), or any combo that adds to 12.
Columns automatically stack on small screens unless you set larger breakpoint classes.
Real-life example: A 12-column grid is like a chocolate bar with 12 pieces. You can break off 6+6 for two friends, or 4+4+4 for three equal shares.
<div class="container">
<div class="row">
<div class="col-6 bg-primary text-white p-3">Half</div>
<div class="col-6 bg-secondary text-white p-3">Half</div>
</div>
<div class="row mt-2">
<div class="col-4 bg-info p-3">One third</div>
<div class="col-4 bg-info p-3">One third</div>
<div class="col-4 bg-info p-3">One third</div>
</div>
</div>Gutters and nesting
Rows have negative margins; columns have padding (gutters). Use .g-0 to remove gutters, or .gx-* / .gy-* for horizontal or vertical spacing.
You can put a .row inside a .col to nest grids — useful for complex layouts.
Real-life example: Gutters are the gap between photo frames on a wall. Nested rows are like putting a small shelf inside one big cupboard compartment.
<div class="container">
<div class="row g-4">
<div class="col-8">
<div class="row">
<div class="col-6 border p-2">Nested A</div>
<div class="col-6 border p-2">Nested B</div>
</div>
</div>
<div class="col-4 border p-2">Sidebar</div>
</div>
</div>Typography
Bootstrap styles headings, paragraphs, and lists automatically. Utility classes add emphasis: .lead for intro text, .text-muted for secondary text, .display-1 to .display-6 for huge hero headings.
Use .fw-bold, .fw-normal, .fst-italic, and .text-uppercase for quick text tweaks without custom CSS.
Real-life example: Typography classes are like font settings in Word — bold title, gray subtitle, big headline — without opening a separate design app.
<h1>h1 — page title</h1>
<p class="lead">Lead paragraph — slightly larger intro text.</p>
<p class="text-muted">Muted secondary information.</p>
<h1 class="display-4 fw-bold">Display heading for heroes</h1>
<p class="fs-3">Font size utility fs-3</p>Colors
Bootstrap has theme colors: primary, secondary, success, danger, warning, info, light, dark. Apply them with .text-* for text and .bg-* for backgrounds.
Add .text-bg-* on badges and components for accessible contrast pairs. Use .link-* to color links.
Real-life example: Theme colors are like a school house system — red team (danger), green team (success), blue team (primary). Everyone knows red means stop or error.
<p class="text-primary">Primary blue text</p>
<p class="text-danger">Danger red text</p>
<span class="badge text-bg-success">Success badge</span>
<span class="badge text-bg-warning">Warning badge</span>
<div class="p-3 mb-2 bg-info text-dark">Info background box</div>
<a href="#" class="link-danger">Danger link</a>Tables
Add .table to any <table> for Bootstrap styling. Variants: .table-striped (zebra rows), .table-bordered, .table-hover (highlight on mouse over), .table-sm (compact).
Wrap tables in .table-responsive so they scroll horizontally on small screens instead of breaking the layout.
Real-life example: A styled table is like a neat marksheet — columns line up, alternate rows are shaded, and you can spot your row when you hover.
<div class="table-responsive">
<table class="table table-striped table-hover">
<thead class="table-dark">
<tr>
<th>#</th>
<th>Name</th>
<th>Course</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Ali</td>
<td>Bootstrap 5</td>
</tr>
<tr>
<td>2</td>
<td>Sara</td>
<td>JavaScript</td>
</tr>
</tbody>
</table>
</div>Images
Use .img-fluid on images so they scale down on small screens (max-width: 100%). Shape helpers: .rounded, .rounded-circle, .img-thumbnail.
Always set alt text for accessibility. Combine with float utilities or grid columns for layouts.
Real-life example: .img-fluid is like a flexible rubber photo frame — it shrinks to fit a small wall but never spills outside the frame.
<img src="hero.jpg" alt="Team photo" class="img-fluid rounded mb-3" />
<img src="avatar.jpg" alt="Profile" class="rounded-circle" width="80" height="80" />
<img src="product.jpg" alt="Product" class="img-thumbnail" width="150" />Jumbotron — legacy note → use hero instead
Bootstrap 4 had a .jumbotron component. It was removed in Bootstrap 5. The modern replacement is a hero section: a big .container or .container-fluid with utility classes like .bg-light, .py-5, .display-4, and .lead.
Older Bootstrap tutorials still mention jumbotron for history — on BS5 projects, build heroes with utilities, not .jumbotron.
Real-life example: Jumbotron was like a fixed welcome arch at a park entrance. Now you build your own arch with banners (.bg-primary), big text (.display-4), and spacing (.py-5).
<div class="bg-primary text-white text-center py-5 mb-4">
<div class="container">
<h1 class="display-4 fw-bold">Learn Bootstrap 5</h1>
<p class="lead">Build responsive sites faster with ready-made components.</p>
<a class="btn btn-light btn-lg" href="#">Get Started</a>
</div>
</div>Alerts
Alerts show important messages. Use .alert with .alert-primary, .alert-success, .alert-warning, .alert-danger, etc. Add .alert-dismissible and a close button for dismissible alerts.
Use the role="alert" attribute for screen readers.
Real-life example: Alerts are like announcement slips on a school notice board — green for success, yellow for warning, red for urgent.
<div class="alert alert-success" role="alert">
Profile saved successfully!
</div>
<div class="alert alert-warning alert-dismissible fade show" role="alert">
Your session expires in 5 minutes.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>Buttons
Bootstrap buttons use .btn plus .btn-primary, .btn-secondary, .btn-success, etc. Sizes: .btn-lg and .btn-sm. .btn-outline-* gives bordered buttons.
Disable with the disabled attribute or .disabled class. Link buttons use <a class="btn btn-primary">.
Real-life example: Buttons are doorbells — primary is the main entrance, outline is the side door, disabled means out of order.
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-outline-danger">Outline</button>
<button type="button" class="btn btn-success btn-lg">Large</button>
<button type="button" class="btn btn-secondary btn-sm">Small</button>
<button type="button" class="btn btn-primary" disabled>Disabled</button>Button Groups
Wrap related buttons in .btn-group so they sit together. Use .btn-group-vertical for stacked groups. .btn-toolbar groups multiple button groups.
Real-life example: A button group is like linked train compartments — they move as one unit instead of separate carriages with gaps.
<div class="btn-group mb-3" role="group">
<button type="button" class="btn btn-outline-primary">Left</button>
<button type="button" class="btn btn-outline-primary">Middle</button>
<button type="button" class="btn btn-outline-primary">Right</button>
</div>
<div class="btn-group-vertical" role="group">
<button type="button" class="btn btn-secondary">Top</button>
<button type="button" class="btn btn-secondary">Bottom</button>
</div>Badges
Badges are small labels for counts or status. Use .badge with .text-bg-primary, .text-bg-danger, etc. .rounded-pill makes capsule badges.
Real-life example: Badges are like sticky number tags on shop items — "New", "3 unread", "Sale".
<h2>Messages <span class="badge text-bg-danger">4</span></h2>
<button type="button" class="btn btn-primary position-relative">
Inbox
<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill text-bg-danger">
99+
</span>
</button>Progress Bars
Show completion with .progress wrapping a .progress-bar. Set width with inline style or utilities. Add .progress-bar-striped and .progress-bar-animated for motion.
Use aria-valuenow, aria-valuemin, and aria-valuemax for accessibility.
Real-life example: A progress bar is like a download indicator — the blue fill shows how much of the movie has loaded.
<div class="progress mb-3" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar" style="width: 75%">75%</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated bg-success" style="width: 50%"></div>
</div>Spinners
Spinners show loading state. Use .spinner-border or .spinner-grow with .text-primary etc. Size with .spinner-border-sm.
Real-life example: A spinner is like a "please wait" sign at a bank counter — the page is working, not frozen.
<div class="spinner-border text-primary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-success ms-3" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-border spinner-border-sm" aria-hidden="true"></span>
Loading...
</button>Pagination
Pagination splits content across pages. Use <nav> with <ul class="pagination"> and <li class="page-item"> with <a class="page-link">.
Add .active on the current page and .disabled on unavailable links.
Real-life example: Pagination is like page numbers at the bottom of a textbook — you jump to chapter 3 without reading every page before it.
<nav aria-label="Course pages">
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">Previous</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active" aria-current="page"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>
</nav>List Groups
List groups display a series of items. Use <ul class="list-group"> with <li class="list-group-item">. Add .active, .disabled, or .list-group-item-action for clickable rows.
Combine with badges, buttons, or flush style (.list-group-flush) inside cards.
Real-life example: A list group is like a menu at a restaurant — each dish is one row, and the active item is today's special highlighted.
<ul class="list-group">
<li class="list-group-item active">Bootstrap lesson — in progress</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
HTML course
<span class="badge text-bg-primary rounded-pill">Done</span>
</li>
<li class="list-group-item disabled">React — locked</li>
</ul>Cards
Cards are flexible content boxes. Structure: .card > .card-body, optional .card-header, .card-footer, .card-title, .card-text, and .card-img-top.
Use grid columns to lay out multiple cards. .card-group and .card-deck patterns are replaced by grid rows in BS5.
Real-life example: Cards are like baseball trading cards — photo on top, name and stats below, all in one neat bordered packet.
<div class="card" style="max-width: 18rem;">
<img src="course.jpg" class="card-img-top" alt="Course cover" />
<div class="card-body">
<h5 class="card-title">Bootstrap 5</h5>
<p class="card-text">Learn layout and components step by step.</p>
<a href="#" class="btn btn-primary">Enroll</a>
</div>
</div>Card grid layout
Place cards inside .row and .col-* for responsive grids. Equal height cards work well with .h-100 on the .card.
Real-life example: A card grid is like a shop shelf — three products per row on desktop, one per row on mobile when columns stack.
<div class="container">
<div class="row g-4">
<div class="col-md-4">
<div class="card h-100">
<div class="card-body">
<h5 class="card-title">HTML</h5>
<p class="card-text">Structure the web.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card h-100">
<div class="card-body">
<h5 class="card-title">CSS</h5>
<p class="card-text">Style every page.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card h-100">
<div class="card-body">
<h5 class="card-title">Bootstrap</h5>
<p class="card-text">Build UI faster.</p>
</div>
</div>
</div>
</div>
</div>Dropdowns
Dropdowns need Bootstrap JS. Toggle with data-bs-toggle="dropdown" on a button or link. Menu items go in <ul class="dropdown-menu">.
Use .dropdown-item for links, .dropdown-divider for separators, and .dropdown-menu-end to align right.
Real-life example: A dropdown is like a restaurant menu that drops down when you tap "Menu" — hidden until needed, then a list of choices.
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
Choose course
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">HTML & CSS</a></li>
<li><a class="dropdown-item" href="#">JavaScript</a></li>
<li><hr class="dropdown-divider" /></li>
<li><a class="dropdown-item" href="#">Bootstrap 5</a></li>
</ul>
</div>Collapse
Collapse hides and shows content with a smooth animation. The trigger uses data-bs-toggle="collapse" and data-bs-target="#id". The panel needs .collapse and a unique id.
Add .show to start open. Accordion is built from multiple collapse panels (covered with components later).
Real-life example: Collapse is like an folding umbrella — click the handle and the content opens; click again and it folds away.
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#faq1">
Show answer
</button>
<div class="collapse mt-2" id="faq1">
<div class="card card-body">
Bootstrap 5 does not require jQuery — only the bundle JS file.
</div>
</div>Navs
Navs style navigation links. Use <ul class="nav"> with .nav-item and .nav-link. Tabs use .nav-tabs; pills use .nav-pills.
For tab panels, combine with tab JavaScript (data-bs-toggle="tab"). .flex-column stacks links vertically.
Real-life example: Nav tabs are like folder tabs in a file cabinet — each tab shows a different section without leaving the desk.
<ul class="nav nav-tabs mb-3">
<li class="nav-item"><a class="nav-link active" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#">Courses</a></li>
<li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
</ul>
<ul class="nav nav-pills">
<li class="nav-item"><a class="nav-link active" href="#">All</a></li>
<li class="nav-item"><a class="nav-link" href="#">Web</a></li>
<li class="nav-item"><a class="nav-link" href="#">Data</a></li>
</ul>Navbar
The navbar is the top navigation bar on most sites. Use <nav class="navbar navbar-expand-lg navbar-dark bg-dark">. Inside: .navbar-brand, toggler button for mobile, and .navbar-nav links.
navbar-expand-lg collapses into a hamburger menu below the lg breakpoint.
Real-life example: A navbar is like the main signpost at a mall — logo on the left, department names on the right, and on phone you open the floor map (hamburger menu).
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container">
<a class="navbar-brand" href="#">Rishtaara</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navMain">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navMain">
<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="#">Learn</a></li>
<li class="nav-item"><a class="nav-link" href="#">About</a></li>
</ul>
</div>
</div>
</nav>Carousel
Carousels rotate slides of images or content. Structure: #carouselId with .carousel-inner > .carousel-item. Controls use data-bs-slide="prev/next".
Add .carousel-indicators for dots. Autoplay with data-bs-ride="carousel" (use carefully — motion can annoy users).
Real-life example: A carousel is like a revolving billboard — three ads on one screen space, changing every few seconds.
<div id="heroCarousel" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="slide1.jpg" class="d-block w-100" alt="Slide 1" />
</div>
<div class="carousel-item">
<img src="slide2.jpg" class="d-block w-100" alt="Slide 2" />
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#heroCarousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon"></span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#heroCarousel" data-bs-slide="next">
<span class="carousel-control-next-icon"></span>
</button>
</div>Modal
Modals are popup dialogs. Trigger with data-bs-toggle="modal" data-bs-target="#myModal". The modal has .modal-dialog > .modal-content > header, body, footer.
Use role="dialog" and aria-labelledby for accessibility. Backdrop click closes the modal by default.
Real-life example: A modal is like a pop-up counter window at a ticket office — the rest of the page dims until you finish or close the window.
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#signupModal">
Sign up
</button>
<div class="modal fade" id="signupModal" tabindex="-1" aria-labelledby="signupLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="signupLabel">Create account</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>Join Rishtaara and start learning Bootstrap today.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save</button>
</div>
</div>
</div>
</div>Tooltip & Popover
Tooltips show tiny hints on hover or focus. Popovers show larger content with a title. Both need Bootstrap JS and initialization: new bootstrap.Tooltip(element) or data-bs-toggle="tooltip".
Real-life example: A tooltip is a whispered hint ("Save file"). A popover is a small note card with a title and paragraph.
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-title="Copy to clipboard">
Hover me
</button>
<button type="button" class="btn btn-danger" data-bs-toggle="popover" title="Popover title" data-bs-content="Extra details appear here.">
Popover
</button>
<script>
const tips = document.querySelectorAll('[data-bs-toggle="tooltip"]');
tips.forEach((el) => new bootstrap.Tooltip(el));
</script>Toast
Toasts are lightweight alert messages that float on screen — great for "Saved!" feedback. Use .toast with .toast-header and .toast-body inside a .toast-container.
Real-life example: A toast is like a short WhatsApp notification — appears briefly in the corner, then disappears.
<div class="toast-container position-fixed bottom-0 end-0 p-3">
<div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<strong class="me-auto">Rishtaara</strong>
<button type="button" class="btn-close" data-bs-dismiss="toast"></button>
</div>
<div class="toast-body">Lesson marked complete!</div>
</div>
</div>Scrollspy
Scrollspy highlights nav links based on scroll position. Add data-bs-spy="scroll" to body (or a wrapper) and data-bs-target to the nav. Sections need ids matching href.
Real-life example: Scrollspy is like a textbook index that glows on the current chapter as you read down the page.
<body data-bs-spy="scroll" data-bs-target="#lessonNav" data-bs-smooth-scroll="true" tabindex="0">
<nav id="lessonNav" class="navbar fixed-top bg-light">
<ul class="nav">
<li class="nav-item"><a class="nav-link" href="#part1">Part 1</a></li>
<li class="nav-item"><a class="nav-link" href="#part2">Part 2</a></li>
</ul>
</nav>
<div id="part1" class="container pt-5" style="height: 800px"><h2>Part 1</h2></div>
<div id="part2" class="container" style="height: 800px"><h2>Part 2</h2></div>
</body>Offcanvas
Offcanvas panels slide in from the edge — common for mobile menus or shopping carts. Use .offcanvas with .offcanvas-start/end/top/bottom.
Real-life example: Offcanvas is like a drawer that slides from the side of your desk — the main desk stays put.
<button class="btn btn-dark" data-bs-toggle="offcanvas" data-bs-target="#sideMenu">Menu</button>
<div class="offcanvas offcanvas-start" tabindex="-1" id="sideMenu">
<div class="offcanvas-header">
<h5 class="offcanvas-title">Navigation</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
</div>
<div class="offcanvas-body">
<a href="#" class="d-block mb-2">Home</a>
<a href="#" class="d-block">Courses</a>
</div>
</div>Utilities
Bootstrap utilities are single-purpose classes: spacing (m-*, p-*), display (d-flex, d-none), sizing (w-100), borders, shadows (shadow), and position (position-fixed).
Real-life example: Utilities are like LEGO single bricks — one class, one job. Stack them to build layout without writing CSS files.
<div class="d-flex justify-content-between align-items-center p-3 mb-4 bg-light border rounded shadow-sm">
<span class="fw-bold">Utilities demo</span>
<span class="badge text-bg-primary">New</span>
</div>Dark Mode
Bootstrap 5.3+ supports color modes. Add data-bs-theme="dark" on <html> or any element to switch to dark palette. Use .bg-body and .text-body for theme-aware colors.
Real-life example: Dark mode is like turning off the bright classroom lights for a cinema — same room, different mood, easier on the eyes at night.
<html lang="en" data-bs-theme="dark">
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div class="container py-4">
<h1 class="text-body">Dark mode page</h1>
<p class="text-body-secondary">Colors adapt automatically.</p>
<button class="btn btn-primary">Primary button</button>
</div>
</body>
</html>Flex
Flex utilities live on any element with .d-flex. Control direction (.flex-row, .flex-column), alignment (.justify-content-center, .align-items-center), and wrapping (.flex-wrap).
Real-life example: Flex is like arranging students in a line — row for side-by-side, column for a queue, justify-content to spread them evenly.
<div class="d-flex justify-content-center align-items-center bg-light" style="height: 200px;">
<div class="p-4 bg-primary text-white rounded">Centered box</div>
</div>
<div class="d-flex flex-column flex-md-row gap-3 mt-3">
<div class="p-3 bg-secondary text-white flex-fill">Box A</div>
<div class="p-3 bg-secondary text-white flex-fill">Box B</div>
</div>Forms
Bootstrap styles all form controls: text inputs, email, password, textarea, and submit buttons. Wrap fields in .mb-3 for spacing. Use .form-label on <label> and .form-control on inputs.
Add .form-text for help text below a field. Disabled and readonly states use the disabled and readonly attributes with matching Bootstrap styling.
Real-life example: A Bootstrap form is like a printed admission form with clear boxes and labels — every field lines up and looks professional without custom CSS.
<form class="container" style="max-width: 400px;">
<div class="mb-3">
<label for="name" class="form-label">Full name</label>
<input type="text" class="form-control" id="name" placeholder="Ali Khan" />
</div>
<div class="mb-3">
<label for="email" class="form-label">Email</label>
<input type="email" class="form-control" id="email" required />
<div class="form-text">We never share your email.</div>
</div>
<div class="mb-3">
<label for="msg" class="form-label">Message</label>
<textarea class="form-control" id="msg" rows="3"></textarea>
</div>
<button type="submit" class="btn btn-primary">Send</button>
</form>Form sizing and layout
Use .form-control-lg and .form-control-sm for input sizes. .row and .col-* inside forms create horizontal layouts on wider screens.
Real-life example: Large inputs are like wide answer boxes for important questions; small inputs fit tight filter bars on a dashboard.
<input class="form-control form-control-lg mb-3" type="text" placeholder="Large input" />
<div class="row g-2">
<div class="col-md-6">
<input type="text" class="form-control" placeholder="First name" />
</div>
<div class="col-md-6">
<input type="text" class="form-control" placeholder="Last name" />
</div>
</div>Select
Style <select> with .form-select. Sizes: .form-select-lg and .form-select-sm. Use multiple for multi-select lists.
Real-life example: A styled select is like a dropdown menu at a food court — one choice from many options in a neat box.
<label for="course" class="form-label">Choose course</label>
<select class="form-select" id="course">
<option selected disabled>Pick one...</option>
<option value="html">HTML & CSS</option>
<option value="js">JavaScript</option>
<option value="bs">Bootstrap 5</option>
</select>Checks and Radios
Checkboxes use .form-check with .form-check-input and .form-check-label. Radios share the same structure but use type="radio" and the same name for one group.
Switch style uses .form-switch. Inline groups use .form-check-inline.
Real-life example: Checkboxes are like topping choices on pizza (pick many). Radios are like choosing one size — small, medium, or large.
<div class="form-check">
<input class="form-check-input" type="checkbox" id="news" checked />
<label class="form-check-label" for="news">Email me updates</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="level" id="beginner" checked />
<label class="form-check-label" for="beginner">Beginner</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="level" id="advanced" />
<label class="form-check-label" for="advanced">Advanced</label>
</div>
<div class="form-check form-switch mt-3">
<input class="form-check-input" type="checkbox" id="darkSwitch" />
<label class="form-check-label" for="darkSwitch">Dark mode</label>
</div>Range
Range sliders use <input type="range" class="form-range">. Set min, max, and step attributes for control.
Real-life example: A range input is like a volume knob — slide left for quiet, right for loud.
<label for="volume" class="form-label">Volume</label>
<input type="range" class="form-range" id="volume" min="0" max="100" step="5" />Input Groups
Input groups attach text, buttons, or icons before or after a field. Wrap in .input-group with .input-group-text for addons.
Real-life example: An input group is like a price tag with the rupee symbol fixed on the left — the number goes in the box, the symbol stays put.
<div class="input-group mb-3">
<span class="input-group-text">@</span>
<input type="text" class="form-control" placeholder="Username" />
</div>
<div class="input-group">
<input type="search" class="form-control" placeholder="Search courses" />
<button class="btn btn-outline-secondary" type="button">Go</button>
</div>Floating Labels
Floating labels animate the label inside the field border. Use .form-floating wrapping an input and a <label> placed after the input.
Real-life example: Floating labels are like name tags that slide up to the edge when you start writing — saving space until you need the hint.
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatEmail" placeholder="name@example.com" />
<label for="floatEmail">Email address</label>
</div>Validation
Bootstrap validation uses .was-validated on the form or .is-valid / .is-invalid on fields. Pair with .valid-feedback and .invalid-feedback messages.
HTML5 required, pattern, and type="email" work with browser validation; Bootstrap adds green/red styling.
Real-life example: Validation is like a teacher marking answers — green tick when correct, red note when something is missing.
<form class="row g-3 needs-validation" novalidate>
<div class="col-md-6">
<label for="city" class="form-label">City</label>
<input type="text" class="form-control" id="city" required />
<div class="invalid-feedback">Please enter your city.</div>
</div>
<div class="col-12">
<button class="btn btn-primary" type="submit">Submit</button>
</div>
</form>
<script>
(() => {
const forms = document.querySelectorAll(".needs-validation");
forms.forEach((form) => {
form.addEventListener("submit", (e) => {
if (!form.checkValidity()) {
e.preventDefault();
e.stopPropagation();
}
form.classList.add("was-validated");
});
});
})();
</script>Grid System
The grid system is mobile-first. Base classes like .col-6 apply to all sizes. Breakpoint classes (.col-md-4) apply from that size upward.
Rows must sit inside .container or .container-fluid. Only .col-* elements should be direct children of .row (with rare exceptions).
Real-life example: The grid system is like city zoning — the same land (row) can hold different building sizes (columns) depending on how wide the street is (screen).
<div class="container text-center">
<div class="row">
<div class="col border p-2">1 of 12</div>
<div class="col border p-2">1 of 12</div>
<!-- ... six equal cols use col-2 each -->
<div class="col-2 border p-2">col-2</div>
<div class="col-2 border p-2">col-2</div>
<div class="col-8 border p-2">col-8 (wider main area)</div>
</div>
</div>Auto-layout columns
Use .col without a number for equal-width columns that share space automatically. .col-auto sizes to content.
Real-life example: Auto columns are like friends splitting a bench equally — no one measured inches, everyone gets the same share.
<div class="container">
<div class="row">
<div class="col bg-light p-3">Auto</div>
<div class="col bg-light p-3">Auto</div>
<div class="col bg-light p-3">Auto</div>
</div>
</div>Stacked Columns
By default, columns stack vertically on extra-small screens. .col-12 on mobile becomes side-by-side when you add .col-md-6 at md breakpoint.
This is the core responsive pattern: design for phone first (stacked), then widen for tablet and desktop.
Real-life example: Stacked columns are like books in a backpack — one on top of another on a narrow shelf, then side by side on a wide desk.
<div class="container">
<div class="row">
<div class="col-12 col-md-8 bg-primary text-white p-3 mb-2 mb-md-0">Main content</div>
<div class="col-12 col-md-4 bg-secondary text-white p-3">Sidebar</div>
</div>
</div>Horizontal Columns
Keep columns in one row with .row-cols-* on the row: .row-cols-2 forces two columns even on small screens. Combine with .row-cols-md-3 for responsive counts.
Real-life example: Horizontal columns are like seats in a cinema row — you decide how many seats per row at each screen size.
<div class="container">
<div class="row row-cols-1 row-cols-sm-2 row-cols-lg-4 g-3">
<div class="col"><div class="border p-3">Card 1</div></div>
<div class="col"><div class="border p-3">Card 2</div></div>
<div class="col"><div class="border p-3">Card 3</div></div>
<div class="col"><div class="border p-3">Card 4</div></div>
</div>
</div>Breakpoints XS–XXL
Bootstrap 5 breakpoints: xs (default, <576px), sm (≥576px), md (≥768px), lg (≥992px), xl (≥1200px), xxl (≥1400px).
Class pattern: .col-{breakpoint}-{span}. Example: .col-lg-3 is 3 columns wide from lg and up; below lg it stacks unless you set .col-6 etc.
Real-life example: Breakpoints are like clothing sizes — same shirt design, but S, M, L, XL fit different body widths (screen widths).
- xs — phones portrait (no infix in class names)
- sm — large phones / small tablets
- md — tablets
- lg — laptops
- xl — desktops
- xxl — large monitors
Mixing breakpoint classes
Combine classes for fine control: .col-12 .col-sm-6 .col-xl-3 means full width on phone, half on sm, quarter on xl.
Use DevTools device toolbar (F12) to test each breakpoint while coding.
Real-life example: Mixing breakpoints is like planning a shop window — one big display on phone, two products on tablet, four on desktop.
<div class="container">
<div class="row g-2 text-center">
<div class="col-12 col-sm-6 col-lg-4 col-xxl-2 bg-info p-2">Item</div>
<div class="col-12 col-sm-6 col-lg-4 col-xxl-2 bg-info p-2">Item</div>
<div class="col-12 col-sm-6 col-lg-4 col-xxl-2 bg-info p-2">Item</div>
<div class="col-12 col-sm-6 col-lg-4 col-xxl-2 bg-info p-2">Item</div>
</div>
</div>Grid Examples — holy grail layout
A classic layout: header, sidebar, main content, footer. Use nested rows and responsive columns.
Real-life example: This layout is like a newspaper — banner headline on top, narrow column for ads, wide column for articles, footer for contact.
<div class="container">
<header class="row py-3 border-bottom mb-3">
<div class="col"><h1 class="h4 mb-0">Rishtaara Blog</h1></div>
</header>
<div class="row">
<aside class="col-md-3 mb-3">
<nav class="list-group">
<a href="#" class="list-group-item list-group-item-action active">Bootstrap</a>
<a href="#" class="list-group-item list-group-item-action">React</a>
</nav>
</aside>
<main class="col-md-9">
<article class="card mb-3">
<div class="card-body">
<h2 class="h5">Grid in practice</h2>
<p class="card-text">Build real layouts with rows and breakpoints.</p>
</div>
</article>
</main>
</div>
<footer class="row py-3 border-top mt-3">
<div class="col text-center text-muted">© 2026 Rishtaara</div>
</footer>
</div>Grid Examples — marketing row
Center a hero with offset columns. Use .offset-md-2 or justify-content-center for balanced whitespace.
Real-life example: Centering with offset is like framing a photo with equal margin on left and right — the picture sits in the middle.
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8 text-center py-5">
<h2 class="display-6">Start learning today</h2>
<p class="lead text-muted">Free lessons with real-life examples.</p>
<a class="btn btn-lg btn-primary" href="#">Browse courses</a>
</div>
</div>
</div>Grid Examples — uneven columns
Not every layout adds to 12 — .col-md-8 + .col-md-4 is common. Use .order-* to reorder visually on mobile (e.g. image after text on phone).
Real-life example: Uneven columns are like a desk with a big monitor and a small notepad — most space for main work, little for notes.
<div class="container">
<div class="row align-items-center">
<div class="col-md-6 order-md-2">
<img src="feature.jpg" alt="Feature" class="img-fluid rounded" />
</div>
<div class="col-md-6 order-md-1">
<h2>Feature title</h2>
<p>Text first on desktop left; image can appear first on mobile with order classes.</p>
</div>
</div>
</div>Full syllabus recap
You have covered the complete Bootstrap 5 syllabus: layout (containers, grid, flex, utilities), every major component, forms, validation, dark mode, and grid examples.
Real-life example: The syllabus is your exam checklist — tick each topic when you can build it from memory without copying.
- ✓ HOME, CDN, basic template, containers, grid basic
- ✓ Typography, colors, tables, images, alerts, buttons
- ✓ Cards, nav, navbar, carousel, modal, toast, offcanvas
- ✓ Tooltips, scrollspy, utilities, dark mode, flex
- ✓ Forms, select, checks, range, input groups, validation
- ✓ Grid system, breakpoints xs–xxl, stacked/horizontal layouts
Study plan
Week 1: lessons 1–14 (components and layout basics). Week 2: lessons 15–24 (forms, grid deep dive, landing page project).
Spend 30–45 minutes per lesson. Rebuild each code example, then change colors and breakpoints yourself.
Real-life example: A study plan is like a marathon training schedule — steady daily runs beat one exhausting all-nighter.
- Day 1–3: CDN, containers, grid intro, typography, colors
- Day 4–7: components (buttons through navbar)
- Day 8–10: modal, utilities, forms, validation
- Day 11–12: grid breakpoints and landing page project
Exercises, quiz & interview prep
Practice: rebuild a navbar + card grid + contact form without looking at notes. Quiz yourself on class names: .container-fluid vs .container, .col-md-6 meaning, data-bs-toggle uses.
Interview questions: When would you pick Bootstrap vs Tailwind? How does the 12-column grid work? What replaced jumbotron in BS5? Why include bootstrap.bundle.min.js?
Real-life example: Interview prep is like rehearsing answers before a viva — you explain containers and grid to a friend until it sounds natural.
Build a component showcase
Before the final landing page, combine what you learned on one practice page: alerts, buttons, badges, progress, list group, and a card row.
This practice project uses one HTML file that demonstrates many components together.
Real-life example: A showcase page is like a shop display window — every product visible so customers (or interviewers) see what you can build.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Bootstrap Showcase</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-4">
<h1 class="mb-4">Bootstrap 5 Showcase</h1>
<div class="alert alert-info">Welcome to your practice page!</div>
<div class="mb-4">
<button class="btn btn-primary me-2">Primary</button>
<button class="btn btn-outline-success">Success outline</button>
<span class="badge text-bg-danger ms-2">New</span>
</div>
<div class="progress mb-4" style="height: 24px;">
<div class="progress-bar" style="width: 60%">60% complete</div>
</div>
<div class="row g-3">
<div class="col-md-4">
<div class="card h-100">
<div class="card-body">
<h5 class="card-title">Lesson 23</h5>
<p class="card-text">Practice combining components.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card h-100">
<div class="card-body">
<h5 class="card-title">Grid</h5>
<p class="card-text">Three cards in a responsive row.</p>
</div>
</div>
</div>
<div class="col-md-4">
<ul class="list-group">
<li class="list-group-item active">Done</li>
<li class="list-group-item">Forms</li>
<li class="list-group-item">Final project next</li>
</ul>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Editor exercise note
Open this file in VS Code with Live Server. Resize the browser narrow and wide — watch cards stack and the progress bar stay full width.
Add one dropdown and one collapse panel yourself as extra credit.
Real-life example: Resizing the browser is like folding a paper layout — you check whether the design still works when the paper is small or large.
Final project overview
Build a complete landing page using Bootstrap 5: navbar, hero section, feature cards, contact form, and footer. This combines every major topic from the course.
Use the CDN template, mobile-first grid, and Bootstrap JS for the navbar toggler. No custom CSS required — utilities are enough.
Real-life example: The landing page is like opening your own small shop — signboard (navbar), welcome banner (hero), product shelves (cards), enquiry desk (form), and address plate (footer).
- Navbar with brand + collapsible links
- Hero with .display-4, .lead, and CTA button
- Three feature cards in .row .col-md-4
- Contact form with validation classes
- Footer with copyright and links
Complete landing page code
Copy this full page, save as index.html, and customize text for your own project — portfolio, course hub, or local business.
Real-life example: Starting from a full template is like using a recipe card — change ingredients (text and colors) but keep the proven structure.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Rishtaara — Learn Web Dev</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-expand-lg bg-dark navbar-dark fixed-top">
<div class="container">
<a class="navbar-brand fw-bold" href="#">Rishtaara</a>
<button class="navbar-toggler" type="button" 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="#courses">Courses</a></li>
<li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>
</ul>
</div>
</div>
</nav>
<!-- Hero (replaces legacy jumbotron) -->
<header class="bg-primary text-white text-center py-5 mt-5">
<div class="container py-5">
<h1 class="display-4 fw-bold">Learn Bootstrap 5</h1>
<p class="lead col-lg-8 mx-auto">
Master layout, components, and forms — then ship a responsive landing page like this one.
</p>
<a class="btn btn-light btn-lg" href="#courses">View courses</a>
</div>
</header>
<!-- Feature cards -->
<section id="courses" class="container py-5">
<h2 class="text-center mb-4">Popular courses</h2>
<div class="row g-4">
<div class="col-md-4">
<div class="card h-100 shadow-sm">
<div class="card-body">
<span class="badge text-bg-primary mb-2">Web</span>
<h5 class="card-title">HTML & CSS</h5>
<p class="card-text">Structure and style every page from zero.</p>
<a href="#" class="btn btn-outline-primary">Start</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card h-100 shadow-sm">
<div class="card-body">
<span class="badge text-bg-success mb-2">Web</span>
<h5 class="card-title">JavaScript</h5>
<p class="card-text">Add interactivity and logic to your sites.</p>
<a href="#" class="btn btn-outline-primary">Start</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card h-100 shadow-sm">
<div class="card-body">
<span class="badge text-bg-info mb-2">Web</span>
<h5 class="card-title">Bootstrap 5</h5>
<p class="card-text">Build pro UIs with ready-made components.</p>
<a href="#" class="btn btn-outline-primary">Start</a>
</div>
</div>
</div>
</div>
</section>
<!-- Contact form -->
<section id="contact" class="bg-light py-5">
<div class="container" style="max-width: 540px;">
<h2 class="text-center mb-4">Contact us</h2>
<form class="needs-validation" novalidate>
<div class="mb-3">
<label for="contactName" class="form-label">Name</label>
<input type="text" class="form-control" id="contactName" required />
<div class="invalid-feedback">Please enter your name.</div>
</div>
<div class="mb-3">
<label for="contactEmail" class="form-label">Email</label>
<input type="email" class="form-control" id="contactEmail" required />
<div class="invalid-feedback">Valid email required.</div>
</div>
<div class="mb-3">
<label for="contactMsg" class="form-label">Message</label>
<textarea class="form-control" id="contactMsg" rows="4" required></textarea>
<div class="invalid-feedback">Please write a message.</div>
</div>
<button type="submit" class="btn btn-primary w-100">Send message</button>
</form>
</div>
</section>
<!-- Footer -->
<footer class="bg-dark text-white py-4">
<div class="container d-flex flex-column flex-md-row justify-content-between align-items-center gap-2">
<span>© 2026 Rishtaara. All rights reserved.</span>
<div>
<a href="#" class="text-white-50 me-3 text-decoration-none">Privacy</a>
<a href="#" class="text-white-50 text-decoration-none">Terms</a>
</div>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
document.querySelectorAll(".needs-validation").forEach((form) => {
form.addEventListener("submit", (e) => {
if (!form.checkValidity()) {
e.preventDefault();
e.stopPropagation();
}
form.classList.add("was-validated");
});
});
</script>
</body>
</html>Key Takeaways
- Bootstrap 5 gives ready-made CSS classes — start with the CDN, then containers and grid.
- The 12-column grid is mobile-first: .col-12 stacks on phones, .col-md-6 splits on tablets.
- Components (navbar, cards, modal) need bootstrap.bundle.min.js — no jQuery in BS5.
- Jumbotron was removed — build hero sections with utilities (.py-5, .display-4, .lead).
- Forms use .form-control, .form-label, validation with .is-invalid and .invalid-feedback.
- Utilities (spacing, flex, colors) let you layout pages with almost no custom CSS.
- Dark mode uses data-bs-theme="dark" on html or any wrapper element.
- Practice by rebuilding examples, then ship the lesson 24 landing page project.
Frequently Asked Questions
- Bootstrap 5 mein jQuery chahiye?
- Nahi. Bootstrap 5 dropped jQuery. Use bootstrap.bundle.min.js from the CDN — it includes Popper for dropdowns, tooltips, and popovers.
- container aur container-fluid mein farak?
- container has responsive max-width and centers content. container-fluid is always 100% width. Most marketing sites use container; dashboards often use container-fluid.
- col-md-6 ka matlab?
- From the md breakpoint (768px) and up, this column takes 6 of 12 grids — half width. Below md it stacks full width unless you set a smaller breakpoint class like col-6.
- Bootstrap ya Tailwind — kab kya?
- Bootstrap = fast prototypes and standard components out of the box. Tailwind = utility-first control in React/modern apps. Many teams know both; pick Bootstrap when you want pre-built navbars, modals, and forms quickly.
- Jumbotron BS5 mein kahan gaya?
- Removed in Bootstrap 5. Replace with a hero: .container or .container-fluid, background utility (.bg-primary), padding (.py-5), and typography (.display-4, .lead).