Bootstrap: The Complete Lecture
Guide
Comprehensive Lecturer Notes with
Code Examples (16:9 Format)
1. What is Bootstrap?
• Bootstrap is a front-end framework — a pre-built toolkit of CSS and JS files for faster,
consistent web design.
Responsive & Mobile-First: Layouts adapt automatically to device size.
Faster & Consistent: Predefined classes like class="btn btn-primary" ensure visual
consistency.
Example HTML:
<div class="container">
<div class="row">
<div class="col-lg-4">Column 1</div>
<div class="col-lg-4">Column 2</div>
<div class="col-lg-4">Column 3</div>
</div>
</div>
2. How Does Bootstrap Work?
• Bootstrap uses pre-defined CSS classes applied to HTML elements.
Declarative approach: You declare what an element *is* rather than writing CSS manually.
Example:
<button class="btn btn-primary">Click Me</button>
CSS:
.btn-primary { background-color: #0d6efd; color: #fff; }
3. Layout (Grid System)
• Bootstrap’s grid system divides the page into 12 columns.
Example:
<div class="container">
<div class="row">
<div class="col-md-8">Main Content</div>
<div class="col-md-4">Sidebar</div>
</div>
</div>
Breakpoints: sm, md, lg, xl for responsive layouts.
4. Typography
• Typography classes ensure consistency in headings and text.
Examples:
.text-center, .text-success, .fw-bold, .fs-1
Example:
<p class="fs-3 text-center text-success bg-light p-3">Large centered green text</p>
5. Content (Images & Tables)
• Images:
.img-fluid — responsive image
.img-thumbnail — bordered image
.rounded-circle — circular image
Tables:
.table, .table-striped, .table-hover, .table-responsive
Example:
<div class="table-responsive">
<table class="table table-striped">
<tr><th>ID</th><th>Name</th></tr>
<tr><td>1</td><td>John</td></tr>
</table>
</div>
6. Forms
• Form classes ensure uniform, modern look.
.form-control for inputs, .form-select for dropdowns.
Example:
<form>
<div class="mb-3">
<label>Email</label>
<input type="email" class="form-control">
</div>
<button class="btn btn-primary">Submit</button>
</form>
7. Form Validation
• Bootstrap handles visual feedback, not validation logic.
.is-valid — green border
.is-invalid — red border
Example:
<input type="text" class="form-control is-invalid">
<div class="invalid-feedback">Please provide a valid input.</div>
8. Components (Buttons &
Dropdowns)
• Pre-built components for UI design.
Buttons:
.btn, .btn-primary, .btn-outline-success, .btn-lg
Dropdowns:
<div class="dropdown">
<button class="btn dropdown-toggle" data-bs-toggle="dropdown">Menu</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
</ul>
</div>
9. Navbar, Modal, Badge
• Navbar: Responsive navigation header
.navbar, .navbar-brand, .navbar-toggler, .navbar-collapse
Modal: Popup box overlay
<button data-bs-toggle="modal" data-bs-target="#myModal">Launch</button>
Badge:
<button class="btn btn-primary">Inbox <span class="badge
bg-danger">99+</span></button>
10. Components (Advanced)
• Card:
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top">
<div class="card-body">
<h5 class="card-title">Title</h5>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
Carousel & Accordion: For slideshows and collapsible content.
11. Utilities
• Utility classes for spacing, display, shadow, etc.
Examples:
.mt-3, .p-5, .shadow-lg, .d-flex, .d-none, .mx-auto
Example:
<div class="shadow-lg p-5 bg-light rounded">Box styled using utilities</div>
12. Project
• Final practical task: Build a fully responsive Bootstrap website.
Requirements:
- Navbar (Section 9)
- Grid layout (Section 3)
- Images & forms (Section 5–6)
- Validation & Modals (Section 7–9)
- Use Utilities for all styling
Goal: Create a one-page portfolio or product landing page entirely with Bootstrap.