MODULE 3

Introduction to Bootstrap
Bootstrap is an open-source front-end framework used for designing responsive and
mobile-first websites. It was originally developed by Twitter and has become a
popular tool among developers for creating sleek and professional web designs.
Overview of Bootstrap
History
Bootstrap was originally developed by Mark Otto and Jacob Thornton at Twitter in
2011 as an internal tool to create consistency across web applications. It was later
released as an open-source framework, quickly gaining popularity due to its
simplicity and effectiveness. Bootstrap has evolved over the years, with regular
updates introducing new features and better support for modern web design
practices. Its emphasis on responsive and mobile-first design has made it a staple in
web development.
Bootstrap, initially called "Twitter Blueprint," was developed by Mark Otto and Jacob
Thornton at Twitter in 2010 to standardize internal tool development and was
released as an open-source project in August 2011.
Here's a more detailed timeline:
2010:
Mark Otto and Jacob Thornton, engineers at Twitter, began developing "Twitter
Blueprint" to address inconsistencies in internal tool development and improve
efficiency.
August 19, 2011:
Twitter Blueprint was released as an open-source project, renamed "Bootstrap," and
made available on GitHub.
2012:
Bootstrap 2 was released, introducing responsive functionality as an optional
stylesheet.
2013:
Bootstrap 3 was released, making the framework responsive by default with a mobile-
first approach.
2018:
Bootstrap 4 was released, incorporating Flexbox, a redesigned grid system, and
enhanced customization options.
2021:
Bootstrap 5 was released.
Features
Responsive Grid System:
Bootstrap's grid system allows you to create layouts that adapt seamlessly to
different screen sizes, ensuring your website looks good on desktops, tablets, and
mobile devices.
Pre-built Components:
It offers a wide range of pre-designed components like navigation bars, forms,
buttons, tables, alerts, and more, saving you time and effort in building a website.
CSS Framework:
Bootstrap provides a CSS framework with pre-defined styles for various elements,
ensuring a consistent and professional look across your website.
JavaScript Plugins:
Bootstrap includes optional JavaScript plugins for interactive features like modals,
tooltips, carousels, and more.
Mobile-First Approach:
Bootstrap is designed with a mobile-first approach, meaning that the framework
prioritizes mobile devices and then scales up for larger screens.
Customization:
You can easily customize Bootstrap's components and styles to match your specific
design requirements.
Easy to Learn:
Bootstrap is relatively easy to learn and implement, making it accessible to both
beginners and experienced developers.
Open Source and Free:
Bootstrap is open-source and free to use, providing a cost-effective solution for web
developers.
Advantages of Bootstrap
1. Responsive Design – Bootstrap's grid system and responsive utilities help
create mobile-friendly websites that adapt to different screen sizes.
2. Easy to Use – Even beginners can quickly start using Bootstrap with basic
HTML and CSS knowledge.
3. Pre-styled Components – It offers a variety of pre-designed UI components
like buttons, forms, modals, tooltips, and navigation bars.
4. Consistency – Ensures uniform design across different browsers and
devices, reducing compatibility issues.
 5. Time-Saving – The ready-to-use components and styles speed up
development, eliminating the need to write custom CSS from scratch.
6. Customization – Developers can modify Bootstrap’s styles using SASS
variables or custom CSS to match project needs.
7. Open-Source & Free – Bootstrap is free to use and has a large community for
support and updates.
8. Integration with JavaScript – Comes with built-in JavaScript plugins for
enhanced functionality like modals, carousels, and tooltips.
9. Grid System – A powerful, flexible 12-column grid system makes layout
creation easy and efficient.
10. Extensive Documentation – Comprehensive documentation with examples,
making learning and implementation easier.
Bootstrap Installation Methods
1. Using a CDN (Content Delivery Network)
This is the fastest and easiest way to include Bootstrap in your project. No need to
download files—just link to the hosted files online.
Steps:
● Add the following <link> tag in your HTML <head> section for CSS:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.x.x/css/
bootstrap.min.css">
● Add the following <script> tag before the closing </body> tag for JavaScript
functionality:
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.x.x/js/
bootstrap.bundle.min.js"></script>
Advantages:
● Quick and simple to use.
● Always uses the latest version available online
● Lightweight for your local system.
2. Download Bootstrap Locally
If you want to host Bootstrap files on your own server, download them and include
them in your project.
Steps:
● Visit the official Bootstrap website and download the latest version.
● Extract the downloaded files and locate the CSS, JS, and Fonts directories.
● Link the downloaded files in your HTML file
<link rel="stylesheet" href="path-to-bootstrap/css/bootstrap.min.css">
<script src="path-to-bootstrap/js/bootstrap.bundle.min.js"></script>
Advantages:
● No dependency on internet connection.
● You can customize and modify the files as per your needs.
3. Using a Package Manager
If you're using build tools or package managers for your project, you can install
Bootstrap through npm or yarn.
Steps for npm:
● Open your terminal.
● Run the following command:
npm install bootstrap
● Import Bootstrap in your CSS or JavaScript file:
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min.js';
Advantages:
● Ideal for modern development workflows
● Simplifies updates and dependency management.

Each of these methods caters to different needs. The CDN method is perfect
for quick projects, local download provides customization flexibility, and the
package manager option works best for advanced development setups.

Understanding the Bootstrap grid system

The Bootstrap Grid System is a flexible layout system based on a 12-column

structure that helps create responsive web pages. It allows you to design
layouts that adapt to different screen sizes using rows and columns.
Bootstrap's grid system uses the following key components:

1. Containers
Containers serve as the parent element that wraps rows and columns.
Two types of containers:
 .container : Fixed-width layout based on breakpoints.
.fluid-container : Full-width layout that spans the entire width of the
viewport.
Example
<div class="container">
<div class="row">
<div class="col-md-6">Column 1</div>
<div class="col-md-6">Column 2</div>
</div>
</div>

2. Rows

● Rows are used to create horizontal groups of columns.

● They must be placed inside a container.
● The class row defines a group of columns that spans horizontally.
Example

<div class="row">
<!-- Columns go here -->
</div>

3. Columns
● Columns allow content to be aligned within a row.
● Use classes like .col-sm-4, .col-md-6 to specify how much space the
column should take.
● Column widths are defined as fractions of the 12-column grid (e.g., .col-
md-6 takes half the row width).
Example:
<div class="row">
<div class="col-md-4">Column 1</div>
<div class="col-md-8">Column 2</div>
</div>
 4. Breakpoints
Breakpoints define responsive behavior for different devices:
xs (extra small): <576px (default setting without class).
sm (small): >= 576px.
md (medium): >= 768px.
lg (large): >=992px.
xl (extra large): >= 1200px.
Columns adapt based on the screen size using these breakpoints. For
example:
<div class="col-sm-6 col-md-4 col-lg-3">Responsive Column</div>
4. Nesting
Columns can be nested within other columns to create more complex
layouts.
Example:
<div class="col-md-6">
<div class="row">
<div class="col-md-6">Nested Column 1</div>
<div class="col-md-6">Nested Column 2</div>
</div>
</div>

6. Alignment and Spacing

Bootstrap provides utility classes for alignment and spacing:
● Vertical and Horizontal Alignment: Use .align-items-center or .justify-
content-center.
● Gutters: Add spacing between columns using .g-* classes (e.g.,.g-3 for a
small gap).
Benefits of the Grid System
● Responsive Design: Automatically adjusts layout for different screen sizes.
● Flexibility: Allows developers to create custom layouts with varying column
widths.
● Simplicity: Pre-defined classes eliminate the need for custom CSS coding.
 Using Bootstrap Components: Navigation Bars,
Buttons, and Forms
Bootstrap provides ready-to-use UI components that make web development
faster and easier. Here’s how to use navigation bars, buttons, and forms in Bootstrap.
1. Navigation Bars (Navbar)
The Navbar component in Bootstrap is used to create responsive navigation
menus.
Key Classes:
● .navbar – Defines the navigation bar.
● .navbar-expand-lg – Makes the navbar responsive (adjusts based on screen
size).
● .navbar-dark / .navbar-light – Controls text and background colors.
● .navbar-brand – For branding/logo.
● .navbar-nav – Defines the navigation links.
● .nav-item and .nav-link – Used for individual menu items.
● .navbar-toggler – Adds a toggle button for mobile screens.
Example
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">MyWebsite</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">
<li class="nav-item"><a class="nav-link" 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>
</nav>
 2. Buttons
Bootstrap provides pre-styled buttons with different styles and sizes.
Key Classes:
● .btn – Base class for buttons.
● .btn-primary, .btn-secondary, .btn-success, .btn-danger, etc. – Different button
colors.
● .btn-lg, .btn-sm – Button sizes.
● .btn-outline-* – Outline-style buttons.
Example: Button Variants
<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-danger">Danger</button>
<button class="btn btn-warning">Warning</button>
<button class="btn btn-info">Info</button>
<button class="btn btn-light">Light</button>
<button class="btn btn-dark">Dark</button>
Button Groups: Creates a group of buttons that behave as a single unit.
3. Forms (User Input Fields)
Forms in Bootstrap are fully responsive and support custom styling.
Key Classes:
● .form-group – Wraps form elements.
● .form-control – Styles input fields.
● .form-label – Labels for inputs.
● .form-check – For checkboxes and radio buttons.
● .input-group – Groups inputs with icons or buttons.
Example

<form>
<div class="mb-3">
<label for="email" class="form-label">Email address</label>
<input type="email" class="form-control" id="email" placeholder="Enter your
email">
 </div>
<div class="mb-3">
<label for="password" class="form-label">Password</label>
<input type="password" class="form-control" id="password"
placeholder="Enter your password">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>

Responsive Design with Bootstrap

Introduction to Responsive Web Design
Responsive Web Design (RWD) is an approach that ensures web pages adapt
seamlessly to different screen sizes and devices. It improves user experience by
making websites functional and visually appealing on desktops, tablets, and mobile
devices.
Key Principles of Responsive Web Design
1. Fluid Grid Layouts – Uses relative units (%, em, rem) instead of fixed pixel
sizes.
2. Flexible Images & Media – Resizes images proportionally to fit different
screens.
3. Media Queries – Applies CSS styles based on screen width.
4. Mobile-First Approach – Designs for mobile screens first, then scales up for
larger devices.
5. Responsive Frameworks – Tools like Bootstrap provide built-in
responsiveness.

Using Bootstrap's responsive utilities

1 Display Utilities:
● Show/hide elements based on screen size.
● Control element visibility using .d-* classes.
Example: Show/Hide Elements Based on Screen Size
<p class="d-none d-md-block">Visible on medium (md) screens and larger.</p>
<p class="d-block d-md-none">Visible only on small screens.</p>
 ● .d-none – Hides the element.
● .d-block, .d-inline, .d-flex – Sets display properties.

2 Flexbox Utilities:
● Align content responsively.
● Bootstrap includes Flexbox utilities to align and justify content responsively.
Example: Center Content in a Flexbox Container
<div class="d-flex justify-content-center align-items-center vh-100">
<p>Centered content</p>
</div>
● .d-flex – Enables Flexbox.
● .justify-content-* – Aligns content horizontally.
● .align-items-* – Aligns content vertically.

3 Grid System:
● Create responsive layouts.
● The Bootstrap Grid System helps create flexible layouts using columns (col-
*), rows, and containers.
Example: Responsive Grid
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-4 col-lg-3">Column 1</div>
<div class="col-sm-6 col-md-4 col-lg-3">Column 2</div>
<div class="col-sm-6 col-md-4 col-lg-3">Column 3</div>
<div class="col-sm-6 col-md-4 col-lg-3">Column 4</div>
</div>
</div>
● .col-sm-* – Adjusts for small screens (≥576px).
● .col-md-* – Adjusts for medium screens (≥768px).
● .col-lg-* – Adjusts for large screens (≥992px).

4 Spacing Utilities:
 ● Adjust margins and padding.
● Bootstrap provides responsive margin (m-*) and padding (p-*) utilities.
Example
<div class="p-3 p-md-5 m-2 m-lg-4 bg-light">Responsive Spacing</div>
● p-* – Padding (p-1 to p-5).
● m-* – Margin (m-1 to m-5).
● *-md-* – Changes margin/padding at medium screens (≥768px).

5 Text & Image Utilities: Make text and images responsive.

Bootstrap allows responsive text and images using utilities like .img-fluid and .text-*.
Example : Responsive image
<img src="image.jpg" class="img-fluid" alt="Responsive Image">
.img-fluid – Ensures the image scales with the parent container.
Example : Responsive text
<p class="text-center text-md-start">Centered on small screens, left-aligned on
medium screens.</p>
.text-center – Centers text.
.text-md-start – Left-aligns on md screens and above.

Creating Responsive Layouts with Bootstrap Grid

System
The Bootstrap Grid System is a powerful and flexible way to create responsive
layouts. It uses a 12-column layout with flexible breakpoints to adjust elements
across different screen sizes.
1. Bootstrap Grid System Basics
The grid system is based on three key elements:
● Containers (.container, .container-fluid) – Define the layout boundaries.
● Rows (.row) – Create horizontal groups of columns.
● Columns (.col-*) – Define the number of columns within a row.

2. Bootstrap Grid Container Types

Class Description
.container Fixed-width container, adapts at different breakpoints.
.container-fluid Full-width container (100% width at all screen sizes).

.container-{breakpoint} Responsive container for specific breakpoints (sm, md, lg, xl, xxl).

3. Bootstrap Grid Column System

Bootstrap grids use 12 columns in a row. The column width can be adjusted
using .col-* classes.
● .col – Automatically distributes columns equally.
● .bg-* – Adds background colors for visibility.

4. Defining Column Widths

● You can specify the number of columns for each screen size.
● .col-6 – Each column takes 6 out of 12 columns (50% width).

5. Responsive Columns
Use breakpoint-based classes to change the layout on different screens.
● .col-sm-6 – 2 columns on small screens (≥576px).
● .col-md-4 – 3 columns on medium screens (≥768px).
● .col-lg-3 – 4 columns on large screens (≥992px).

6. Nested Columns
You can nest rows inside columns to create more complex layouts.

Designing for Different Screen Sizes: Mobile, Tablet,

Desktop with Bootstrap
Responsive web design ensures that a website looks great and functions well on all
devices, including mobile, tablet, and desktop screens. Bootstrap simplifies this
process with grid systems, responsive utilities, and adaptive components.

1. Understanding Screen Sizes & Bootstrap Breakpoints

Different devices have different screen sizes. Bootstrap provides breakpoints to
apply different layouts for each screen type:
Device Screen Width Bootstrap Breakpoints
Mobile <576px xs (extra small, no prefix)
Tablet ≥576px and <992px sm (small) and md (medium)
Desktop ≥992px lg (large) and above (xl, xxl)

2. Mobile-First Design Approach

Start with a simple, single-column layout
Make navigation easy with a collapsible menu
Use flexible images (.img-fluid)
Example: Mobile Layout (Default Single Column)
<div class="container">
<div class="row">
<div class="col bg-primary text-white">Full Width Column</

Bootstrap Components
Bootstrap provides a variety of components that make styling and layout design
easier.
Typography – Styling text and headings
Buttons – Creating and customizing buttons and button groups
Navigation Bars – Building responsive menus and dropdowns

1. Working with Bootstrap Typography

Bootstrap provides default font styles, heading styles, and utility classes to style text
effectively.
1.1 Bootstrap Headings
Bootstrap offers pre-styled headings (h1 to h6) with consistent spacing and font
sizes.
<h1 class="h1">Heading 1</h1>
<h2 class="h2">Heading 2</h2>
<h3 class="h3">Heading 3</h3>
<h4 class="h4">Heading 4</h4>
<h5 class="h5">Heading 5</h5>
<h6 class="h6">Heading 6</h6>
Effect: Ensures consistent font sizes across different screen sizes.
1.2 Display Headings (Larger Headings)
For bigger headings, use display classes (.display-1 to .display-6).
<h1 class="display-1">Large Display Heading</h1>
<h2 class="display-4">Smaller Display Heading</h2>
1.3 Text Alignment & Formatting
Bootstrap provides text utilities for alignment, transformation, and emphasis.
<p class="text-center">Centered Text</p>
<p class="text-start">Left-Aligned Text</p>
<p class="text-end">Right-Aligned Text</p>

<p class="text-uppercase">Uppercase Text</p>

<p class="text-lowercase">Lowercase Text</p>
<p class="text-capitalize">Capitalized Text</p>

<p class="fw-bold">Bold Text</p>

<p class="fw-light">Light Text</p>
<p class="fst-italic">Italic Text</p>

2. Using Bootstrap’s CSS Classes for Styling Text and Headings

Bootstrap provides text colors, background colors, and utility classes.

2.1 Text Color Classes

<p class="text-primary">Primary Text</p>
<p class="text-secondary">Secondary Text</p>
<p class="text-success">Success Text</p>
<p class="text-danger">Danger Text</p>
<p class="text-warning">Warning Text</p>
<p class="text-info">Info Text</p>
<p class="text-muted">Muted Text</p>
Effect: Applies Bootstrap’s predefined color palette.
2.2 Background Color Classes
<p class="bg-primary text-white">Primary Background</p>
<p class="bg-warning text-dark">Warning Background</p>
3. Creating and Customizing Buttons in Bootstrap
Bootstrap provides different styles of buttons.
3.1 Basic Bootstrap Buttons
Use .btn and .btn-* classes to create buttons.
<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-danger">Danger</button>
<button class="btn btn-warning">Warning</button>
<button class="btn btn-info">Info</button>
<button class="btn btn-light">Light</button>
<button class="btn btn-dark">Dark</button>
Effect: Buttons use Bootstrap’s predefined color themes.
3.2 Button Sizes
<button class="btn btn-primary btn-lg">Large Button</button>
<button class="btn btn-secondary btn-sm">Small Button</button>

3.3 Outline Buttons

<button class="btn btn-outline-primary">Outline Primary</button>
<button class="btn btn-outline-danger">Outline Danger</button>
Effect: Creates border-only buttons that become filled on hover.

4. Button Groups
Button groups align multiple buttons in a row.
<div class="btn-group">
<button class="btn btn-primary">Left</button>
<button class="btn btn-primary">Middle</button>
<button class="btn btn-primary">Right</button>
</div>
Effect: Buttons stay together like a single element.
5. Building Responsive Navigation Bars
Bootstrap’s navbar component makes it easy to create responsive menus.
5.1 Basic Navbar
<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">
<li class="nav-item"><a class="nav-link" 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>
</nav>
Behavior:
● Mobile (<992px) Navbar collapses into a hamburger menu.
● Desktop (≥992px) Navbar is fully visible.

6. Creating Dropdown Menus

Dropdowns allow extra options within a navbar.
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-bs-
toggle="dropdown">
Dropdown Menu
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another Action</a></li>
<li><a class="dropdown-item" href="#">Something Else</a></li>