Lesson 6
1. What is Bootstrap?
Bootstrap is a free, open-source front-end framework used to build responsive
and mobile-first websites. It includes HTML, CSS, and JavaScript components for
UI elements like buttons, forms, navbars, and layouts.
Two ways to use Bootstrap:
Method Description Use Case
Best for quick setups and
CDN (Content Delivery Load Bootstrap files from
internet-dependent
Network) online servers.
projects.
Download Bootstrap
Good for offline work or
Local and use it from your
full control over files.
local project folder.
2. Grid System and Layout
Bootstrap uses a 12-column grid system to create flexible and responsive layouts.
Note:
• Rows: Contain columns.
• Columns: Add up to 12 units in each row.
• Breakpoints: col-sm-, col-md-, col-lg-, col-xl-.
Example
<div class="container">
<div class="row">
<div class="col-md-6">Column 1 (6 units)</div>
<div class="col-md-6">Column 2 (6 units)</div>
</div>
</div>
3. Common Bootstrap Components
Navbar
A responsive navigation bar:
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">MySite</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</a></li>
<li class="nav-item"><a class="nav-link" href="#">About</a></li>
</ul>
</div>
</nav>
Buttons
<button class="btn btn-primary">Primary</button>
<button class="btn btn-danger">Danger</button>
Alerts
<div class="alert alert-success">Success message!</div>
<div class="alert alert-danger">Error occurred!</div>
4. Practical Project
Goal:
• Use Bootstrap via CDN.
• Create a responsive layout with a navbar, buttons, alerts.
Project Files
[Link]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap Demo</title>
<link
href="[Link]
rel="stylesheet">
<link href="[Link]" rel="stylesheet">
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Bootstrap Demo</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 active" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#">About</a></li>
<li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
</ul>
</div>
</div>
</nav>
<!-- Alerts -->
<div class="container mt-4">
<div class="alert alert-success" role="alert">Welcome to Bootstrap!</div>
<div class="alert alert-warning" role="alert">This is a warning alert.</div>
</div>
<!-- Layout -->
<div class="container mt-4">
<div class="row">
<div class="col-md-6">
<h3>Left Column</h3>
<p>This uses the Bootstrap grid system.</p>
</div>
<div class="col-md-6">
<h3>Right Column</h3>
<button class="btn btn-primary me-2">Click Me</button>
<button class="btn btn-danger">Delete</button>
</div>
</div>
</div>
<script
src="[Link]
"></script>
</body>
</html>
[Link]
body {
padding-top: 60px;
.navbar-brand {
font-weight: bold;
h3 {
color: #343a40;
