Web Technology Lecture Notes: Bootstrap

Bootstrap
Lecture Notes: Introduction, Downloading/Linking,
Using Bootstrap Classes, and the Grid System

Contents
1 Introduction to Bootstrap 2
1.1 Definition . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
1.2 Why Use Bootstrap? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
1.3 Key Features of Bootstrap . . . . . . . . . . . . . . . . . . . . . . . . . . 2
1.4 Versions of Bootstrap (Brief Overview) . . . . . . . . . . . . . . . . . . . 3

2 Downloading and Linking Bootstrap 4

2.1 Method 1: Using a CDN (Recommended for Beginners) . . . . . . . . . . 4
2.2 Method 2: Downloading Bootstrap Locally . . . . . . . . . . . . . . . . . 4
2.3 Method 3: Installing via Package Manager (npm) . . . . . . . . . . . . . 5
2.4 Comparison of Methods . . . . . . . . . . . . . . . . . . . . . . . . . . . 5

3 Using Classes of Bootstrap 6

3.1 Typography Classes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
3.2 Color and Background Classes . . . . . . . . . . . . . . . . . . . . . . . . 6
3.3 Button Classes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
3.4 Spacing Utility Classes . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
3.5 Card Component Example . . . . . . . . . . . . . . . . . . . . . . . . . . 7
3.6 Navbar Component Example . . . . . . . . . . . . . . . . . . . . . . . . . 7
3.7 Alerts, Badges, and Other Utilities . . . . . . . . . . . . . . . . . . . . . 7

4 Understanding the Grid System in Bootstrap 8

4.1 What is the Grid System? . . . . . . . . . . . . . . . . . . . . . . . . . . 8
4.2 Core Structure: Container → Row → Column . . . . . . . . . . . . . . . 8
4.3 Types of Containers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
4.4 The 12-Column Concept . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
4.5 Responsive Breakpoints . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
4.6 Responsive Column Classes . . . . . . . . . . . . . . . . . . . . . . . . . 9
4.7 Grid Utilities: Gutters, Offsets, and Ordering . . . . . . . . . . . . . . . 9
4.8 Nesting Grids . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
4.9 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10

1
Web Technology Lecture Notes: Bootstrap

1 Introduction to Bootstrap
1.1 Definition
Bootstrap is a free, open-source front-end CSS framework used for developing re-
sponsive, mobile-first websites and web applications quickly and consistently. It was
originally created by Mark Otto and Jacob Thornton at Twitter in 2010 (initially
called “Twitter Blueprint”) and released as an open-source project in 2011.
Bootstrap bundles together HTML, CSS, and JavaScript templates for common UI
components – buttons, forms, navigation bars, modals, carousels, cards, and more – along
with a powerful, responsive grid system for arranging page layout.

1.2 Why Use Bootstrap?

ˆ Responsive Design: Websites automatically adapt to different screen sizes –
desktops, tablets, and mobile phones – using a mobile-first approach.
ˆ Consistency: Provides a uniform, professional look and feel across browsers and
devices without needing to write CSS from scratch.
ˆ Speed of Development: Pre-built components and utility classes drastically
reduce development time.
ˆ Cross-Browser Compatibility: Tested and works consistently across all major
browsers (Chrome, Firefox, Safari, Edge).
ˆ Customizable: Can be customized using Sass variables, or by overriding classes
with custom CSS.
ˆ Large Community and Documentation: Extensive official documentation,
along with a huge community offering themes, templates, and plugins.
ˆ Grid System: A flexible, 12-column responsive grid layout system built on
Flexbox (and CSS Grid in newer versions).

1.3 Key Features of Bootstrap

ˆ 12-column responsive grid system for building flexible layouts.
ˆ Pre-styled components: navbars, buttons, forms, alerts, cards, modals, tooltips,
carousels, badges, breadcrumbs, pagination, etc.
ˆ Utility classes for spacing, colors, text alignment, display, flexbox, borders, and
shadows – eliminating the need for a lot of custom CSS.
ˆ Built-in support for JavaScript plugins (e.g. dropdowns, modals, tooltips,
carousels) – in Bootstrap 5, these are powered by vanilla JavaScript (no jQuery
dependency).
ˆ Sass-based source files, allowing deep customization of colors, spacing, break-
points, and components.
ˆ Icon library (Bootstrap Icons) available as a companion project.

2
Web Technology Lecture Notes: Bootstrap

1.4 Versions of Bootstrap (Brief Overview)

Version Notable Points
Bootstrap 2 Introduced the responsive grid system.
Bootstrap 3 Mobile-first approach introduced; flat design.
Bootstrap 4 Switched from Less to Sass; Flexbox-based grid; dropped jQuery depen-
dency for some plugins; added new utility classes.
Bootstrap 5 Removed jQuery dependency entirely; dropped Internet Explorer sup-
port; new utility API; improved grid with additional breakpoints; native
JavaScript.

Key Point
Bootstrap follows a mobile-first design philosophy – styles are written for the small-
est screen size first, and then progressively enhanced for larger screens using CSS
media queries (breakpoints).

3
Web Technology Lecture Notes: Bootstrap

2 Downloading and Linking Bootstrap

There are two primary ways to start using Bootstrap in a project: (1) linking it via
a CDN (Content Delivery Network), or (2) downloading the compiled files and
hosting them locally.

2.1 Method 1: Using a CDN (Recommended for Beginners)

The quickest way to use Bootstrap is to include its CSS and JavaScript files directly from
a CDN inside the <head> and before the closing </body> tag of an HTML document.
No downloading or installation is required.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Bootstrap Page</title>

<!-- Bootstrap CSS (via CDN) -->

<link href="[Link]
[Link]"
rel="stylesheet">
</head>
<body>

<h1 class="text-center text-primary">Hello, Bootstrap!</h1>

<!-- Bootstrap JavaScript Bundle (includes Popper) -->

<script src="[Link]
[Link]"></script>
</body>
</html>

Key Point
Advantages of using a CDN: no download needed, faster load times (the file may
already be cached in the user’s browser from another site), and always easy to switch
versions. Disadvantage: requires an active internet connection.

2.2 Method 2: Downloading Bootstrap Locally

1. Visit the official Bootstrap website: [Link]
2. Click on Download and choose “Compiled CSS and JS” – this provides ready-
to-use [Link], [Link], [Link], and [Link]
files.
3. Extract the downloaded ZIP file into your project folder (commonly inside a css/
and js/ sub-folder).

4
Web Technology Lecture Notes: Bootstrap

4. Link the local files in your HTML document instead of the CDN URLs:
<head>
<link href="css/[Link]" rel="stylesheet">
</head>
<body>
...
<script src="js/[Link]"></script>
</body>

ˆ Advantage: Works offline; full control over the exact files being used; no depen-
dency on third-party CDN uptime.
ˆ Disadvantage: Increases project size; must be manually updated to a newer
version when required.

2.3 Method 3: Installing via Package Manager (npm)

For projects using a build tool (Webpack, Vite, etc.), Bootstrap can be installed via npm:
npm install bootstrap

It can then be imported into a JavaScript or Sass entry file:

import ’bootstrap/dist/css/[Link]’;
import ’bootstrap/dist/js/[Link]’;

This approach is preferred in modern JavaScript-framework-based projects (React, An-

gular, Vue) that use a bundler.

2.4 Comparison of Methods

Method Best For Requires Internet?
CDN Quick prototypes, learning, Yes (at runtime)
small projects
Local Download Offline projects, full control No (after download)
over files
npm / Package Manager Projects with build tools (Re- Only during installation
act, Vue, Angular)

5
Web Technology Lecture Notes: Bootstrap

3 Using Classes of Bootstrap

Bootstrap works primarily by applying pre-defined CSS classes directly to HTML el-
ements. Once Bootstrap’s CSS file is linked, hundreds of ready-made classes become
available for styling text, layout, components, and behaviour – without writing any cus-
tom CSS.

3.1 Typography Classes

Class Purpose
.text-center / .text-start / .text-end Align text center, left, or right
.text-primary / .text-danger / .text-success Apply theme colors to text
.fw-bold / .fw-light Font weight (bold / light)
.fst-italic Italicize text
.text-uppercase / .text-lowercase Change text case
.lead Make a paragraph stand out

3.2 Color and Background Classes

ˆ .bg-primary, .bg-secondary, .bg-success, .bg-danger, .bg-warning, .bg-info,
.bg-light, .bg-dark – apply theme background colors.
ˆ .text-white, .text-muted – control text color over colored backgrounds.

3.3 Button Classes

<button class="btn btn-primary">Primary</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-danger">Danger</button>
<button class="btn btn-outline-secondary">Outline</button>
<button class="btn btn-primary btn-lg">Large Button</button>

The base class .btn must always be combined with a contextual class (.btn-primary,
.btn-danger, etc.) and optionally a size modifier (.btn-sm, .btn-lg).

3.4 Spacing Utility Classes

Bootstrap uses a shorthand naming convention for margin and padding:

{property}{sides}-{size} e.g. mt-3, px-2, mb-5

Prefix Meaning
m/p margin / padding
t, b, s, e top, bottom, start (left), end (right)
x, y horizontal (left+right) / vertical (top+bottom)
0--5, auto Size scale from 0 (none) to 5 (largest), or auto
Example: class="mt-4 px-3 mb-2" applies top margin, horizontal padding, and bottom
margin.

6
Web Technology Lecture Notes: Bootstrap

3.5 Card Component Example

<div class="card" style="width: 18rem;">
<img src="[Link]" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card Title</h5>
<p class="card-text">Some quick example text for the card.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>

3.6 Navbar Component Example

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">MySite</a>
<ul class="navbar-nav">
<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>

3.7 Alerts, Badges, and Other Utilities

<div class="alert alert-warning">This is a warning alert!</div>
<span class="badge bg-info">New</span>
<div class="shadow-sm p-3 mb-2 bg-white rounded">Shadow box</div>

Key Point
Bootstrap classes can (and usually should) be combined on the same element – e.g.
class="btn btn-danger btn-lg mt-3 shadow" applies multiple pre-defined styling
rules simultaneously, without a single line of custom CSS.

7
Web Technology Lecture Notes: Bootstrap

4 Understanding the Grid System in Bootstrap

4.1 What is the Grid System?
Bootstrap’s grid system is a powerful, mobile-first, flexbox-based layout system used
to build responsive page layouts by dividing the page horizontally into 12 equal-width
columns. Content is placed inside these columns, and Bootstrap automatically adjusts
column widths and stacking behaviour based on the screen size.

4.2 Core Structure: Container → Row → Column

The grid system is built using three levels of nested elements:
1. Container (.container, .container-fluid): Wraps the grid content and pro-
vides consistent left/right padding and centering.
2. Row (.row): A horizontal wrapper for columns; uses negative margins to align
columns correctly and must be placed directly inside a container.
3. Column (.col, .col-*): The actual content-holding unit; columns must be
placed directly inside a row.
<div class="container">
<div class="row">
<div class="col">Column 1</div>
<div class="col">Column 2</div>
<div class="col">Column 3</div>
</div>
</div>

4.3 Types of Containers

Class Behaviour
.container Fixed, responsive width at each breakpoint (with margins
on either side).
.container-fluid Always spans 100% of the viewport width at all break-
points.
.container-{breakpoint} 100% wide until the specified breakpoint, then fixed width
(e.g. .container-md).

4.4 The 12-Column Concept

Every row is divided into 12 columns. You specify how many of those 12 columns a
particular <div> should occupy using classes like .col-4, .col-6, etc.
<div class="row">
<div class="col-4">col-4 (1/3 width)</div>
<div class="col-4">col-4 (1/3 width)</div>
<div class="col-4">col-4 (1/3 width)</div>
</div>

8
Web Technology Lecture Notes: Bootstrap

<div class="row">
<div class="col-8">col-8 (2/3 width)</div>
<div class="col-4">col-4 (1/3 width)</div>
</div>

Key Point
If the column widths in a row add up to more than 12, the extra columns wrap onto
a new line. If .col (without a number) is used, Bootstrap automatically divides the
available space equally among all such columns.

4.5 Responsive Breakpoints

Bootstrap 5 defines six responsive breakpoints, each with its own infix used in grid classes:
Breakpoint Class Infix Min. Screen Width
Extra small (none) <576px
Small sm ≥576px
Medium md ≥768px
Large lg ≥992px
Extra large xl ≥1200px
Extra extra large xxl ≥1400px

4.6 Responsive Column Classes

Column classes follow the pattern .col-{breakpoint}-{number of columns}, allowing
different layouts at different screen sizes:
<div class="row">
<div class="col-12 col-md-6 col-lg-4">
Full width on mobile, half on tablets, one-third on large screens
</div>
<div class="col-12 col-md-6 col-lg-4">Column 2</div>
<div class="col-12 col-md-6 col-lg-4">Column 3</div>
</div>

Here, on extra-small screens each column takes the full width (12/12) and stacks
vertically; on medium screens each takes half width (6/12), showing two per row;
on large screens and above, each takes one-third width (4/12), showing three per
row.

4.7 Grid Utilities: Gutters, Offsets, and Ordering

ˆ Gutters: The padding/spacing between columns; can be controlled using classes
like .g-0 to .g-5, or separately with .gx-* (horizontal) and .gy-* (vertical).
ˆ Offsets: Push a column to the right by a specified number of columns, e.g.
.offset-md-2 shifts a column right by 2 columns on medium screens and above.

9
Web Technology Lecture Notes: Bootstrap

ˆ Reordering: Classes like .order-1, .order-2, or .order-first / .order-last

change the visual order of columns without altering the HTML source order.
ˆ Vertical Alignment: .align-items-start, .align-items-center, .align-items-end
(on the row) align columns vertically within the row.
ˆ Horizontal Alignment: .justify-content-center, .justify-content-between,
etc. (on the row) control horizontal distribution of columns.
<div class="row">
<div class="col-md-4 offset-md-4">Centered column (4 of 12, offset by 4)</
div>
</div>

4.8 Nesting Grids

Rows and columns can be nested inside an existing column to create more complex
layouts:
<div class="row">
<div class="col-md-8">
Main content
<div class="row">
<div class="col-6">Nested col 1</div>
<div class="col-6">Nested col 2</div>
</div>
</div>
<div class="col-md-4">Sidebar</div>
</div>

4.9 Summary
Concept Description
Container Outer wrapper providing padding and centering
Row Horizontal group that holds columns
Column Content unit; width defined out of 12 total units
Breakpoints sm, md, lg, xl, xxl – control layout per screen size
Offset Shifts a column to the right
Gutter Spacing between columns
Order Changes visual position of columns

Summary
Bootstrap’s grid system uses a Container → Row → Column hierarchy built on
a 12-column, mobile-first, flexbox layout. By combining breakpoint-specific
column classes (col-sm-*, col-md-*, col-lg-*, etc.), developers can build a single
HTML layout that automatically rearranges itself for phones, tablets, and desktops
– without writing separate CSS media queries manually.

10