Lecture 7 — Bootstrap

What is Responsive Web Design?

Responsive web design is about creating websites that automatically adjust themselves to look good on all devices — from small phones to large desktops.
Bootstrap is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first websites.
Bootstrap is completely free to download and use.

What is Bootstrap?

Bootstrap is a web design framework that makes it easy to build responsive websites quickly and effectively.

Created by web developers Mark Otto and Jacob Thornton at Twitter to help them build their website.
Released as an open source framework in August 2011 on GitHub.
Has become one of the most popular front-end frameworks on the web.

Why Use Bootstrap?

Advantage	Description
Mobile First	Bootstrap 3+ includes mobile-first styles throughout the entire library — not in separate files.
Browser Support	Supported by all major browsers (Chrome, Firefox, Safari, Edge).
Easy to Start	Only requires knowledge of HTML and CSS. The official Bootstrap site has comprehensive documentation.
Responsive Design	Bootstrap's responsive CSS automatically adjusts layouts for desktops, tablets, and mobiles.

Other Advantages

Provides a clean and uniform solution for building interfaces.
Contains beautiful, functional built-in components that are easy to customize.
Supports web-based customization.
Completely open source — free forever.

What Bootstrap Package Includes

Component	What It Provides
Scaffolding	Basic structure with a Grid System, link styles, and background. Covered in Bootstrap Basic Structure.
CSS	Global CSS settings, fundamental HTML elements styled and enhanced with extensible classes, and an advanced grid system.
Components	Over a dozen reusable components — iconography, dropdowns, navigation, alerts, popovers, and more.
JavaScript Plugins	Over a dozen custom jQuery plugins. Include them all or one by one.
Customize	Customize Bootstrap's components and jQuery plugins to produce your own version.

Should I Use Bootstrap or My Own CSS?

✓ Use Bootstrap When…

Time is of the essence
The design easily fits Bootstrap's patterns
You will have control over the final HTML
You need many of the design patterns Bootstrap offers
You lack experience writing cross-browser compliant CSS/HTML

✗ Roll Your Own CSS When…

You have a reasonable deadline for the front end
The design does not fit Bootstrap's patterns
You are working with a CMS that requires modifying HTML
You only need one or two things Bootstrap offers
You have solid experience writing CSS and HTML

Bootstrap — Environment Setup

Option 1 — Download Bootstrap

Download the latest version directly from getbootstrap.com and host the files yourself alongside your project.

Option 2 — Include via CDN (Recommended)

A CDN (Content Delivery Network) is a system of distributed servers that deliver web content to a user based on their geographic location. Using a CDN means you don't need to download or host Bootstrap — just link to it.

Bootstrap 5 CDN Links — paste inside <head>

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

<!-- Bootstrap JS Bundle (includes Popper) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

Bootstrap 5 Release Timeline

Release	Date
Bootstrap 5 First Alpha	June 16, 2020
Bootstrap 5 Alpha 2	September 29, 2020
Bootstrap 5 Alpha 3	November 11, 2020
Bootstrap 5 Beta 1	December 7, 2020
Bootstrap 5 Beta 2	February 10, 2021
Bootstrap 5 Beta 3	March 22, 2021
Bootstrap 5 Stable Release	May 5, 2021

Create Your First Bootstrap Page

Step 1 — Add the HTML5 Doctype

Bootstrap uses HTML elements and CSS properties that require the HTML5 doctype. Always include it at the very start of your page, along with the lang attribute and correct character set.

Required Boilerplate

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    ...
  </head>
</html>

Step 2 — Bootstrap is Mobile-First

To ensure proper rendering and touch zooming on mobile devices, add the viewport <meta> tag inside <head>:

Viewport Meta Tag

<meta name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no">

Full Source Code — 3-Column Page

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 5 Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

  <div class="container-fluid p-5 bg-primary text-white text-center">
    <h1>My First Bootstrap Page</h1>
    <p>Resize this responsive page to see the effect!</p>
  </div>

  <div class="container mt-5">
    <div class="row">
      <div class="col-sm-4">
        <h3>Column 1</h3>
        <p>Lorem ipsum dolor sit amet...</p>
      </div>
      <div class="col-sm-4">
        <h3>Column 2</h3>
        <p>Lorem ipsum dolor sit amet...</p>
      </div>
      <div class="col-sm-4">
        <h3>Column 3</h3>
        <p>Lorem ipsum dolor sit amet...</p>
      </div>
    </div>
  </div>

</body>
</html>

Simulated Output

My First Bootstrap Page

Resize this responsive page to see the effect!

Column 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit...

Column 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit...

Column 3

Lorem ipsum dolor sit amet, consectetur adipisicing elit...

Bootstrap Containers

Containers are used to pad the content inside them. There are two main container classes:

.container — Fixed Width

Creates a responsive, fixed-width container. Its max-width changes at each breakpoint. Best for standard page layouts.

Code

<div class="container">
  <h1>My First Bootstrap Page</h1>
  <p>This part is inside a .container class.</p>
</div>

Simulated Output

.container — fixed width, centred

.container-fluid — Full Width

Creates a full-width container that always spans the entire width of the screen (width is always 100%). Best for full-bleed sections like heroes and navbars.

Code

<div class="container-fluid">
  <h1>My First Bootstrap Page</h1>
  <p>This part is inside a .container-fluid class.</p>
</div>

Simulated Output

.container-fluid — full 100% width

Container Breakpoints

The .container class has a fixed max-width that changes at each responsive breakpoint:

Class	Extra Small <576px	Small ≥576px	Medium ≥768px	Large ≥992px	X-Large ≥1200px
`.container`	100%	540px	720px	960px	1140px
`.container-sm`	100%	540px	720px	960px	1140px
`.container-md`	100%	100%	720px	960px	1140px
`.container-lg`	100%	100%	100%	960px	1140px
`.container-xl`	100%	100%	100%	100%	1140px
`.container-fluid`	100%	100%	100%	100%	100%

Container Padding, Border & Color

By default, containers have 15px left and right padding with no top or bottom padding. Use Bootstrap's spacing utilities to add extra padding and margins.

Spacing Utilities

.p-3 — padding on all sides (16px / 1rem)
.pt-3 — top padding only
.my-3 — vertical margin (top & bottom)
.mt-5 — top margin (48px / 3rem)

Border & Color Variants

Code

<!-- Border container -->
<div class="container p-3 my-3 border">
  <h1>My First Bootstrap Page</h1>
  <p>This container has a border and extra padding.</p>
</div>

<!-- Dark background -->
<div class="container p-3 my-3 bg-dark text-white">
  <h1>My First Bootstrap Page</h1>
  <p>Dark background, white text.</p>
</div>

<!-- Primary (blue) background -->
<div class="container p-3 my-3 bg-primary text-white">
  <h1>My First Bootstrap Page</h1>
  <p>Blue background, white text.</p>
</div>

Simulated Output

My First Bootstrap Page

This container has a border and some extra padding and margins.

My First Bootstrap Page

This container has a dark background color and a white text, and some extra padding and margins.

My First Bootstrap Page

This container has a blue background color and a white text, and some extra padding and margins.

Grid System — Concept & Classes

Bootstrap's grid system is built with flexbox and allows up to 12 columns across the page.
If you don't need all 12 individual columns, you can group them together to create wider columns.
Always wrap columns inside a .row div, and wrap that inside a .container.

12-Column Grid Visualised

1

span 4

span 8

span 6

span 12

Grid Classes

Class	Breakpoint	Screen Width
`.col-`	Extra small	< 576px
`.col-sm-`	Small	≥ 576px
`.col-md-`	Medium	≥ 768px
`.col-lg-`	Large	≥ 992px
`.col-xl-`	Extra large	≥ 1200px

Grid Structure & Examples

Basic Grid Structure

Template

<!-- Control column widths manually -->
<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>

<!-- Let Bootstrap handle the layout automatically -->
<div class="row">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

Three Equal Columns — .col

Using .col (with no number) lets Bootstrap automatically distribute columns equally across all screen sizes.

Code

<div class="row">
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
</div>

Simulated Output

.col

Responsive Columns — .col-sm-3

Four equal columns starting at tablets (≥576px). On screens smaller than 576px, the columns automatically stack vertically.

Code

<div class="row">
  <div class="col-sm-3">.col-sm-3</div>
  <div class="col-sm-3">.col-sm-3</div>
  <div class="col-sm-3">.col-sm-3</div>
  <div class="col-sm-3">.col-sm-3</div>
</div>

Simulated Output

.col-sm-3

Two Unequal Responsive Columns — .col-sm-4 + .col-sm-8

A sidebar (1/3 width) and main content area (2/3 width) — a very common layout pattern. The two column numbers must always add up to 12.

Code

<div class="row">
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-8">.col-sm-8</div>
</div>

Simulated Output

.col-sm-4

.col-sm-8

Column numbers in a row must always add up to 12. For example: col-sm-4 + col-sm-8 = 12. col-sm-6 + col-sm-6 = 12. You can also mix breakpoints: col-sm-6 col-md-4 = different layout at different screen sizes.

Bootstrap Text Colors

Bootstrap provides contextual text color classes that carry semantic meaning through color. They can be applied to any element and also work on links — links will show a darker hover state.

Available Text Color Classes

<p class="text-muted">Muted text</p>
<p class="text-primary">Primary text</p>
<p class="text-success">Success text</p>
<p class="text-info">Info text</p>
<p class="text-warning">Warning text</p>
<p class="text-danger">Danger text</p>
<p class="text-secondary">Secondary text</p>
<p class="text-dark">Dark text</p>
<p class="text-body">Body / default text</p>

<!-- 50% opacity variants -->
<p class="text-black-50">Black text at 50% opacity</p>
<p class="text-white-50 bg-dark">White text at 50% opacity</p>

Simulated Output

Muted Primary Success Info Warning Danger Secondary Dark Body/black

Black text with 50% opacity on white background

White text with 50% opacity on black background

Bootstrap Background Colors

Background color classes style an element's background. Note: they do not change the text color automatically, so pair them with a .text-* class when needed.

Available Background Color Classes

<div class="bg-primary text-white">Primary</div>
<div class="bg-success text-white">Success</div>
<div class="bg-info text-dark">Info</div>
<div class="bg-warning text-dark">Warning</div>
<div class="bg-danger text-white">Danger</div>
<div class="bg-secondary text-white">Secondary</div>
<div class="bg-dark text-white">Dark</div>
<div class="bg-light text-dark">Light</div>

Simulated Output

Primary

Success

Info

Warning

Danger

Secondary

Dark

Light

Note: background color classes do not set text color — always pair with a .text-* class.

Bootstrap

Introduction to Bootstrap

Setup & First Bootstrap Page

My First Bootstrap Page

Bootstrap Layout — Containers

My First Bootstrap Page

My First Bootstrap Page

My First Bootstrap Page

Bootstrap Grid System

Bootstrap Colors