Unit-2 (web Technologies)

1. What is Bootstrap?
 Bootstrap is a free front-end framework for faster and easier web development.
 It is the most popular framework for developing responsive, mobile-first websites.
 Bootstrap includes HTML and CSS-based design templates for typography, forms, buttons, tables,
navigation, modals, image carousels and many other things — as well as optional JavaScript
plugins
 It gives developers the ability to easily create responsive designs, meaning websites that look
good on desktops, tablets and phones.

Example

<!-- Bootstrap CSS required -->

<link rel="stylesheet" href="...[Link]">

<!-- Large highlighted header area -->

<div class="jumbotron text-center">
<h1>My First Bootstrap Page</h1>
<p>Resize this responsive page to see the effect!</p>
</div>

<!-- Centered content area -->

<div class="container">
<div class="row"><!-- row for columns -->
<div class="col-sm-4"> <!-- 1/3 width on small+ screens, full width on xs -->
<h3>Column 1</h3>
<p>Lorem ipsum dolor..</p>
</div>
<div class="col-sm-4">
<h3>Column 2</h3>
<p>Lorem ipsum dolor..</p>
</div>
<div class="col-sm-4">
<h3>Column 3</h3>
<p>Lorem ipsum dolor..</p>
</div>
</div>
</div>

<!-- Bootstrap JS (optional for this example) -->

<script src="...[Link]"></script>

2. History: Who made it & When

 Bootstrap was developed by Mark Otto and Jacob Thornton at Twitter
 It was first released as an open-source project in August 2011.
 Over time, it has evolved through versions:
 o Bootstrap 3 (2013) – emphasised mobile-first design.
o Bootstrap 4 (2018) – newer components, improved grid system.
o Bootstrap 5 (2021) – removed jQuery dependency, even more flexible.

3. Why Use Bootstrap? (Key Features)

Here are important features that make Bootstrap useful:

 Responsive grid system: It uses a grid layout of up to 12 columns which automatically rearrange
themselves for different screen sizes.
 Pre-designed UI components: Buttons, navbars, forms, tables, cards etc are ready to use.
 Mobile-first approach: The framework is designed to work well on mobile devices first, then
scale up.
 Cross-browser compatibility: Works across major browsers, reducing extra effort from
developers.
 Easy to get started: Even if a developer knows only basic HTML and CSS, they can start
building layouts fast using Bootstrap.

4. Advantages of Bootstrap
 Speeds up development: You don’t have to design everything from scratch.
 Responsive by default: Adjusts to mobile, tablet and desktop views.
 Consistent design: Pre-built classes ensure consistent look and behaviour.
 Large community and lots of learning material/templates available.
 Good for prototyping: You can quickly create a working site and then customise.

5. Disadvantages of Bootstrap
 Many sites may look very similar unless heavy customization is done (the “Bootstrap look”).
 It can add extra code/size (overhead) if many components are included but not used.
 Customisation beyond default styles may require deeper CSS/SCSS knowledge.
 Because it uses many classes in HTML, the markup may appear more complex.
 If you want a very unique design, you might find Bootstrap’s defaults limiting and may still need
custom CSS.

6. Summary Table
 Topic Details
What it is Front-end framework for responsive web design
Created by Mark Otto & Jacob Thornton at Twitter (Aug 2011)
Major versions 3, 4, 5
Key features Grid system, UI components, mobile-first, responsive
Advantages Fast development, responsive, consistent, large resources

Disadvantages Similar look, code bloat, customization effort

Responsive Web Design (RWD)

1️⃣ Introduction
 Responsive Web Design (RWD) means creating web pages that automatically adjust and look
good on all devices, whether it’s a desktop computer, tablet, or mobile phone.
 The goal is to make the website usable and visually appealing no matter what screen size the
user has.
 A responsive design ensures:
o Text is readable without zooming.
o Navigation is easy to use on touch screens.
o Layouts adapt smoothly to screen changes.

“Responsive web design makes your web page look good on all devices (desktops, tablets, and phones). It
uses only HTML and CSS.”

2️⃣ Why Responsive Design Is Important

1. Multiple devices: Users browse the web from different devices — laptop, tablet, mobile — with
varying screen sizes.
2. Better user experience: Visitors stay longer on a site that fits their screen properly.
3. Google ranking: Google prefers mobile-friendly websites, which improves search ranking.
4. Single code base: No need to design separate mobile and desktop versions — one design adapts
everywhere.

3️⃣ Key Techniques Used in Responsive Web Design

Responsive design uses three main techniques:

Technique Description

1. Flexible Use relative units like percentages instead of fixed pixels. This allows containers and text to
Layouts resize based on the screen.

2. Flexible
Images automatically resize to fit their containers using CSS properties like max-width: 100%.
Images

3. Media
CSS rules that apply different styles depending on the screen width or device type.
Queries

4️⃣ Example (without using Bootstarp)of a Simple Responsive

Web Page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* Base styles for all devices */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}

.header {
background-color: #4CAF50;
color: white;
padding: 20px;
text-align: center;
}

.column {
float: left;
width: 50%;
padding: 10px;
}

/* Media Query for smaller screens */

@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}
</style>
</head>

<body>

<div class="header">
<h1>Responsive Web Page Example</h1>
<p>Resize the browser window to see the effect!</p>
</div>

<div class="column" style="background-color:#aaa;">

<h2>Column 1</h2>
 <p>Some text here...</p>
</div>

<div class="column" style="background-color:#bbb;">

<h2>Column 2</h2>
<p>Some text here...</p>
</div>

</body>
</html>

5️⃣ Step-by-Step Explanation

1. <meta name="viewport">
o This tag tells the browser how to control the page’s dimensions and scaling on mobile
devices.
o Without it, the page might not resize properly on phones.
2. Flexible Layouts
o The two columns each have width: 50%.
o Instead of fixed pixel widths, using percentage allows them to shrink or expand as the
screen changes.
3. Media Query
4. @media screen and (max-width: 600px) {
5. .column { width: 100%; }
6. }

oWhen the screen width is 600px or less (like on a smartphone), each column takes up
100% width, stacking vertically.
o On larger screens, they stay side by side.
7. Flexible Images (not shown here)
o You can make images responsive by adding:
o img { max-width: 100%; height: auto; }

o This makes sure the image scales to fit its container and doesn’t overflow.

6️⃣ Advantages of Responsive Web Design

Advantage Description

Device Compatibility Works across phones, tablets, and desktops automatically.

Cost Efficient One website for all devices — no separate mobile version needed.

Better SEO Google ranks mobile-friendly sites higher.

Improved User Experience No need to zoom or scroll horizontally.

Future Friendly Works with new device sizes automatically.

7️⃣ Disadvantages / Challenges

 Disadvantage Description

Development Time Requires careful planning and testing across devices.

Complex CSS Managing multiple breakpoints and layouts can be difficult.

Performance Issues Loading large images for small screens can slow down sites if not optimized.

Older Browser Support Some old browsers do not fully support media queries.

8️⃣ Real-World Example with Bootstrap

Bootstrap uses responsive design principles by default:

<link rel="stylesheet" href="[Link]

<div class="jumbotron text-center">

<h1>My First Bootstrap Page</h1>

<p>Resize this responsive page to see the effect!</p>

</div>

<div class="container">

<div class="row">

<div class="col-sm-4">Column 1</div>

<div class="col-sm-4">Column 2</div>

<div class="col-sm-4">Column 3</div>

</div>

</div>

 Automatically adjusts to fit screen sizes using the grid system.

 No custom media queries needed — Bootstrap handles it internally.

📝 Summary
Concept Description

Definition Designing websites that adapt to different screen sizes

 Concept Description

Key Techniques Flexible grids, flexible images, media queries

Main Tag <meta name="viewport" content="width=device-width, initial-scale=1">

Advantages Mobile-friendly, single design, SEO benefits

Example Framework Bootstrap

Linking with Bootstrap:

🔹 Introduction
To use Bootstrap in a web page, we must link Bootstrap files (CSS and JS) to our HTML document.
These files contain ready-made design styles and interactive components that make web pages
responsive and attractive without writing much CSS or JavaScript manually.

🔹 Two Ways to Link Bootstrap

Bootstrap can be added to your webpage in two different ways:

1️⃣ Using a CDN (Content Delivery Network)

2️⃣ Downloading Bootstrap Files Locally

🔸 1. Linking Bootstrap Using CDN (Recommended)

✅ What is CDN?

A CDN (Content Delivery Network) is a set of servers distributed across the world that deliver web
content quickly.
Using a CDN means you don’t have to download Bootstrap — your page loads Bootstrap directly from
the internet.

✅ Steps
 1. Open a new HTML file in your editor.
2. Add the following lines inside the <head> and before </body>.

💻 Example: Linking Bootstrap via CDN

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Example</title>

<!-- ✅ Bootstrap CSS CDN -->

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

<body>

<div class="container">
<h1 class="text-center text-primary">Hello, Bootstrap!</h1>
<p>This page is linked using Bootstrap via CDN.</p>
</div>

<!-- ✅ Bootstrap JS and [Link] CDN -->

<script src="[Link]
script>
<script
src="[Link]
script>

</body>
</html>

🧠 Explanation of Each Part

Tag / File Purpose

<link rel="stylesheet"
href="...[Link]"> Adds Bootstrap CSS styles

<script src="...[Link]"></script> Adds jQuery (used by Bootstrap JS)

<script Adds Bootstrap’s JavaScript features (like

src="...[Link]"></script> dropdowns, modals, tooltips)

meta viewport Makes the page responsive to device screen size

✅ Advantages of Using CDN

Advantage Description

🚀 Fast Loading Bootstrap files load from nearby CDN servers.

 Advantage Description

💾 No Download Needed No need to store Bootstrap files locally.

♻️Automatic Updates Always uses the latest stable version.

🧩 Easy to Use Just copy and paste the link tags — no setup needed.

⚠️Disadvantages of Using CDN

Disadvantage Description

🌐 Internet Required Your webpage needs internet access to load Bootstrap.

🕓 Version Dependency Future updates may change design slightly.

🔒 Security Concern External files depend on third-party servers.

🔸 2. Linking Bootstrap Locally (Offline Use)

If you want to use Bootstrap without internet, you can download Bootstrap files and store them on your
computer.

✅ Steps

1. Go to the official Bootstrap website → [Link]

2. Download the compiled CSS and JS files.
3. Extract the ZIP folder.
4. Link them like this in your HTML file:

💻 Example: Linking Bootstrap Locally

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Local Bootstrap Example</title>

<!-- ✅ Bootstrap CSS Local File -->

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

<body>

<div class="container text-center">

<h1 class="text-success">Local Bootstrap Example</h1>
<p>This page uses Bootstrap stored locally.</p>
 </div>

<!-- ✅ Bootstrap JS Local Files -->

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

✅ Advantages of Local Linking

Advantage Description

💻 Works Offline No internet connection needed.

🧩 Customizable You can edit Bootstrap CSS or JS for your project.

🔐 Secure Files are stored locally (no third-party servers).

⚠️Disadvantages of Local Linking

Disadvantage Description

🧱 Manual Updates You must update Bootstrap manually when a new version is released.

🕓 Initial Setup Time Need to download and manage folders.

🔹 Important Meta Tag

<meta name="viewport" content="width=device-width, initial-scale=1">

 This tag ensures the webpage is displayed correctly on mobile and tablet screens.
 It is mandatory for responsive Bootstrap designs.

🔹 Summary
Method Description Internet Needed Recommended For

CDN Linking Uses online links for Bootstrap CSS & JS ✅ Yes Beginners, small projects

Local Linking Uses downloaded Bootstrap files ❌ No Offline work, customized projects

In Simple Words:
Linking Bootstrap means connecting your HTML page with Bootstrap’s CSS and JS files — either online
(via CDN) or offline (locally) so that your page becomes responsive, styled, and interactive.
Container Class in Bootstrap:

🔹 Introduction
In Bootstrap, the .container class is one of the most important layout elements.
It is used to wrap or contain all the webpage content and helps in creating responsive, fixed-width
layouts.

Think of it like a main box that holds all other elements — text, images, buttons, rows, and columns —
in a neat and centered way.

🔹 Purpose of Container
 To center your content on the page.
 To add left and right padding automatically.
 To make layouts responsive (adjust according to screen size).
 To act as a parent element for the Bootstrap grid system (rows and columns).

🔹 Types of Containers in Bootstrap

There are three types of containers in Bootstrap:

Type Description

.container Fixed-width container (width changes at different breakpoints).

.container-fluid Full-width container (takes 100% of the screen width).

.container- Responsive container that becomes fixed-width at a specific screen size (e.g.,
{breakpoint} .container-sm, .container-md, etc.).

1️⃣ .container (Fixed Width Container)

Example
<div class="container bg-light border">
<h2>Fixed Container Example</h2>
<p>This container has a fixed width that changes with screen size.</p>
</div>
Explanation

 .container gives a maximum width at each responsive breakpoint.

 For example:
o 100% width on small screens.
o Fixed width (e.g., 720px, 960px, 1140px, etc.) on larger screens.
 The content stays centered on the page.

2️⃣ .container-fluid (Full Width Container)

Example
<div class="container-fluid bg-info text-white">
<h2>Fluid Container Example</h2>
<p>This container always takes 100% of the screen width.</p>
</div>

Explanation

 .container-fluid covers the entire width of the screen.

 Commonly used for headers, banners, or sections that stretch across the page.

🧩 3️⃣ .container-{breakpoint} (Responsive Container)

✅ Example
<div class="container-md bg-warning">
<h2>Responsive Container Example</h2>
<p>This container is full-width until the screen size reaches 'md' (medium
devices), then it becomes fixed.</p>
</div>

🧠 Explanation

Class Behavior

.container-sm Fixed width from small devices (≥576px)

.container-md Fixed width from medium devices (≥768px)

.container-lg Fixed width from large devices (≥992px)

.container-xl Fixed width from extra-large devices (≥1200px)

.container-xxl Fixed width from very large devices (≥1400px)

🧱 Using Containers with Grid System

The Bootstrap Grid System (rows and columns) must always be placed inside a container.

✅ Example
<div class="container">
<div class="row">
<div class="col-sm-4 bg-success text-white p-3">Column 1</div>
<div class="col-sm-4 bg-danger text-white p-3">Column 2</div>
<div class="col-sm-4 bg-primary text-white p-3">Column 3</div>
</div>
</div>

🧠 Explanation

 The container holds the row.

 The row contains the columns.
 This structure ensures proper alignment and spacing.

🧩 Difference Between .container and .container-fluid

Feature .container .container-fluid

Width Fixed (changes with screen size) Always 100% (full width)

Layout Type Centered layout Full-screen layout

Common Uses Normal web content, pages, articles Headers, banners, dashboards

Padding Adds side margins automatically Covers full screen width

Example Website body Navigation bar or background section

🧠 Example Comparison
<div class="container bg-light p-3">
<h4>.container</h4>
<p>This is fixed and centered content.</p>
</div>

<div class="container-fluid bg-secondary text-white p-3">

<h4>.container-fluid</h4>
<p>This stretches across the entire screen width.</p>
</div>

🧩 Advantages of Using Containers

Advantage Description

📱 Responsive Layouts Automatically adjusts to different screen sizes.

🎨 Better Design Control Keeps content properly aligned and padded.

 Advantage Description

🧩 Foundation for Grid System Containers are required for rows and columns.

🧱 Organized Structure Makes layout easier to read and manage.

⚠️Common Mistakes
❌ Using .row or .col-* classes without a container
→ This can cause layout misalignment or unwanted spacing.

✅ Always use this structure:

<div class="container">
<div class="row">
<div class="col">Content</div>
</div>
</div>

✅ Summary
Topic Description

Class Name .container, .container-fluid, .container-{breakpoint}

Purpose To create responsive page layouts and control width

Used For Wrapping rows, columns, and main content

Important Rule Always use a container before rows/columns

Key Advantage Centers or stretches content automatically

💡 In Simple Words:

The container class is the main layout wrapper in Bootstrap that defines how wide your content area
should be — either fixed, responsive, or full-width — depending on which container type you use.

Example: Basic Container in Bootstrap

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Container Example</title>
<!-- Linking Bootstrap -->
<link rel="stylesheet"
href="[Link]
</head>
<body>
<!-- Container starts -->
<div class="container bg-light border mt-3 p-3">
<h2>Welcome to My Website</h2>
<p>This is a simple example of using the <b>container</b> class in Bootstrap.</p>
<p>The content inside this box will always stay centered on the page and adjust to
different screen sizes.</p>
</div>
<!-- Container ends -->

</body>
</html>

Output:

🧠 Explanation:

Line Meaning
<link ...> Connects Bootstrap CSS to your page
<div class="container"> Creates a main centered box
bg-light Adds light background color
Border Adds a border around the container
mt-3 Adds top margin (spacing)
p-3 Adds padding (inner spacing)

💡 What Happens When You Run It:

 The text appears in a light-colored box, centered on the page.

 On big screens, it has side spacing.
 On small screens (mobile), it automatically adjusts its width — this is responsiveness!
Bootstrap Example with Row and column:
<!DOCTYPE html>

<html>

<head>

<title>Bootstrap Container-Fluid with Row and Columns</title>

<!-- Linking Bootstrap -->

<link rel="stylesheet" href="[Link]

</head>

<body>

<!-- Full-width container -->

<div class="container-fluid bg-info text-white p-3">

<h2 class="text-center">Bootstrap Example: Container-Fluid, Row, and Columns</h2>

<p class="text-center">This container covers the full width of the screen.</p>

<!-- Row inside container-fluid -->

<div class="row">

<div class="col-sm-4 bg-primary p-3">Column 1</div>

<div class="col-sm-4 bg-success p-3">Column 2</div>

<div class="col-sm-4 bg-danger p-3">Column 3</div>

</div>

</div>

</body>
</html>

Output:

Bootstrap Grids
Bootstrap Grid System
Bootstrap's grid system allows up to 12 columns across the page.

If you do not want to use all 12 columns individually, you can group the columns together
to create wider columns:
Bootstrap's grid system is responsive, and the columns will re-arrange automatically
depending on the screen size.

Grid Classes
The Bootstrap grid system has four classes:

 xs (for phones - screens less than 768px wide)

 sm (for tablets - screens equal to or greater than 768px wide)
 md (for small laptops - screens equal to or greater than 992px wide)
 lg (for laptops and desktops - screens equal to or greater than 1200px wide)

The classes above can be combined to create more dynamic and flexible layouts.

Basic Structure of a Bootstrap Grid

The following is a basic structure of a Bootstrap grid:

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

First; create a row (<div class="row">). Then, add the desired number of columns (tags
with appropriate .col-*-* classes). Note that numbers in .col-*-* should always add up
to 12 for each row.

Below we have collected some examples of basic Bootstrap grid layouts.

Three Equal Columns

The following example shows how to get a three equal-width columns starting at tablets
and scaling to large desktops. On mobile phones or screens that are less than 768px
wide, the columns will automatically stack:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Bootstrap 5 Example</title>

<!-- Bootstrap 5 CSS -->

<link href="[Link]
rel="stylesheet">

</head>

<body>

<div class="container-fluid">

<h1 class="mt-4">Hello World!</h1>

<p>Resize the browser window to see the effect.</p>

<p>The columns will automatically stack on top of each other when the screen is less
than 576px wide.</p>

<div class="row">

<div class="col-sm-4 p-3 text-center bg-light border">.col-sm-4</div>

<div class="col-sm-4 p-3 text-center bg-white border">.col-sm-4</div>

<div class="col-sm-4 p-3 text-center bg-light border">.col-sm-4</div>

</div>

</div>

<!-- Bootstrap 5 JS (no jQuery needed) -->

 <script
src="[Link]
script>

</body>

</html>

Explanation:
Basic Structure

 <!DOCTYPE html> → Tells the browser this is an HTML5 document.

 <html lang="en"> → Starts the page and sets the language to English.
 <head> → Contains meta info, title, and links to styles/scripts.
 <body> → Contains all the visible page content.

🧱 Head Section

 <meta charset="utf-8"> → Ensures correct text encoding.

 <meta name="viewport" ...> → Makes the page responsive on mobile.
 <link href="...[Link]"> → Loads Bootstrap 5 CSS (for layout & styling).
 <title> → Sets the browser tab title.

🧩 Body Section

 <div class="container-fluid"> → Full-width Bootstrap container.

 <h1> and <p> → Heading and paragraphs for content.
 <div class="row"> → Creates a horizontal group for columns.
 <div class="col-sm-4"> → Divides the row into 3 equal parts (each 4 of 12 units).
o p-3 → Adds padding.
o text-center → Centers text.
o bg-light / bg-white → Background colors.
o border → Adds borders around columns.

⚙️Script Section

 <script src="...[Link]"> → Loads Bootstrap’s JavaScript (for

dropdowns, modals, etc.).
o No jQuery needed in Bootstrap 5.

Two Unequal Columns

The following example shows how to get two various-width columns starting at tablets and
scaling to large desktops:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Bootstrap 5 Example</title>

<!-- Bootstrap 5 CSS -->

<link href="[Link]
rel="stylesheet">

</head>

<body>

<div class="container-fluid">

<h1 class="mt-4">Hello World!</h1>

<p>Resize the browser window to see the effect.</p>

<p>The columns will automatically stack on top of each other when the screen is less than 576px
wide.</p>

<div class="row">

<div class="col-sm-4 p-3 text-center bg-light border">.col-sm-4</div>

<div class="col-sm-8 p-3 text-center bg-light border">.col-sm-8</div>

</div>

</div>

<!-- Bootstrap 5 JS (no jQuery needed) -->

<script src="[Link]
script>

</body>

</html>
Basic Setup

 <!DOCTYPE html> → Declares HTML5 document.

 <meta charset="utf-8"> → Ensures correct text encoding.
 <meta name="viewport" ...> → Makes the page responsive on mobile devices.
 <link href="...[Link]"> → Loads Bootstrap 5 CSS for styling and grid layout.

🔹 Page Content

 <div class="container-fluid"> → Full-width container for content.

 <h1> and <p> → Heading and text messages.
 <div class="row"> → Creates a horizontal layout for columns.
 <div class="col-sm-4"> and <div class="col-sm-8"> →
o Divide the row into 4 + 8 = 12 grid columns (Bootstrap’s grid system).
o On small screens (below 576px), they stack vertically.
 p-3, text-center, bg-light, border → Bootstrap utility classes for padding, text alignment,
background, and border.

🔹 Scripts

 <script src="...[Link]"> → Loads Bootstrap 5 JavaScript features.

Bootstrap Tables:
A basic Bootstrap table has a light padding and only horizontal dividers.

The .table class adds basic styling to a table:

Striped Rows
The .table-striped class adds zebra-stripes to a table:

Bordered Table
The .table-bordered class adds borders on all sides of the table and cells:

Hover Rows
The .table-hover class adds a hover effect (grey background color) on table rows:
Condensed Table
The .table-condensed class makes a table more compact by cutting cell padding in
half:

Contextual Classes
Contextual classes can be used to color table rows (<tr>) or table cells (<td>):

The contextual classes that can be used are:

 Class Description

.active Applies the hover color to the table row or table cell

.success Indicates a successful or positive action

.info Indicates a neutral informative change or action

.warning Indicates a warning that might need attention

.danger Indicates a dangerous or potentially negative

action

Responsive Tables
The .table-responsive class creates a responsive table. The table will then scroll
horizontally on small devices (under 768px). When viewing on anything larger than
768px wide, there is no difference:

Example or Code of Table by using Bootstap:

<!DOCTYPE html>

<html lang="en">

<head>
 <meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Bootstrap 5 Example</title>

<!-- Bootstrap 5 CSS -->

<link href="[Link]
rel="stylesheet">

</head>

<body>

<div class="container mt-4">

<h2>Bordered Table</h2>

<p>The <code>.table-bordered</code> class adds borders to a table:</p>

<table class="table table-bordered">

<thead class="table-light">

<tr>

<th>Firstname</th>

<th>Lastname</th>

<th>Email</th>

</tr>

</thead>

<tbody>

<tr>

<td>John</td>

<td>Doe</td>

<td>john@[Link]</td>

</tr>

<tr>

<td>Mary</td>

<td>Moe</td>
 <td>mary@[Link]</td>

</tr>

<tr>

<td>July</td>

<td>Dooley</td>

<td>july@[Link]</td>

</tr>

</tbody>

</table>

</div>

<!-- Bootstrap 5 JS (no jQuery needed) -->

<script src="[Link]
script>

</body>

</html>

Explanation:

<table class="table table-bordered">

 table applies Bootstrap’s default table styling (padding, horizontal dividers, responsive
typography).
 table-bordered adds borders around all table cells.

<thead class="table-light">

 thead groups header rows.

 table-light gives a light (gray) background to the header for visual distinction.

<tbody> … rows with <td> cells

 tbody contains the table body rows.

 Each <tr> is a data row and each <td> is a cell containing the actual data (John, Doe,
john@[Link], etc.).
Combined Example:
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Bootstrap 5 Combined Table Example</title>

<!-- Bootstrap 5 CSS -->

<link href="[Link]
rel="stylesheet">

</head>

<body>

<div class="container mt-4">

<h2 class="mb-3 text-center">Bootstrap 5 Table Example (All Classes)</h2>

<p class="text-muted text-center">This example demonstrates striped rows, hover effect,

condensed spacing, contextual colors, and responsiveness.</p> <!-- "text-muted" = “less highlighted
text”.-->

<!-- Responsive wrapper -->

<div class="table-responsive">

<table class="table table-bordered table-striped table-hover table-sm align-middle">

<thead class="table-dark text-center">

<tr>

<th>#</th>

<th>Firstname</th>

<th>Lastname</th>

<th>Email</th>

<th>Status</th>
 </tr>

</thead>

<tbody>

<tr class="table-primary">

<td>1</td>

<td>John</td>

<td>Doe</td>

<td>john@[Link]</td>

<td>Active</td>

</tr>

<tr class="table-success">

<td>2</td>

<td>Mary</td>

<td>Moe</td>

<td>mary@[Link]</td>

<td>Approved</td>

</tr>

<tr class="table-warning">

<td>3</td>

<td>July</td>

<td>Dooley</td>

<td>july@[Link]</td>

<td>Pending</td>

</tr>

<tr class="table-danger">

<td>4</td>

<td>Mark</td>

<td>Twain</td>

<td>mark@[Link]</td>
 <td>Rejected</td>

</tr>

<tr class="table-info">

<td>5</td>

<td>Alex</td>

<td>King</td>

<td>alex@[Link]</td>

<td>In Progress</td>

</tr>

</tbody>

</table>

</div>

</div>

<!-- Bootstrap 5 JS -->

<script src="[Link]
script>

</body>

</html>

BODY SECTION
. <div class="container mt-4">
  .container → Centers page content and adds side padding.
 .mt-4 → Adds top margin spacing.

. <h2 class="mb-3 text-center">...</h2>

 .mb-3 → Margin-bottom spacing below the heading.

 .text-center → Centers the text horizontally.

. <p class="text-muted text-center">...</p>

 .text-muted → Makes text light gray (less emphasis).

 .text-center → Centers the paragraph text.

<div class="table-responsive">

Wraps the table to make it scroll horizontally on smaller screens — essential for mobile-friendly layouts.

<table class="table table-bordered table-striped table-hover table-sm align-middle">

All major table classes used here:

 .table → Applies Bootstrap’s default table styling.

 .table-bordered → Adds borders around all cells.
 .table-striped → Alternating row colors for readability.
 .table-hover → Highlights row on hover.
 .table-sm → Compact (reduced padding) version.
 .align-middle → Vertically centers text in all cells.

<thead class="table-dark text-center">

 .table-dark → Gives header a dark background with white text.

 .text-center → Centers all header text.

TABLE BODY
Each <tr> has a contextual class to indicate different states or categories:

Class Color Meaning

.table-primary Light blue Default or highlighted row

.table-success Light green Successful / approved

.table-warning Light yellow Warning / pending

.table-danger Light red Error / rejected

.table-info Light cyan Informational / in progress

💡 These contextual classes make tables visually meaningful without custom CSS.
Bootstrap Images:
Bootstrap helps you easily style and make images responsive, rounded, and visually appealing without writing
custom CSS.

Responsive Images
1 Class: .img-fluid
This class makes the image scale automatically to fit the width of its parent container.
It ensures that your image is responsive on all screen sizes.

✅ Example:

<img src="[Link] class="img-fluid" alt="Responsive image">

Meaning:

 and height: auto;

width: 100%;
 The image resizes automatically when the screen size changes.

2. Image Shapes

Bootstrap gives predefined shape classes to style your images easily.

🔸 .rounded

Gives the image slightly rounded corners.

<img src="[Link] class="rounded" alt="Rounded image">

🔸 .rounded-circle

Makes the image perfectly circular (used for profile photos).

<img src="[Link] class="rounded-circle" alt="Circular image">

🔸 .img-thumbnail

Adds a border and padding around the image to look like a photo thumbnail.
<img src="[Link] class="img-thumbnail" alt="Thumbnail image">

3. Image Alignment

You can align images using text alignment classes.

✅ Centered Image:
<div class="text-center">
<img src="[Link] class="rounded" alt="Centered image">
</div>

text-center centers the image inside the <div>.

✅ Left / Right Align:

<img src="[Link] class="float-start" alt="Left aligned image">
<img src="[Link] class="float-end" alt="Right aligned image">

 .float-start → Aligns to the left

 .float-end → Aligns to the right

Combine Example :
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Bootstrap 5 Image Example</title>

<!-- Bootstrap 5 CSS -->

<link href="[Link] rel="stylesheet">

</head>
<body>

<div class="container mt-4">

<h2 class="text-center mb-4">Bootstrap 5 Image Examples</h2>

<!-- Responsive Image -->

<h5>1. Responsive Image (.img-fluid)</h5>

<img src="[Link] class="img-fluid" alt="Responsive image">

<hr>

<!-- Rounded Corners -->

<h5>2. Rounded Image (.rounded)</h5>

<img src="[Link] class="rounded" alt="Rounded image">

<hr>

<!-- Circle Image -->

<h5>3. Circle Image (.rounded-circle)</h5>

<img src="[Link] class="rounded-circle" alt="Circular image">

<hr>

<!-- Thumbnail Image -->

<h5>4. Thumbnail Image (.img-thumbnail)</h5>

<img src="[Link] class="img-thumbnail" alt="Thumbnail image">

<hr>

<!-- Centered Image -->

<h5>5. Centered Image (.text-center)</h5>

<div class="text-center">

<img src="[Link] class="rounded" alt="Centered image">

</div>
 </div>

<!-- Bootstrap 5 JS -->

<script src="[Link]

</body>

</html>

Bootstrap Buttons
Bootstrap buttons are pre-styled HTML <button> or <a> elements that come with ready-made colors,
sizes, and styles.

You just add specific classes like .btn, .btn-primary, .btn-success, etc., and Bootstrap handles all the design for
you.

To achieve the button styles above, Bootstrap has the following classes:

 .btn
 .btn-default
 .btn-primary
 .btn-success
 .btn-info
 .btn-warning
 .btn-danger
 .btn-link

Basic Syntax
<button type="button" class="btn btn-primary">Click Me</button>

 btn → base class (required for all buttons).

 btn-primary → color/style type (changes color based on theme).
Button Types (Colors)
Bootstrap provides contextual classes — each with a meaning or purpose.

Class Color Common Use

btn-primary Blue Main actions (e.g., “Submit”)

btn-secondary Gray Secondary/neutral actions

btn-success Green Positive actions (“Save”, “Confirm”)

btn-danger Red Dangerous actions (“Delete”)

btn-warning Yellow Warnings (“Retry”, “Caution”)

btn-info Light Blue Informational

btn-light Light Gray Background-style button

btn-dark Black Dark button

btn-link Looks like a text link

Example:
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Bootstrap 5 Button Styles</title>

<!-- Bootstrap 5 CSS -->

<link href="[Link]
rel="stylesheet">

</head>

<body>

<div class="container mt-5">

<h2>Button Styles (Bootstrap 5)</h2>

<button type="button" class="btn btn-secondary">Secondary</button>

<button type="button" class="btn btn-primary">Primary</button>

 <button type="button" class="btn btn-success">Success</button>

<button type="button" class="btn btn-info">Info</button>

<button type="button" class="btn btn-warning">Warning</button>

<button type="button" class="btn btn-danger">Danger</button>

<button type="button" class="btn btn-light">Light</button>

<button type="button" class="btn btn-dark">Dark</button>

<button type="button" class="btn btn-link">Link</button>

</div>

<!-- Bootstrap 5 JS Bundle (includes Popper) -->

<script src="[Link]

</body>

</html>

Output:

Another Example : (using a,button and input type

)
<div class="container">

<h2>Button Tags</h2>

<a href="#" class="btn btn-info" role="button">Link Button</a>

<button type="button" class="btn btn-info">Button</button>

<input type="button" class="btn btn-info" value="Input Button">

<input type="submit" class="btn btn-info" value="Submit Button">

</div>