Bootstrap
Introduction to Bootstrap
Bootstrap is a popular CSS framework to design responsive and mobile-first
websites quickly.
How to use Bootstrap
Include Bootstrap in your HTML using CDN:
CSS [Link]
JS [Link]
<!DOCTYPE html>
<html lang="en">
<head>
Bootstrap 1
<meta charset="UTF-8" />
<title>Bootstrap Example</title>
<link
href="[Link]
rel="stylesheet"
/>
</head>
<body>
<!-- Your content here -->
</body>
</html>
Grid System
Bootstrap uses a 12-column grid system.
Basic Grid Example:
<div class="container">
<div class="row">
<div class="col-4 bg-primary text-white">Column 1</div>
<div class="col-4 bg-success text-white">Column 2</div>
<div class="col-4 bg-danger text-white">Column 3</div>
</div>
</div>
container : adds padding.
row : creates a horizontal group of columns.
col-4 : takes 4 out of 12 columns.
Now inside the row, you have columns (small boxes):
col-4 means "take up 4 parts out of 12".
Imagine your row is split into 12 equal parts.
col-4 = 4/12 = 1/3 of the row.
Bootstrap 2
So 3 columns of col-4 will perfectly fit across the row (4 + 4 + 4 = 12).
Containers
In Bootstrap, we have two types of containers.
.container : fixed-width container.
.container-fluid : full-width (100%).
<div class="container bg-light">Fixed width</div>
<div class="container-fluid bg-dark text-white">Full width</div>
Bootstrap Components
Instead of creating everything from scratch (like a button, a card, a navbar, etc.),
Bootstrap gives you ready-made parts that already look nice and work well.
Let’s see some of the components.
a. Buttons
<button class="btn btn-primary">Primary</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-danger">Danger</button>
btn : base class
btn-primary , btn-success , etc. for color
b. Forms
<div class="container">
<form>
<div class="mb-3">
<label for="email" class="form-label">Email address</label>
<input type="email" class="form-control" id="email" placeholder="name
Bootstrap 3
@[Link]">
</div>
<div class="mb-3">
<label for="message" class="form-label">Message</label>
<textarea class="form-control" id="message" rows="3"></textarea>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
container
It centres the form nicely on the page and adds some breathing space
(padding) around it.
mb-3
mb stands for margin-bottom.
3 is the size of the space.
So mb-3 = "give some space below this item".
This keeps the input fields from looking squished together.
form-label
This is for the text label above the input (like "Email address" and "Message").
It styles the labels nicely — for example, gives them the right font, size, and
spacing so everything looks neat and professional.
form-control
This is a super important Bootstrap class for inputs and textareas.
It makes inputs look clean and consistent: full-width, nice padding inside,
rounded corners, and a soft border.
Without form-control , your input boxes would look small and ugly.
Bootstrap 4
btn
btn means "this is a button".
It applies basic button styling: padding, border, rounded edges, hover effect.
btn-primary
primary gives it the main color (usually blue).
So btn btn-primary = a blue, nice-looking button that users recognize as "the
main action".
c. Modals
Modal in Bootstrap = a popup window that appears on top of the page without
leaving or refreshing it.
It’s used for things like:
Confirming an action ("Are you sure?")
Showing extra information ("More details about a product")
Small forms ("Login form inside a popup")
<!-- Button trigger -->
<button type="button" class="btn btn-warning" data-bs-toggle="modal" data
-bs-target="#exampleModal">
Launch Modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal Title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></b
utton>
</div>
Bootstrap 5
<div class="modal-body">This is a Bootstrap modal!</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="mo
dal">Close</button>
</div>
</div>
</div>
</div>
<!-- JS Bundle -->
<script src="[Link]
[Link]"></script>
d. Carousels (Image Slider)
<div id="carouselExample" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="[Link] class="d-block w-100"
alt="First Slide">
</div>
<div class="carousel-item">
<img src="[Link] class="d-block w-100"
alt="Second Slide">
</div>
</div>
<button class="carousel-control-prev" data-bs-target="#carouselExample"
data-bs-slide="prev">
<span class="carousel-control-prev-icon"></span>
</button>
<button class="carousel-control-next" data-bs-target="#carouselExample"
data-bs-slide="next">
<span class="carousel-control-next-icon"></span>
Bootstrap 6
</button>
</div>
Main <div> (Carousel wrapper)
html
CopyEdit
<div id="carouselExample" class="carousel slide" data-bs-ride="carousel">
id="carouselExample"
→ Unique name to identify this carousel (important for buttons to know which
carousel to control).
class="carousel slide"
→ Tells Bootstrap: "This is a sliding carousel."
data-bs-ride="carousel"
→ Auto-start the carousel (it begins sliding automatically when page loads).
Inside: <div class="carousel-inner">
carousel-inner
→ Container that holds all the slides (images).
Each Slide: <div class="carousel-item">
carousel-item
→ One single slide inside the carousel.
active (only on first item)
→ Marks which slide to show first when page loads.
Image inside slide
Bootstrap 7
html
CopyEdit
<img class="d-block w-100">
d-block
→ Makes image a block element (important for layout).
w-100
→ Image width = 100% of the carousel (fills the full space).
Previous Button
html
CopyEdit
<button class="carousel-control-prev" data-bs-target="#carouselExample" d
ata-bs-slide="prev">
carousel-control-prev
→ Special button that moves to the previous slide.
data-bs-target="#carouselExample"
→ Tells the button which carousel it should control (by ID).
data-bs-slide="prev"
→ Move backward when clicked.
Next Button
html
CopyEdit
<button class="carousel-control-next" data-bs-target="#carouselExample" d
Bootstrap 8
ata-bs-slide="next">
carousel-control-next
→ Special button to move to the next slide.
data-bs-slide="next"
→ Move forward when clicked.
For better learning, you can visit Bootstrap classes, where you will find out
different ways to use Bootstrap. Since we will be using React for the frontend,
Bootstrap is not as important for us.
What Next? —— Logic (JavaScript)
Bootstrap 9