CSS and Bootstrap5
CSS = Cascading Style Sheets
CSS is a styling language used to make web pages look attractive.
HTML creates the structure, but CSS adds design.
CSS controls
Colors
Fonts
Sizes
Backgrounds
Margins & Padding
Layouts (2-column, 3-column etc.)
Animations
Example (Without CSS)
<p>Hello Students</p>
It looks plain.
Example (With CSS)
<p style="color: blue; font-size: 24px;">Hello Students</p>
Now it looks beautiful.
Which means:
CSS = Makeup + Decoration for websites
Bootstrap
Bootstrap is a ready-made CSS framework.
It provides pre-designed CSS styles and components, so you don’t have
to design everything manually.
Bootstrap gives :
Ready layouts (grid system)
Buttons
Forms
Navigation bars
Cards
Modals
Tables
Responsive design (mobile-friendly automatically)
Bootstrap advantages:
Saves time
Professional look
Mobile-responsive website
Easy to use
Most popular framework
Example (Bootstrap button)
<button class="btn btn-primary">Click Me</button>
Without any CSS, this looks like a blue stylish button.
Difference Between CSS and Bootstrap
CSS Bootstrap
You write styles manually Ready-made styles
More control More speed
Used for unique designs Used for quick and responsive design
Beginner to pro Beginner friendly
CSS = Your own handmade design
Bootstrap = Ready-made design templates
1. LEVELS OF STYLE SHEETS
A. Inline CSS : CSS written inside an HTML tag.
Example Program
<p style="color: red; font-size:20px;">Inline CSS Example</p>
Here:
<p> → paragraph
style=" " → inline CSS
color: red; → text color
font-size:20px; → bigger text
B. Internal CSS : CSS written inside <style> in the same HTML file.
Example Program
<!DOCTYPE html>
<html>
<head>
<style>
p { color: blue; }
</style>
</head>
<body>
<p>Internal CSS Example</p>
</body>
</html>
Here:
<style> → CSS inside HTML
p { color: blue; } → all paragraphs become blue
C. External CSS Example : CSS written in a separate file like [Link].
[Link]
<link rel="stylesheet" href="[Link]">
<p>External CSS Example</p>
[Link]
p { color: green; }
2. STYLE SPECIFICATION FORMAT
Program
selector {
property: value;
}
Example:
h1 {
color: purple;
font-size: 30px;
}
Means:
h1 → selector
color → property
purple → value
3. BOX MODEL: Every HTML element is a box.
Program
<div class="box">Box Model Example</div>
.box {
width: 200px;
padding: 10px;
border: 2px solid black;
margin: 20px;
}
Here:
width → content width
padding → space inside
border → outline
margin → space outside
4. BASIC LAYOUTS
A. Block (Take full width) & Inline Layout (Take only needed space.)
<div style="background: yellow;">Block Element</div>
<span style="background: pink;">Inline Element</span>
B. Flexbox Layout
<div style="display:flex; gap:10px;">
<div style="background:red;">A</div>
<div style="background:blue;">B</div>
</div>
Here:
display:flex → items side-by-side
gap:10px; → space between boxes
C. Grid Layout
<div style="display:grid; grid-template-columns: 1fr 1fr;">
<div>A</div>
<div>B</div>
</div>
Here:
It creates 2 equal columns.
5. ANIMATIONS
Program
<div class="box">Animate</div>
.box {
width: 100px;
height: 100px;
background: orange;
animation: move 2s infinite;
}
@keyframes move {
from { transform: translateX(0); }
to { transform: translateX(100px); }
}
Here:
animation: move → run animation forever
keyframes → steps of animation
Moves left → right
6. BORDERS
<p style="border: 2px dashed red; padding:10px;">Border Example</p>
7. FONTS
<p style="font-family: Arial; font-size:20px;">Font Example</p>
BOOTSTRAP 5
Bootstrap is a ready-made CSS framework
→ We use classes instead of writing CSS.
Include Bootstrap using CDN(Content Delivery Network)
<link
href="[Link]
rel="stylesheet">
Means: how things look
<script
src="[Link]
s">
</script>
Means: how things work
8. ACCORDION (Expand/Collapse)
Example: Product Details on Online Stores
On Amazon or eBay, product pages often have:
Specifications
Reviews
Warranty
Shipping details
Each section expands/collapses.
<div class="accordion" id="acc">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button" data-bs-toggle="collapse" data-bs-
target="#c1">
Section 1
</button>
</h2>
<div id="c1" class="accordion-collapse collapse show">
<div class="accordion-body">Accordion Content</div>
</div>
</div>
</div>
Here:
.accordion → container
.accordion-item → one block
.accordion-button → clickable button
data-bs-toggle="collapse" → opens/closes
data-
This tells HTML:
“This is a custom attribute, not a built-in one.”
Bootstrap uses special data- attributes to make components work without writing
JavaScript.
Just like A label on a box that gives extra instructions.
bs is Bootstrap.
toggle
Means switch, open/close, on/off.
It tells Bootstrap:
“When this element is clicked, toggle something.”
"collapse"
This is the action to perform.
data-bs-target="#c1" → connects button to content
collapse show → content visible
9. PROGRESS BAR
<div class="progress">
<div class="progress-bar" style="width:70%;">70%</div>
</div>
Here:
wrapper = progress
bar = progress-bar
width = progress level
10. FORM VALIDATION
<form class="needs-validation" novalidate>
<input type="email" class="form-control" required>
<div class="invalid-feedback">Enter valid email</div>
<button class="btn btn-primary mt-2">Submit</button>
</form>
Code Part Meaning Purpose
<form class="needs- Starts the form; tells Use Bootstrap’s custom
validation" novalidate>
Bootstrap to use validation messages instead of
validation; disables browser defaults
browser validation
class="needs-validation" Bootstrap validation Prepares form for Bootstrap
class validation styles
novalidate Turns off browser's Allows custom Bootstrap
default validation messages
<input type="email" Email input field styled User must enter a valid email
class="form-control"
by Bootstrap
required>
type="email" Only accepts email Ensures proper format
format (name@[Link])
class="form-control" Bootstrap input styling Makes input look clean and
modern
required Field cannot be left Forces user to fill the email
empty
<div class="invalid- Error message for Shows message if email is
feedback">Enter valid
invalid input wrong or empty
email</div>
invalid-feedback Bootstrap class for error Appears only when form is
text invalid
<button class="btn btn- Submit button Sends the form
primary
mt-2">Submit</button>
btn btn-primary Blue Bootstrap button Makes the button look nice
style
mt-2 Adds margin-top Adds space above the button
11. BORDERS (Bootstrap)
<div class="border border-primary p-3">Bootstrap Border</div>
Here:
border → adds border
border-primary → blue border
p-3 → padding
12. FONTS
<p class="fw-bold fst-italic">BoldItalic Text</p>
Class Meaning What It Does
fw-bold Font Weight Bold Makes the text bold
fst-italic Font Style Italic Makes the text italic
13. ALERTS
<div class="alert alert-warning">Warning Message</div>
14. TOASTS (Notification) : Triggered using JS.
<div class="toast show">Hello Toast</div>
15. NAVBAR
<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">MySite</a>
</nav>
Code Part Meaning Purpose
<nav> Navigation section A container for menus or
branding
class="navbar" Bootstrap navbar Tells Bootstrap to style this
component as a navigation bar
navbar-light Light-colored text Makes the text dark on a
light background
bg-light Light background Gives the navbar a light gray
color background
<a class="navbar-brand" Brand/logo link Displays the site name
href="#">MySite</a>
(“MySite”) in styled form
Example: Any Website Menu
At the top you see:
Home
About
Services
Contact
This is a navbar.
16. CARD (Card Utilities)
<div class="card" style="width:18rem;">
<div class="card-body">
<h5 class="card-title">Card Title</h5>
<p class="card-text">Some content.</p>
</div>
</div>
Code Part Meaning Purpose
<div class="card"> Card container Tells Bootstrap to create a card box
style="width:18rem;" Inline styling Sets card width to 18rem (~288px)
<div class="card-body"> Card body area Holds the card’s text and content
<h5 class="card-title"> Card title Styled title for the card
<p class="card-text"> Card text Regular text for description/content
Example: Social Media (Facebook, Instagram, Twitter)
Each post is a card:
Profile picture
Username
Post content
Each post is a separate card.
17. PAGINATION
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
</ul>
Code Part Meaning Purpose
<ul class="pagination"> Unordered list styled as Creates a row of page
Bootstrap pagination numbers
<li class="page-item"> A single pagination item Wraps each page
number
<a class="page-link" Clickable page number Takes user to page 1
href="#">1</a>
<a class="page-link" Clickable page number Takes user to page 2
href="#">2</a>
Example:
Google Search Results
At the bottom:
1
2
3
Next
This is pagination.
18. CAROUSEL (Slideshow)
<div id="car" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="[Link]" class="d-block w-100">
</div>
<div class="carousel-item">
<img src="[Link]" class="d-block w-100">
</div>
</div>
</div>
Code Part Meaning Purpose
<div id="car" class="carousel Main carousel Creates a slideshow and
slide" data-bs- container makes it start
ride="carousel"> automatically
carousel Bootstrap carousel Tells Bootstrap it’s a
component slideshow
slide Enables slide Images slide left/right
animation
data-bs-ride="carousel" Auto-plays the Images change
carousel automatically
<div class="carousel-inner"> Wrapper for all slides Holds all carousel items
<div class="carousel-item One slide; marked as First image shown when
active"> active page loads
<img src="[Link]" class="d- Image for first slide w-100 makes it full width
block w-100">
<div class="carousel-item"> Another slide Second image in
slideshow
<img src="[Link]" class="d- Image for second slide Also full width
block w-100">
Example:
E-commerce Homepages (Amazon, Flipkart)
Top banners that rotate:
Offers
Discounts
New arrivals
That’s a carousel.
Lab Program 2: Use CSS3 and style the web pages
(Part – 1 : CSS3 Styling + Basic Layout (HTML + CSS only))
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Styling</title>
<style>
/* Style specification format */
body
{
font-family: Arial;
background: lightblue;
margin: 0;
padding: 20px;
}
/* Box Model */
.box
{
width: 200px;
padding: 15px;
margin: 20px;
border: 2px solid black;
background: white;
}
/* Basic layout using flex */
.layout
{
display: flex;
gap: 20px;
}
/* CSS3 Animation */
.animate
{
width: 60px;
height: 60px;
background: red;
animation: move 2s infinite alternate;
}
/* Animation steps */
@keyframes move
{
from { transform: translateX(0); }
to { transform: translateX(100px); }
}
</style>
</head>
<body>
<h1 style="color:blue;">Inline CSS Example</h1>
<h2>Internal CSS Example</h2>
<div class="box">This is Box Model</div>
<div class="layout">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
</div>
<div class="animate"></div>
</body>
</html>
PART 2: Bootstrap 5 Components
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Components</title>
// Bootstrap CDN
<link
href="[Link]
st/css/[Link]" rel="stylesheet">
<script
src="[Link]
t/js/[Link]"></script>
</head>
<body class="p-3">
// Navbar
<nav class="navbar navbar-dark bg-dark mb-3">
<a class="navbar-brand ms-3" href="#">My App</a>
</nav>
// Accordion
<div class="accordion mb-3" id="acc">
<div class="accordion-item">
<button class="accordion-button" data-bs-
toggle="collapse" data-bs-target="#a1">
What is Bootstrap?
</button>
<div id="a1" class="accordion-collapse collapse
show">
<div class="accordion-body">Bootstrap is a CSS
framework.</div>
</div>
</div>
</div>
// Progress Bar
<div class="progress mb-3">
<div class="progress-bar bg-success"
style="width:70%;">70%</div>
</div>
// Alert
<div class="alert alert-success">Success Alert</div>
// Card
<div class="card mb-3" style="width:18rem;">
<div class="card-body">
<h5 class="card-title">Card Title</h5>
<p class="card-text">Card content</p>
</div>
</div>
// Pagination
<ul class="pagination mb-3">
<li class="page-item"><a class="page-link"
href="#">1</a></li>
<li class="page-item"><a class="page-link"
href="#">2</a></li>
</ul>
// Form Validation
<h4>Login Form</h4>
<form>
<input type="text" class="form-control mb-2"
placeholder="Username" required>
<input type="email" class="form-control mb-2"
placeholder="Email" required>
<button class="btn btn-success">Submit</button>
</form>
// Carousel
<div id="car" class="carousel slide" data-bs-
ride="carousel" style="width:300px;">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="[Link]
class="d-block w-100">
</div>
<div class="carousel-item">
<img src="[Link]
class="d-block w-100">
</div>
</div>
</div>
</body>
</html>