No matching topics found
Try search terms like "flex", "container", "sm", or "modal".
Bootstrap scaffolding is the foundational setup — the HTML structure and CDN/file links that make Bootstrap work in your project.
Step 1 Basic HTML Template
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Page</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
</head>
<body>
<!-- Your content goes here -->
<!-- Bootstrap JS Bundle (includes Popper) -->
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
The viewport meta tag is CRITICAL for responsive design. Without it,
Bootstrap's breakpoints won't work on mobile.
Key Concept Global Styles Bootstrap
applies
box-sizing: border-box
Applied to all elements — padding doesn't add to width
font-size: 1rem (16px)
Base font size on <html> element
body background: #fff
White background, no default margin
Normalize.css
Cross-browser consistency resets
Responsive Breakpoints
xs: <576px
Extra small (phones) — default, no infix
sm: ≥576px
Small (landscape phones)
md: ≥768px
Medium (tablets)
lg: ≥992px
Large (desktops)
xl: ≥1200px
Extra large
xxl: ≥1400px
Extra extra large
Bootstrap's grid is a 12-column flexbox system. Everything works inside a container → row → col hierarchy.
Core Structure Container → Row →
Column
<div class="container"> <!-- max-width, centered -->
<div class="row"> <!-- negative margin wrapper -->
<div class="col-md-6"> <!-- takes 6 of 12 columns on medium+ -->
Left content
</div>
<div class="col-md-6">
Right content
</div>
</div>
</div>
Container Classes 3 types
.container
Fixed-width, changes at each breakpoint. Most common.
.container-fluid
Always 100% width. Full-width sections/heroes.
.container-{bp}
e.g. .container-md — fluid until md, then fixed
Column Classes All variants
<!-- Equal width (auto) -->
<div class="col">Auto</div>
<!-- Specific size -->
<div class="col-4">Takes 4 of 12 cols</div>
<!-- Responsive: stacks on mobile, side-by-side on md+ -->
<div class="col-12 col-md-6 col-lg-4">Responsive col</div>
<!-- Auto-fit to content -->
<div class="col-auto">Fits content width</div>
Row Utilities Alignment & Gutters
Horizontal alignment of columns
.justify-content-start
Cols pushed to left
.justify-content-center
Cols centered
.justify-content-end
Cols pushed to right
.justify-content-between
Space between cols
.justify-content-around
Space around cols
Vertical alignment
.align-items-start
Top align
.align-items-center
Vertical center
.align-items-end
Bottom align
.align-self-*
Override per column
Gutters (spacing between cols)
.g-0 to .g-5
Both horizontal + vertical
.gx-0 to .gx-5
Horizontal gutters only
.gy-0 to .gy-5
Vertical gutters only
<div class="row g-3 justify-content-center align-items-center">
<div class="col-md-4">...</div>
<div class="col-md-4">...</div>
</div>
Column Offset Push columns right
<div class="row">
<div class="col-md-4 offset-md-4">Centered column</div>
</div>
<div class="row">
<div class="col-md-3">Left</div>
<div class="col-md-3 offset-md-6">Far right</div>
</div>
Use case: centering a single form, pushing a sidebar to the right
Bootstrap layout components — navbars, dropdowns, breadcrumbs, cards, badges, pagination, and more.
Navbar Responsive navigation bar
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#">MyBrand</a>
<!-- Hamburger toggler for mobile -->
<button class="navbar-toggler" type="button"
data-bs-toggle="collapse" data-bs-target="#navMenu">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navMenu">
<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>
<!-- Dropdown inside navbar -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown">Services</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Web Design</a></li>
<li><a class="dropdown-item" href="#">SEO</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
Navbar color modifiers
navbar-dark bg-dark
Dark bg, light text
navbar-light bg-light
Light bg, dark text
bg-primary/success/danger
Colored navbars
fixed-top / sticky-top
Fixed or sticky positioning
navbar-expand-{bp}
When to expand (sm/md/lg/xl)
ms-auto on ul
Push nav items to the right
Dropdown Standalone dropdown menus
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle"
data-bs-toggle="dropdown">
Choose Option
</button>
<ul class="dropdown-menu">
<li><h6 class="dropdown-header">Section</h6></li>
<li><a class="dropdown-item" href="#">Item 1</a></li>
<li><a class="dropdown-item active" href="#">Active Item</a></li>
<li><a class="dropdown-item disabled">Disabled</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Logout</a></li>
</ul>
</div>
dropup
Menu opens upward
dropend / dropstart
Opens right / left
dropdown-menu-end
Aligns menu to right edge
dropdown-menu-dark
Dark styled menu
Cards 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">Card Title</h5>
<p class="card-text">Some description here.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
<div class="card-footer text-muted">Last updated 3 mins ago</div>
</div>
<!-- Card with header -->
<div class="card">
<div class="card-header">Featured</div>
<div class="card-body">...</div>
</div>
card-img-top/bottom
Image at top or bottom of card
card-img-overlay
Text overlaid on image
bg-primary/danger/etc
Colored card background
border-primary/etc
Colored card border
Breadcrumb Navigation trail
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Library</a></li>
<li class="breadcrumb-item active" aria-current="page">Data</li>
</ol>
</nav>
Use case: multi-level page navigation to show current location in site
hierarchy
Pagination Page number controls
<nav>
<ul class="pagination">
<li class="page-item disabled">
<a class="page-link">Previous</a>
</li>
<li class="page-item active"><a class="page-link" href="#">1</a></li>
<li class="page-item"><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>
pagination-lg/sm
Larger or smaller page links
justify-content-center
Center the pagination
page-item.disabled
Grays out prev/next
page-item.active
Highlights current page
Badges & Labels
<!-- Badge on a heading -->
<h1>Messages <span class="badge bg-danger">4</span></h1>
<!-- Pill badge -->
<span class="badge rounded-pill bg-success">New</span>
<!-- All color variants -->
<span class="badge bg-primary">Primary</span>
<span class="badge bg-secondary">Secondary</span>
<span class="badge bg-warning text-dark">Warning</span>
Spinner Loading indicators
<!-- Border spinner -->
<div class="spinner-border text-primary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<!-- Growing spinner -->
<div class="spinner-grow text-danger" role="status"></div>
<!-- Sizes -->
<div class="spinner-border spinner-border-sm"></div>
<!-- Spinner inside a button -->
<button class="btn btn-primary" disabled>
<span class="spinner-border spinner-border-sm"></span>
Loading...
</button>
Button Groups
<div class="btn-group" role="group">
<button class="btn btn-primary">Left</button>
<button class="btn btn-primary">Middle</button>
<button class="btn btn-primary">Right</button>
</div>
<!-- Vertical group -->
<div class="btn-group-vertical">...</div>
<!-- Toolbar -->
<div class="btn-toolbar">
<div class="btn-group me-2">...</div>
<div class="btn-group">...</div>
</div>
Bootstrap CSS utilities — typography, tables, forms, buttons, images, and icons.
Typography Text classes
Headings & display
<h1 class="display-1">Display 1 (huge)</h1>
<h2 class="display-4">Display 4</h2>
<p class="lead">Slightly larger, prominent paragraph</p>
<p class="text-muted">Gray muted text</p>
<mark>Highlighted text</mark>
<del>Strikethrough</del> | <ins>Underline</ins>
<small>Small text</small> | <strong>Bold</strong>
Text alignment, transform & color
.text-start/center/end
Alignment
.text-uppercase/lowercase/capitalize
Transform
.fw-bold / .fw-light
Font weight
.fst-italic
Italic style
.text-primary/danger/success
Text color
.text-truncate
Ellipsis on overflow
.font-monospace
Monospace font family
.lh-1 / .lh-lg
Line height variants
Tables
<table class="table table-striped table-hover table-bordered">
<thead class="table-dark">
<tr>
<th scope="col">#</th>
<th scope="col">Name</th>
<th scope="col">Score</th>
</tr>
</thead>
<tbody>
<tr class="table-success">
<td>1</td><td>Alice</td><td>95</td>
</tr>
<tr><td>2</td><td>Bob</td><td>72</td></tr>
</tbody>
</table>
<!-- Responsive wrapper -->
<div class="table-responsive">
<table class="table">...</table>
</div>
table-striped
Alternating row colors
table-hover
Highlight row on hover
table-bordered
Borders on all sides
table-borderless
Remove all borders
table-sm
Compact cell padding
table-dark/light
Dark/light header/body
table-{color} on tr/td
Row-level highlighting
table-responsive-{bp}
Horizontal scroll below bp
Forms Inputs, selects, checkboxes
<form>
<div class="mb-3">
<label for="email" class="form-label">Email address</label>
<input type="email" class="form-control" id="email"
placeholder="name@example.com">
<div class="form-text">We'll never share your email.</div>
</div>
<div class="mb-3">
<label class="form-label">Select</label>
<select class="form-select">
<option>Option 1</option>
</select>
</div>
<div class="mb-3 form-check">
<input type="checkbox" class="form-check-input" id="check1">
<label class="form-check-label" for="check1">Check me</label>
</div>
<div class="mb-3 form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch">
<label class="form-check-label">Toggle switch</label>
</div>
<div class="mb-3">
<label class="form-label">Range</label>
<input type="range" class="form-range">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
Inline form & Input group
<!-- Input group with addon -->
<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="text" class="form-control" placeholder="Search">
<button class="btn btn-outline-secondary">Go</button>
</div>
<!-- Validation states -->
<input class="form-control is-valid"> <!-- green -->
<input class="form-control is-invalid"> <!-- red -->
<div class="valid-feedback">Looks good!</div>
<div class="invalid-feedback">Please fill this field.</div>
Buttons All variants
<!-- Solid buttons -->
<button class="btn btn-primary">Primary</button>
<button class="btn btn-danger">Danger</button>
<!-- Outline buttons -->
<button class="btn btn-outline-primary">Outline</button>
<!-- Sizes -->
<button class="btn btn-primary btn-lg">Large</button>
<button class="btn btn-primary btn-sm">Small</button>
<!-- Full-width block button -->
<div class="d-grid">
<button class="btn btn-success">Block Button</button>
</div>
<!-- Disabled state -->
<button class="btn btn-primary" disabled>Disabled</button>
Images Responsive & styled
<!-- Responsive (never exceeds parent width) -->
<img src="img.jpg" class="img-fluid" alt="...">
<!-- Thumbnail (bordered) -->
<img src="img.jpg" class="img-thumbnail" alt="...">
<!-- Rounded corners / circle -->
<img src="img.jpg" class="rounded" alt="...">
<img src="img.jpg" class="rounded-circle" alt="...">
<!-- Float alignment -->
<img src="img.jpg" class="float-start" alt="..."> <!-- left -->
<img src="img.jpg" class="float-end" alt="..."> <!-- right -->
<!-- Center a block image -->
<img src="img.jpg" class="d-block mx-auto" alt="...">
Bootstrap JavaScript plugins require the bootstrap.bundle.js (includes Popper). They work via data-bs-* attributes or JavaScript API.
Modal Dialog boxes / popups
<!-- Trigger button -->
<button class="btn btn-primary" data-bs-toggle="modal"
data-bs-target="#myModal">Open 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">
<p>Modal content here.</p>
</div>
<div class="modal-footer">
<button class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
modal-dialog-centered
Vertically center the modal
modal-dialog-scrollable
Scrollable body, fixed header/footer
modal-sm / modal-lg / modal-xl
Size variants
modal-fullscreen
Takes full screen
JS API
var myModal = new bootstrap.Modal(document.getElementById('myModal'));
myModal.show();
myModal.hide();
myModal.toggle();
Carousel Slideshow / image slider
<div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
<!-- Indicators -->
<div class="carousel-indicators">
<button data-bs-target="#myCarousel" data-bs-slide-to="0" class="active"></button>
<button data-bs-target="#myCarousel" data-bs-slide-to="1"></button>
<button data-bs-target="#myCarousel" data-bs-slide-to="2"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="slide1.jpg" class="d-block w-100" alt="Slide 1">
<div class="carousel-caption">
<h5>First Slide</h5>
<p>Some description.</p>
</div>
</div>
<div class="carousel-item">
<img src="slide2.jpg" class="d-block w-100" alt="Slide 2">
</div>
</div>
<!-- Controls -->
<button class="carousel-control-prev" data-bs-target="#myCarousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon"></span>
</button>
<button class="carousel-control-next" data-bs-target="#myCarousel" data-bs-slide="next">
<span class="carousel-control-next-icon"></span>
</button>
</div>
carousel-fade
Crossfade instead of slide
data-bs-interval="3000"
Auto-advance interval (ms)
data-bs-pause="hover"
Pause on mouse hover
data-bs-wrap="false"
Disable looping
Collapse Show/hide content
<button class="btn btn-primary" data-bs-toggle="collapse"
data-bs-target="#collapseContent">
Toggle Content
</button>
<div class="collapse" id="collapseContent">
<div class="card card-body">
Hidden content revealed on click!
</div>
</div>
<!-- Accordion (multiple collapsibles) -->
<div class="accordion" id="myAccordion">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button" data-bs-toggle="collapse"
data-bs-target="#q1">Question 1</button>
</h2>
<div id="q1" class="accordion-collapse collapse show"
data-bs-parent="#myAccordion">
<div class="accordion-body">Answer here...</div>
</div>
</div>
</div>
Tooltips & Popovers
<!-- Tooltip -->
<button class="btn btn-secondary"
data-bs-toggle="tooltip"
data-bs-placement="top"
title="This is a tooltip!">
Hover me
</button>
<!-- Initialize ALL tooltips via JS (required!) -->
<script>
var tooltips = document.querySelectorAll('[data-bs-toggle="tooltip"]');
tooltips.forEach(function(el) { new bootstrap.Tooltip(el); });
</script>
<!-- Popover (richer content) -->
<button class="btn btn-danger"
data-bs-toggle="popover"
data-bs-title="Popover Title"
data-bs-content="This is popover content."
data-bs-placement="right">
Click for Popover
</button>
<script>
var popovers = document.querySelectorAll('[data-bs-toggle="popover"]');
popovers.forEach(function(el) { new bootstrap.Popover(el); });
</script>
Tooltips and Popovers MUST be initialized manually via JavaScript — they don't
auto-initialize like modals and carousels.
data-bs-placement
top / bottom / left / right
data-bs-trigger
hover / click / focus / manual
data-bs-html="true"
Allow HTML in content
Tabs & Navs Toggleable content
tabs
<ul class="nav nav-tabs" id="myTabs">
<li class="nav-item">
<button class="nav-link active" data-bs-toggle="tab"
data-bs-target="#home">Home</button>
</li>
<li class="nav-item">
<button class="nav-link" data-bs-toggle="tab"
data-bs-target="#profile">Profile</button>
</li>
</ul>
<div class="tab-content mt-3">
<div class="tab-pane fade show active" id="home">
Home content here
</div>
<div class="tab-pane fade" id="profile">
Profile content here
</div>
</div>
nav-tabs
Tab-style navigation
nav-pills
Pill-style navigation
nav-fill
Equal width items fill container
nav-justified
Equal width, full container
Alerts Notification messages
<div class="alert alert-success alert-dismissible fade show">
<strong>Success!</strong> Your form was submitted.
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
<div class="alert alert-warning">Warning message</div>
<div class="alert alert-danger">Error message</div>
<div class="alert alert-info">Info message</div>
<!-- Alert with link -->
<div class="alert alert-primary">
Check our <a href="#" class="alert-link">documentation</a>.
</div>
Scrollspy Highlight nav based on
scroll position
<!-- Nav bar to watch -->
<nav id="navbar-spy" class="navbar navbar-light bg-light">
<ul class="nav nav-pills">
<li class="nav-item"><a class="nav-link" href="#section1">Section
1</a></li>
<li class="nav-item"><a class="nav-link" href="#section2">Section
2</a></li>
</ul>
</nav>
<!-- Scrollable content area -->
<div data-bs-spy="scroll" data-bs-target="#navbar-spy"
data-bs-offset="100" tabindex="0"
style="height: 300px; overflow-y: auto;">
<h4 id="section1">Section 1</h4>
<p>...content...</p>
<h4 id="section2">Section 2</h4>
<p>...content...</p>
</div>
Bootstrap 5 utilities — flex, display, float, spacing, and the custom API to generate your own utility classes.
Flex Utilities Full flexbox control
<div class="d-flex justify-content-between align-items-center">
<span>Left</span>
<span>Right</span>
</div>
<!-- Direction -->
<div class="d-flex flex-column">...</div> <!-- vertical -->
<div class="d-flex flex-row-reverse">...</div> <!-- reversed -->
<!-- Wrap -->
<div class="d-flex flex-wrap">...</div>
<!-- Child utilities -->
<div class="d-flex">
<div class="flex-grow-1">Grows to fill</div>
<div class="flex-shrink-0">Never shrinks</div>
<div class="align-self-end">Aligns self bottom</div>
<div class="ms-auto">Pushed to right (margin-start: auto)</div>
<div class="order-1">Order control</div>
</div>
justify-content-*
start/end/center/between/around/evenly
align-items-*
start/end/center/baseline/stretch
align-content-*
Multi-line cross-axis alignment
flex-{bp}-row/column
Responsive direction change
Display Utilities
<div class="d-none">Hidden</div>
<div class="d-block">Block</div>
<div class="d-inline">Inline</div>
<div class="d-inline-block">Inline-block</div>
<div class="d-flex">Flex container</div>
<div class="d-grid">Grid container</div>
<!-- Responsive visibility -->
<div class="d-none d-md-block">Hidden on mobile, visible on md+</div>
<div class="d-md-none">Only visible on mobile</div>
Use case: showing/hiding elements per screen size — hide a sidebar on mobile,
show compact menu instead.
Float
<div class="float-start">Floated left</div>
<div class="float-end">Floated right</div>
<div class="float-none">No float</div>
<!-- Responsive floats -->
<div class="float-md-end">Float right on md+</div>
<!-- Always use clearfix on parent! -->
<div class="clearfix">
<img class="float-start" src="img.jpg">
<p>Text wraps around image</p>
</div>
Spacing Utilities Margin &
Padding
<!-- Syntax: {m/p}{side}-{size} -->
<!-- Sides: t=top, b=bottom, s=start(left), e=end(right), x=horizontal, y=vertical -->
<!-- Size: 0,1,2,3,4,5 (0 to 3rem) or auto -->
<div class="mt-3">Margin top 1rem</div>
<div class="mb-5">Margin bottom 3rem</div>
<div class="px-4">Padding left+right 1.5rem</div>
<div class="py-2">Padding top+bottom 0.5rem</div>
<div class="m-auto">Auto margin (centers block elements)</div>
<div class="mx-auto" style="width:200px">Centered horizontally</div>
<div class="p-0">No padding</div>
<div class="ms-auto">Left margin auto (push right in flex)</div>
Utility API Custom utilities via Sass
/* In your custom Bootstrap Sass setup */
@import "bootstrap/scss/bootstrap";
$utilities: map-merge(
$utilities,
(
"cursor": (
property: cursor,
values: auto pointer grab,
)
)
);
/* Generates: .cursor-auto, .cursor-pointer, .cursor-grab */
The Utility API lets you generate your own utility classes with the same
responsive & hover variant support Bootstrap uses internally.
GitHub Project with Bootstrap
<!-- Install via npm -->
npm install bootstrap
<!-- In your JS entry file -->
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min.js';
<!-- OR use Sass for customization -->
@import "~bootstrap/scss/bootstrap";
<!-- Override variables BEFORE import -->
$primary: #ff6600;
$border-radius: 0.5rem;
@import "~bootstrap/scss/bootstrap";
Use case: production projects where you want custom-branded Bootstrap without
loading unused CSS.
Everything from your practical list, organized with the key classes you need for each experiment.
1 Default Grid System
<div class="container">
<div class="row">
<div class="col-12 col-sm-6 col-md-4 col-lg-3 bg-primary text-white p-3">Box 1</div>
<div class="col-12 col-sm-6 col-md-4 col-lg-3 bg-success text-white p-3">Box 2</div>
<div class="col-12 col-sm-6 col-md-4 col-lg-3 bg-danger text-white p-3">Box 3</div>
<div class="col-12 col-sm-6 col-md-12 col-lg-3 bg-warning text-dark p-3">Box 4</div>
</div>
</div>
Key: col-12 (mobile full), col-sm-6 (2-col tablet), col-md-4 (3-col desktop),
col-lg-3 (4-col wide)
2 Bootstrap Layout Components
Combine: navbar + container + cards in a row + footer. This is the most common
practical structure.
<nav class="navbar navbar-dark bg-dark
navbar-expand-lg">...</nav>
<div class="container mt-4">
<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col"><div class="card h-100">...</div></div>
<div class="col"><div class="card h-100">...</div></div>
<div class="col"><div class="card h-100">...</div></div>
</div>
</div>
row-cols-1 row-cols-md-3 g-4: auto 3-col layout with equal cards — very
exam-friendly pattern.
3 Typography Classes
<div class="container">
<h1 class="display-1 text-center">Heading Display</h1>
<p class="lead text-muted">Lead paragraph.</p>
<p class="text-primary fw-bold">Bold blue text.</p>
<p class="text-uppercase text-danger">uppercase red</p>
<blockquote class="blockquote">
<p>"A great quote."</p>
<footer class="blockquote-footer">Someone famous</footer>
</blockquote>
</div>
4 Dropdown Menus
<div class="container mt-5">
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
Select Country
</button>
<ul class="dropdown-menu">
<li><h6 class="dropdown-header">Asia</h6></li>
<li><a class="dropdown-item" href="#">India</a></li>
<li><a class="dropdown-item" href="#">Japan</a></li>
<li><hr class="dropdown-divider"></li>
<li><h6 class="dropdown-header">Europe</h6></li>
<li><a class="dropdown-item active" href="#">France</a></li>
</ul>
</div>
</div>
5 Navbar in Bootstrap
Must include: navbar-brand, navbar-toggler (for mobile), collapse div with nav
items, at least one dropdown in nav.
<!-- See Unit III Navbar example above — that IS the full practical!
-->
<!-- Add these for extra marks: -->
<form class="d-flex ms-3" role="search">
<input class="form-control me-2" type="search" placeholder="Search">
<button class="btn btn-outline-light">Search</button>
</form>
6 Tables in Bootstrap
<div class="container mt-4">
<div class="table-responsive">
<table class="table table-striped table-hover table-bordered table-sm">
<thead class="table-dark">
<tr>
<th>#</th><th>Student</th><th>Subject</th><th>Marks</th>
</tr>
</thead>
<tbody>
<tr
class="table-success"><td>1</td><td>Alice</td><td>Maths</td><td>95</td></tr>
<tr
class="table-warning"><td>2</td><td>Bob</td><td>Science</td><td>70</td></tr>
<tr
class="table-danger"><td>3</td><td>Carol</td><td>English</td><td>45</td></tr>
</tbody>
</table>
</div>
</div>
7 Popover & Alerts
<!-- Dismissible alerts -->
<div class="alert alert-success alert-dismissible fade show">
Form submitted! <button class="btn-close" data-bs-dismiss="alert"></button>
</div>
<!-- Popover button -->
<button class="btn btn-warning"
data-bs-toggle="popover"
data-bs-title="Help"
data-bs-content="Fill all required fields before submitting."
data-bs-placement="right">
? Help
</button>
<script>
document.querySelectorAll('[data-bs-toggle="popover"]')
.forEach(el => new bootstrap.Popover(el));
</script>
8 Breadcrumbs & Pagination
<nav>
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Courses</a></li>
<li class="breadcrumb-item active">Bootstrap</li>
</ol>
</nav>
<nav>
<ul class="pagination pagination-lg justify-content-center">
<li class="page-item disabled"><a class="page-link">«
Prev</a></li>
<li class="page-item active"><a class="page-link" href="#">1</a></li>
<li class="page-item"><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>
9 Labels, Badges & Buttons with
Dropdowns
<!-- Badges in context -->
<h2>Inbox <span class="badge bg-danger">12</span></h2>
<span class="badge bg-success rounded-pill">Active</span>
<span class="badge bg-secondary">Draft</span>
<!-- Split button with dropdown -->
<div class="btn-group">
<button class="btn btn-primary">Action</button>
<button class="btn btn-primary dropdown-toggle dropdown-toggle-split"
data-bs-toggle="dropdown">
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Edit</a></li>
<li><a class="dropdown-item" href="#">Delete</a></li>
</ul>
</div>
10 Carousel
Always add class="active" to the FIRST .carousel-item. Without it, the carousel
won't show anything.
Create 3 slides with colored backgrounds (if no images) using bg-primary,
bg-success, bg-danger with d-block w-100 style and a fixed height via inline style or custom
CSS.
<!-- Quick carousel with color slides (no images needed) -->
<div id="demo" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="bg-primary text-white text-center py-5">
<h2>Slide 1</h2>
</div>
</div>
<div class="carousel-item">
<div class="bg-success text-white text-center py-5">
<h2>Slide 2</h2>
</div>
</div>
</div>
<button class="carousel-control-prev" data-bs-target="#demo" data-bs-slide="prev">
<span class="carousel-control-prev-icon"></span>
</button>
<button class="carousel-control-next" data-bs-target="#demo" data-bs-slide="next">
<span class="carousel-control-next-icon"></span>
</button>
</div>