Bootstrap assignment
Bootstrap 5 Lab
1
Setup
Environment
Start Here
Prepare your system with Bootstrap
5.
- Download Bootstrap 5 via CDN or local files
- Create a new project folder
- Link Bootstrap CSS and JS in index.html
2
Grid
System Basics
Learn responsive layouts using
Bootstrap grid.
- Create a container with .container
- Use .row and .col classes
- Experiment with breakpoints: .col-sm, .col-md, .col-lg
3
Typography
& Utilities
Apply Bootstrap’s text and spacing
utilities.
- Use .text-center, .fw-bold, .text-muted
- Apply margin/padding with .m-3, .p-2
- Practice responsive text sizes
4
Components
Practice
Work with Bootstrap’s built-in
components.
- Create a navbar with .navbar
- Add buttons with .btn classes
- Use cards with .card and .card-body
5
Forms
& Validation
Design forms with Bootstrap styling.
- Build a login form using .form-control
- Add .form-check for checkboxes
- Implement validation states with .is-valid
and .is-invalid
6
Responsive
Media
Embed images and videos
responsively.
- Use .img-fluid for images
- Apply .ratio for videos
- Test responsiveness across devices
7
Custom
Themes
Customize Bootstrap with your own
styles.
- Override Bootstrap variables in CSS
- Use .bg-primary, .text-light
- Experiment with custom color palettes
Capstone Project
1.
Portfolio Website
- Objective:
Build a personal portfolio showcasing projects, skills, and contact info.
- Key Features:
- Responsive navbar with links to sections
- Hero section with profile image and intro text
- Grid-based project gallery using cards
- Contact form with validation
- Footer with social media icons
2.
E-Commerce Product Showcase
- Objective:
Create a product landing page for an online store.
- Key Features:
- Navbar with categories
- Carousel for featured products
- Product cards with images, price, and “Add to Cart”
buttons
- Responsive grid layout for product listings
- Footer with newsletter subscription form
Project 1: Portfolio Website
Lab
Steps
- Setup
- Create a new folder portfolio/
- Add index.html and link Bootstrap 5 via CDN
- Create style.css for custom tweaks
- Navbar
- Use <nav
class="navbar navbar-expand-lg navbar-dark bg-dark">
- Add links: Home, Projects, Contact
- Hero Section
- Use a full‑width container-fluid with d-flex
align-items-center justify-content-center
- Insert profile image (img-fluid
rounded-circle) and intro text
- Projects Gallery
- Use row + col-md-4 grid
- Inside each column, place a Bootstrap card with:
- Project image
- Title
- Short description
- Button linking to GitHub/demo
- Contact Form
- Use <form
class="needs-validation">
with form-control inputs
- Add validation classes (is-invalid, is-valid)
- Footer
- Use bg-dark
text-light text-center
- Add social media icons with Bootstrap Icons
Project 2: E‑Commerce Product Showcase
Lab
Steps
- Setup
- Create folder ecommerce/
- Add index.html and link Bootstrap 5 + icons
- Navbar
- Use navbar-light
bg-light
- Add categories: Home, Products, Deals, Contact
- Carousel
- Use <div
id="carouselExampleIndicators" class="carousel
slide">
- Add 3 featured product images with captions
- Product Grid
- Use row + col-md-3
- Each product in a card:
- Product image
- Title
- Price (<h5
class="text-success">)
- “Add to Cart” button (btn
btn-primary)
- Newsletter Subscription
- Use input-group with email field + subscribe button
- Place inside footer
- Responsive Design
- Test on mobile view
- Use col-sm-6
col-md-3 for adaptive product grid
Tip
- Step 1: Setup + Navbar
- Step 2: Hero/Carousel
- Step 3: Cards/Grid
- Step 4: Forms + Footer
- Step 5: Polish + Deployment
Project 1: Portfolio Website
1.
Setup
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta
charset="UTF-8">
<meta
name="viewport" content="width=device-width,
initial-scale=1">
<title>Portfolio</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
rel="stylesheet">
</head>
<body>
<!-- Content goes
here -->
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
2.
Navbar
html
<nav class="navbar navbar-expand-lg navbar-dark
bg-dark">
<div
class="container-fluid">
<a
class="navbar-brand" href="#">My Portfolio</a>
<button
class="navbar-toggler" type="button"
data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span
class="navbar-toggler-icon"></span>
</button>
<div
class="collapse navbar-collapse" id="navbarNav">
<ul
class="navbar-nav ms-auto">
<li
class="nav-item"><a class="nav-link"
href="#home">Home</a></li>
<li
class="nav-item"><a class="nav-link"
href="#projects">Projects</a></li>
<li
class="nav-item"><a class="nav-link"
href="#contact">Contact</a></li>
</ul>
</div>
</div>
</nav>
3.
Hero Section
html
<section id="home" class="bg-light text-center
p-5">
<img
src="profile.jpg" class="img-fluid rounded-circle mb-3"
width="150" alt="Profile">
<h1>Hello, I'm
Sudhakaran</h1>
<p
class="lead">Freelance Software Consultant & Trainer</p>
</section>
4.
Projects Gallery
html
<section id="projects" class="container
my-5">
<div
class="row">
<div
class="col-md-4">
<div
class="card">
<img
src="project1.jpg" class="card-img-top" alt="Project
1">
<div
class="card-body">
<h5
class="card-title">Project One</h5>
<p
class="card-text">Short description of project.</p>
<a
href="#" class="btn btn-primary">View Project</a>
</div>
</div>
</div>
<!-- Repeat for
more projects -->
</div>
</section>
5.
Contact Form
html
<section id="contact" class="container
my-5">
<h2>Contact
Me</h2>
<form
class="needs-validation" novalidate>
<div
class="mb-3">
<label
for="name" class="form-label">Name</label>
<input
type="text" class="form-control" id="name"
required>
<div
class="invalid-feedback">Please enter your name.</div>
</div>
<div
class="mb-3">
<label
for="email" class="form-label">Email</label>
<input
type="email" class="form-control" id="email"
required>
<div
class="invalid-feedback">Please enter a valid email.</div>
</div>
<div
class="mb-3">
<label
for="message" class="form-label">Message</label>
<textarea
class="form-control" id="message" rows="3"
required></textarea>
<div
class="invalid-feedback">Message cannot be empty.</div>
</div>
<button
class="btn btn-success"
type="submit">Send</button>
</form>
</section>
6.
Footer
html
<footer class="bg-dark text-light text-center
p-3">
<p>© 2026 My
Portfolio</p>
<a
href="#" class="text-light me-2"><i class="bi
bi-twitter"></i></a>
<a
href="#" class="text-light me-2"><i class="bi
bi-linkedin"></i></a>
</footer>
Project 2: E‑Commerce Product Showcase
1.
Navbar
html
<nav class="navbar navbar-expand-lg navbar-light
bg-light">
<div class="container-fluid">
<a
class="navbar-brand" href="#">ShopEasy</a>
<button
class="navbar-toggler" type="button"
data-bs-toggle="collapse" data-bs-target="#shopNav">
<span
class="navbar-toggler-icon"></span>
</button>
<div
class="collapse navbar-collapse" id="shopNav">
<ul
class="navbar-nav ms-auto">
<li
class="nav-item"><a class="nav-link"
href="#products">Products</a></li>
<li
class="nav-item"><a class="nav-link"
href="#deals">Deals</a></li>
<li class="nav-item"><a
class="nav-link"
href="#contact">Contact</a></li>
</ul>
</div>
</div>
</nav>
2.
Carousel
html
<div id="carouselExampleIndicators"
class="carousel slide" data-bs-ride="carousel">
<div
class="carousel-inner">
<div
class="carousel-item active">
<img
src="featured1.jpg" class="d-block w-100"
alt="Featured Product 1">
</div>
<div
class="carousel-item">
<img
src="featured2.jpg" class="d-block w-100"
alt="Featured Product 2">
</div>
<div class="carousel-item">
<img
src="featured3.jpg" class="d-block w-100"
alt="Featured Product 3">
</div>
</div>
</div>
3.
Product Grid
html
<section id="products" class="container
my-5">
<div
class="row">
<div
class="col-sm-6 col-md-3">
<div
class="card">
<img
src="product1.jpg" class="card-img-top" alt="Product
1">
<div
class="card-body">
<h5
class="card-title">Product One</h5>
<p
class="text-success">$29.99</p>
<a
href="#" class="btn btn-primary">Add to Cart</a>
</div>
</div>
</div>
<!-- Repeat for
more products -->
</div>
</section>
4.
Newsletter Subscription
html
<footer class="bg-light text-center p-4">
<h5>Subscribe
to our Newsletter</h5>
<div
class="input-group w-50 mx-auto">
<input
type="email" class="form-control" placeholder="Enter
your email">
<button
class="btn btn-success">Subscribe</button>
</div>
</footer>
Part A: Bootstrap Fundamentals
Lab
1: Setup
- Create a new project folder
- Add index.html
- Link Bootstrap 5 via CDN
- Verify with a simple container + alert component
Lab
2: Layout & Grid
- Use container, row, col
- Practice responsive breakpoints (col-sm, col-md, col-lg)
- Nest rows inside columns
Lab
3: Components
- Navbar, Buttons, Cards, Forms, Carousel
- Practice customizing with utility classes (text-center,
bg-dark, p-3)
Lab
4: Utilities
- Spacing (m-3, p-2)
- Colors (text-primary, bg-success)
- Flexbox (d-flex, justify-content-center)
Lab
5: Forms & Validation
- Input fields with form-control
- Validation states (is-valid, is-invalid)
- Input groups and floating labels
Part
B: Project 1 – Portfolio Website
Objective
Build a responsive personal
portfolio showcasing skills, projects, and contact info.
Steps
- Navbar
– Dark theme with links (Home, Projects, Contact)
- Hero Section
– Profile image + intro text
- Projects Gallery
– Grid of cards with images, titles, and buttons
- Contact Form
– Validated form with name, email, message
- Footer
– Social media icons + copyright
Sample
Snippet (Projects Gallery)
html
<section id="projects" class="container
my-5">
<div
class="row">
<div
class="col-md-4">
<div
class="card">
<img src="project1.jpg"
class="card-img-top" alt="Project 1">
<div
class="card-body">
<h5
class="card-title">Project One</h5>
<p
class="card-text">Short description of project.</p>
<a
href="#" class="btn btn-primary">View Project</a>
</div>
</div>
</div>
</div>
</section>
Part
C: Project 2 – E‑Commerce Product Showcase
Objective
Create a product landing page for an
online store.
Steps
- Navbar
– Light theme with categories
- Carousel
– Featured products slider
- Product Grid
– Cards with image, title, price, button
- Newsletter Subscription – Input group in footer
- Responsive Design
– Test on mobile view
Sample
Snippet (Product Card)
html
<div class="col-sm-6 col-md-3">
<div
class="card">
<img
src="product1.jpg" class="card-img-top" alt="Product
1">
<div
class="card-body">
<h5
class="card-title">Product One</h5>
<p
class="text-success">$29.99</p>
<a
href="#" class="btn btn-primary">Add to Cart</a>
</div>
</div>
</div>
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta
charset="UTF-8">
<meta
name="viewport" content="width=device-width,
initial-scale=1">
<title>Bootstrap 5 Lab Manual</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
rel="stylesheet">
</head>
<body class="bg-light">
<div class="container my-5">
<h1
class="text-center mb-4">📘 Bootstrap 5 Lab
Manual</h1>
<!-- Part A
-->
<section
class="mb-5">
<h2>Part A:
Bootstrap Fundamentals</h2>
<ul>
<li><strong>Lab 1: Setup</strong> – Create project,
link Bootstrap CDN, test with alert.</li>
<li><strong>Lab 2: Layout & Grid</strong> –
Practice container, row, col, breakpoints.</li>
<li><strong>Lab 3: Components</strong> – Navbar,
Buttons, Cards, Forms, Carousel.</li>
<li><strong>Lab 4: Utilities</strong> – Spacing,
Colors, Flexbox utilities.</li>
<li><strong>Lab 5: Forms & Validation</strong> –
Inputs, validation states, input groups.</li>
</ul>
</section>
<!-- Part B
-->
<section
class="mb-5">
<h2>Part B:
Capstone Project 1 – Portfolio Website</h2>
<p><strong>Objective:</strong> Build a responsive
personal portfolio showcasing skills, projects, and contact info.</p>
<ol>
<li>Navbar
– Dark theme with links (Home, Projects, Contact)</li>
<li>Hero
Section – Profile image + intro text</li>
<li>Projects Gallery – Grid of cards with images, titles, and
buttons</li>
<li>Contact Form – Validated form with
name, email, message</li>
<li>Footer
– Social media icons + copyright</li>
</ol>
<pre><code><section id="projects"
class="container my-5">
<div
class="row">
<div
class="col-md-4">
<div
class="card">
<img
src="project1.jpg" class="card-img-top" alt="Project
1">
<div
class="card-body">
<h5
class="card-title">Project One</h5>
<p
class="card-text">Short description of
project.</p>
<a
href="#" class="btn btn-primary">View
Project</a>
</div>
</div>
</div>
</div>
</section>
</code></pre>
</section>
<!-- Part C
-->
<section
class="mb-5">
<h2>Part C:
Capstone Project 2 – E‑Commerce Product Showcase</h2>
<p><strong>Objective:</strong> Create a product
landing page for an online store.</p>
<ol>
<li>Navbar
– Light theme with categories</li>
<li>Carousel
– Featured products slider</li>
<li>Product Grid – Cards with image, title, price,
button</li>
<li>Newsletter Subscription – Input group in footer</li>
<li>Responsive Design – Test on mobile view</li>
</ol>
<pre><code><div class="col-sm-6
col-md-3">
<div
class="card">
<img
src="product1.jpg" class="card-img-top" alt="Product
1">
<div
class="card-body">
<h5
class="card-title">Product One</h5>
<p
class="text-success">$29.99</p>
<a
href="#" class="btn btn-primary">Add to
Cart</a>
</div>
</div>
</div>
</code></pre>
</section>
<!-- Part D
-->
<section>
<h2>Part D:
Suggested Daily Exercises</h2>
<ul>
<li>Day 1:
Setup + Navbar</li>
<li>Day 2:
Hero/Carousel</li>
<li>Day 3:
Cards/Grid</li>
<li>Day 4:
Forms + Footer</li>
<li>Day 5:
Polish + Deployment</li>
</ul>
</section>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Starter Template: Portfolio Website (portfolio_index.html)
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta
charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<title>Portfolio Website</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
rel="stylesheet">
<link
href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css"
rel="stylesheet">
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-dark
bg-dark">
<div
class="container-fluid">
<a
class="navbar-brand" href="#">My Portfolio</a>
<button
class="navbar-toggler" type="button"
data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span
class="navbar-toggler-icon"></span>
</button>
<div
class="collapse navbar-collapse" id="navbarNav">
<ul
class="navbar-nav ms-auto">
<li class="nav-item"><a
class="nav-link" href="#home">Home</a></li>
<li
class="nav-item"><a class="nav-link"
href="#projects">Projects</a></li>
<li
class="nav-item"><a class="nav-link"
href="#contact">Contact</a></li>
</ul>
</div>
</div>
</nav>
<!-- Hero Section -->
<section id="home" class="bg-light
text-center p-5">
<img
src="profile.jpg" class="img-fluid rounded-circle mb-3"
width="150" alt="Profile">
<h1>Hello, I'm
Sudhakaran</h1>
<p
class="lead">Freelance Software Consultant & Trainer</p>
</section>
<!-- Projects -->
<section id="projects" class="container
my-5">
<h2
class="mb-4">My Projects</h2>
<div
class="row">
<div
class="col-md-4">
<div
class="card">
<img
src="project1.jpg" class="card-img-top" alt="Project
1">
<div
class="card-body">
<h5
class="card-title">Project One</h5>
<p
class="card-text">Short description of project.</p>
<a
href="#" class="btn btn-primary">View Project</a>
</div>
</div>
</div>
<!-- Add more
project cards here -->
</div>
</section>
<!-- Contact -->
<section id="contact" class="container
my-5">
<h2>Contact
Me</h2>
<form
class="needs-validation" novalidate>
<div
class="mb-3">
<label
for="name" class="form-label">Name</label>
<input
type="text" class="form-control" id="name"
required>
<div
class="invalid-feedback">Please enter your name.</div>
</div>
<div
class="mb-3">
<label
for="email" class="form-label">Email</label>
<input
type="email" class="form-control" id="email"
required>
<div
class="invalid-feedback">Please enter a valid email.</div>
</div>
<div
class="mb-3">
<label
for="message" class="form-label">Message</label>
<textarea
class="form-control" id="message" rows="3"
required></textarea>
<div
class="invalid-feedback">Message cannot be empty.</div>
</div>
<button
class="btn btn-success"
type="submit">Send</button>
</form>
</section>
<!-- Footer -->
<footer class="bg-dark text-light text-center
p-3">
<p>© 2026 My
Portfolio</p>
<a
href="#" class="text-light me-2"><i class="bi
bi-twitter"></i></a>
<a
href="#" class="text-light me-2"><i class="bi
bi-linkedin"></i></a>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Starter Template: E‑Commerce Product Showcase (ecommerce_index.html)
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta
charset="UTF-8">
<meta
name="viewport" content="width=device-width,
initial-scale=1">
<title>E-Commerce Showcase</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 navbar-light
bg-light">
<div
class="container-fluid">
<a
class="navbar-brand" href="#">ShopEasy</a>
<button
class="navbar-toggler" type="button"
data-bs-toggle="collapse" data-bs-target="#shopNav">
<span
class="navbar-toggler-icon"></span>
</button>
<div
class="collapse navbar-collapse" id="shopNav">
<ul
class="navbar-nav ms-auto">
<li
class="nav-item"><a class="nav-link"
href="#products">Products</a></li>
<li
class="nav-item"><a class="nav-link"
href="#deals">Deals</a></li>
<li
class="nav-item"><a class="nav-link"
href="#contact">Contact</a></li>
</ul>
</div>
</div>
</nav>
<!-- Carousel -->
<div id="carouselExampleIndicators"
class="carousel slide" data-bs-ride="carousel">
<div
class="carousel-inner">
<div
class="carousel-item active">
<img
src="featured1.jpg" class="d-block w-100"
alt="Featured Product 1">
</div>
<div
class="carousel-item">
<img
src="featured2.jpg" class="d-block w-100" alt="Featured
Product 2">
</div>
<div
class="carousel-item">
<img
src="featured3.jpg" class="d-block w-100"
alt="Featured Product 3">
</div>
</div>
</div>
<!-- Products -->
<section id="products" class="container
my-5">
<h2
class="mb-4">Our Products</h2>
<div
class="row">
<div
class="col-sm-6 col-md-3">
<div
class="card">
<img
src="product1.jpg" class="card-img-top" alt="Product
1">
<div
class="card-body">
<h5
class="card-title">Product One</h5>
<p
class="text-success">$29.99</p>
<a
href="#" class="btn btn-primary">Add to Cart</a>
</div>
</div>
</div>
<!-- Add more
product cards here -->
</div>
</section>
<!-- Newsletter -->
<footer class="bg-light text-center p-4">
<h5>Subscribe
to our Newsletter</h5>
<div
class="input-group w-50 mx-auto">
<input
type="email" class="form-control" placeholder="Enter
your email">
<button
class="btn btn-success">Subscribe</button>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Steps to Use Bootstrap 5 Locally
1.
Download Bootstrap
- Go to https://getbootstrap.com
- Click Download → choose Compiled CSS and JS
- Extract the ZIP file. You’ll get folders like:
- css/ →
contains bootstrap.min.css
- js/ → contains
bootstrap.bundle.min.js
2.
Organize Project Structure
Create a folder structure like this:
Code
project/
│
├── css/
│ └──
bootstrap.min.css
├── js/
│ └──
bootstrap.bundle.min.js
├── images/
│ └── (your images
here)
└── index.html
3.
Link Local Files in HTML
Replace CDN links with local paths:
html
<link rel="stylesheet"
href="css/bootstrap.min.css">
<script
src="js/bootstrap.bundle.min.js"></script>
4. Run on Local Server
If you’re on Windows, you can simply open index.html in a browser.
Comments
Post a Comment