Lecture 11: Bootstrap Framework

BMC201 - Web Technology

Mr. Prashant Kumar Nag

2026-02-11

Lecture 11

Bootstrap Framework

Week 3 | Unit II: CSS Styling & JavaScript
BMC201 - Web Technology
Mr. Prashant Kumar Nag, Assistant Professor

Learning Objectives

  • Understand what Bootstrap is and why it’s useful
  • Include Bootstrap in your projects
  • Use Bootstrap’s grid system
  • Work with Bootstrap components (buttons, cards, navbar)
  • Customize Bootstrap styling
  • Build responsive websites quickly

Bootstrap: The Web Framework

Bootstrap is a CSS framework for building responsive websites

  • Pre-built CSS classes and components
  • Professional grid system
  • Mobile-first responsive design
  • JavaScript components included

Analogy: If CSS is LEGO blocks, Bootstrap gives you pre-made LEGO structures

Benefits of Bootstrap

Saves Time

  • Pre-built components
  • Don’t write CSS from scratch
  • Includes responsive grid

Professional Results

  • Consistent design
  • Mobile responsive
  • Works across browsers

Easy to Learn

  • Straightforward class names
  • Good documentation
  • Large community

Customizable

  • Override default styles
  • Theming available
  • Flexible components

How to Include Bootstrap

Add to your HTML <head>:

<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- Bootstrap JS (at end of body) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

Complete template:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <title>My Site</title>
</head>
<body>
    <!-- Content here -->
</body>
</html>

Bootstrap Grid System

Organize content in 12 columns:

<div class="container">
    <div class="row">
        <div class="col-6">Left (6 columns)</div>
        <div class="col-6">Right (6 columns)</div>
    </div>
</div>

What it means: - container: Fixed-width wrapper - row: Horizontal grouping - col-*: Column size (1-12)

Responsive Grid Breakpoints

Change layout based on screen size:

<div class="row">
    <!-- 12 cols on mobile, 6 on tablet, 4 on desktop -->
    <div class="col-12 col-md-6 col-lg-4">Content</div>
</div>

Breakpoints: - col-*: Extra small (< 576px) - col-sm-*: Small (≥ 576px) - col-md-*: Medium (≥ 768px) - col-lg-*: Large (≥ 992px) - col-xl-*: Extra large (≥ 1200px)

Bootstrap Button Component

Pre-styled buttons with classes:

<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-danger">Delete</button>
<button class="btn btn-success">Save</button>
<button class="btn btn-outline-primary">Outline</button>

Button sizes:

<button class="btn btn-primary btn-sm">Small</button>
<button class="btn btn-primary btn-lg">Large</button>

Bootstrap Card Component

Flexible content container:

<div class="card" style="width: 300px;">
    <img class="card-img-top" src="image.jpg" alt="Card">
    <div class="card-body">
        <h5 class="card-title">Card Title</h5>
        <p class="card-text">Card description</p>
        <a href="#" class="btn btn-primary">Learn More</a>
    </div>
</div>

Bootstrap Navbar Component

Professional navigation bar:

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container">
        <a class="navbar-brand" href="#">MyBrand</a>
        <button class="navbar-toggler" type="button">Menu</button>
        <div class="navbar-collapse">
            <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>
    </div>
</nav>

Automatically becomes mobile hamburger menu!

Alert Component

Display messages to users:

<div class="alert alert-success">Success message</div>
<div class="alert alert-danger">Danger message</div>
<div class="alert alert-warning">Warning message</div>
<div class="alert alert-info">Information</div>

With close button:

<div class="alert alert-success alert-dismissible">
    Success!
    <button type="button" class="btn-close"></button>
</div>

Bootstrap Form Styling

Beautifully styled form inputs:

<form>
    <div class="mb-3">
        <label class="form-label">Email</label>
        <input type="email" class="form-control">
    </div>
    <div class="mb-3">
        <label class="form-label">Password</label>
        <input type="password" class="form-control">
    </div>
    <button class="btn btn-primary">Login</button>
</form>

Complete Bootstrap Page Example

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <title>Portfolio</title>
</head>
<body>
    <!-- Navbar -->
    <nav class="navbar navbar-dark bg-dark">
        <div class="container">
            <a class="navbar-brand">My Portfolio</a>
        </div>
    </nav>

    <!-- Main Content -->
    <main class="container my-5">
        <div class="row">
            <div class="col-md-4">
                <div class="card">
                    <img class="card-img-top" src="project.jpg">
                    <div class="card-body">
                        <h5 class="card-title">Project 1</h5>
                        <button class="btn btn-primary">View</button>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Resources & References

Questions?

Next: Lecture 12 - JavaScript Variables & Data Types