Scribd
Upload
55 views28 pages

Bootstrap Lab Manual

The document provides multiple examples of web pages demonstrating the Bootstrap 5.0 framework, covering various classes for headings, text, lists, colors, buttons, borders, margins, paddings, containers, and the grid system. Each section includes HTML code snippets that illustrate the use of Bootstrap components and styling. The examples are structured to showcase the flexibility and functionality of Bootstrap in web design.

Uploaded by

BENAZIR AE
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
55 views28 pages

Bootstrap Lab Manual

The document provides multiple examples of web pages demonstrating the Bootstrap 5.0 framework, covering various classes for headings, text, lists, colors, buttons, borders, margins, paddings, containers, and the grid system. Each section includes HTML code snippets that illustrate the use of Bootstrap components and styling. The examples are structured to showcase the flexibility and functionality of Bootstrap in web design.

Uploaded by

BENAZIR AE
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 28

lOMoARcPSD|39289093

BOOTSRAP
1. Develop a web page with suitable HTML elements to demonstrate
Bootstrap 5.0 framework classes for headings.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 5.0 Headings</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]
alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
/* Optional custom styles */
body {
padding: 20px;
}
</style>
</head>
<body>
<div class="container">
<h1 class="display-1">Display 1 Heading</h1>
<h1 class="display-2">Display 2 Heading</h1>
<h1 class="display-3">Display 3 Heading</h1>
<h1 class="display-4">Display 4 Heading</h1>
<h1 class="display-5">Display 5 Heading</h1>
<h1 class="display-6">Display 6 Heading</h1>

<h2 class="h1">h1. Bootstrap Heading</h2>


<h2 class="h2">h2. Bootstrap Heading</h2>
<h3 class="h3">h3. Bootstrap Heading</h3>
<h4 class="h4">h4. Bootstrap Heading</h4>
<h5 class="h5">h5. Bootstrap Heading</h5>
<h6 class="h6">h6. Bootstrap Heading</h6>
</div>

<!-- Bootstrap Bundle with Popper -->


<script src="https://cdn.jsdelivr.net/npm/[email protected]
alpha1/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Output:

2. Develop a Web page with suitable HTML elements to demonstrate


Bootstrap 5.0 framework classes for text and fonts.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 5.0 Text and Fonts</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]
alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
/* Optional custom styles */
body {
padding: 20px;
}
</style>
</head>
<body>
<div class="container">
<h1>Bootstrap 5.0 Text and Fonts</h1>

<p class="lead">This is a lead paragraph. It stands out from regular


paragraphs.</p>

<p>This is a paragraph with <mark>highlighted text</mark>.</p>

<p>This is a paragraph with <del>deleted text</del>.</p>

<p>This is a paragraph with <u>underlined text</u>.</p>

<p>This is a paragraph with <strong>strong text</strong>.</p>


<p>This is a paragraph with <em>emphasized text</em>.</p>

<p>This is a paragraph with <small>smaller text</small>.</p>

<p>This is a paragraph with <abbr title="abbreviation">abbreviated


text</abbr>.</p>

<p>This is a paragraph with <cite>cited text</cite>.</p>

<p>This is a paragraph with <code>code text</code>.</p>

<p>This is a paragraph with <kbd>keyboard input</kbd>.</p>

<p>This is a paragraph with <samp>sample output</samp>.</p>

<p>This is a paragraph with <sub>subscript text</sub>.</p>

<p>This is a paragraph with <sup>superscript text</sup>.</p>

<p class="text-muted">This is a muted paragraph.</p>

<p class="text-primary">This is a primary paragraph.</p>

<p class="text-success">This is a success paragraph.</p>

<p class="text-info">This is an info paragraph.</p>

<p class="text-warning">This is a warning paragraph.</p>

<p class="text-danger">This is a danger paragraph.</p>

<p class="text-secondary">This is a secondary paragraph.</p>

<p class="text-dark">This is a dark paragraph.</p>

<p class="text-body">This is a body text paragraph.</p>

<p class="text-light bg-dark">This is a light text on a dark


background.</p>

<p class="text-white bg-primary">This is a white text on a primary


background.</p>
</div>

<!-- Bootstrap Bundle with Popper -->


<script src="https://cdn.jsdelivr.net/npm/[email protected]
alpha1/dist/js/bootstrap.bundle.min.js"></script>
</body>

</html>
Output:

3. Develop web pages with suitable HTML elements to demonstrate


Bootstrap 5.0 framework classes for Lists, colors and bootstrap
buttons.

1. Lists

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 5.0 Lists</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]
alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
/* Optional custom styles */
body {
padding: 20px;
}
</style>
</head>
<body>
<div class="container">
<h1>Bootstrap 5.0 Lists</h1>

<ul class="list-group">
<li class="list-group-item">Item 1</li>
<li class="list-group-item">Item 2</li>
<li class="list-group-item">Item 3</li>
</ul>

<ol class="list-group list-group-numbered">


<li class="list-group-item">Item 1</li>
<li class="list-group-item">Item 2</li>
<li class="list-group-item">Item 3</li>
</ol>
</div>

<!-- Bootstrap Bundle with Popper -->


<script src="https://cdn.jsdelivr.net/npm/[email protected]
alpha1/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Sample Output:

2. Colors

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 5.0 Colors</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]
alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
/* Optional custom styles */
body {
padding: 20px;
}
</style>
</head>
<body>
<div class="container">
<h1>Bootstrap 5.0 Colors</h1>

<div class="alert alert-primary" role="alert">


Primary color
</div>
<div class="alert alert-secondary" role="alert">
Secondary color
</div>
<div class="alert alert-success" role="alert">
Success color
</div>
<div class="alert alert-danger" role="alert">
Danger color
</div>
<div class="alert alert-warning" role="alert">
Warning color
</div>
<div class="alert alert-info" role="alert">
Info color
</div>
<div class="alert alert-light"
role="alert"> Light color
</div>
<div class="alert alert-dark" role="alert">
Dark color
</div>
</div>

<!-- Bootstrap Bundle with Popper -->


<script src="https://cdn.jsdelivr.net/npm/[email protected]
alpha1/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Output:

3. Buttons

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 5.0 Buttons</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]
alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
/* Optional custom styles */
body {
padding: 20px;
}
</style>
</head>
<body>
<div class="container">
<h1>Bootstrap 5.0 Buttons</h1>

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


<button type="button" class="btn btn-secondary">Secondary
Button</button>
<button type="button" class="btn btn-success">Success Button</button>
<button type="button" class="btn btn-danger">Danger Button</button>
<button type="button" class="btn btn-warning">Warning
Button</button>
<button type="button" class="btn btn-info">Info Button</button>
<button type="button" class="btn btn-light">Light Button</button>
<button type="button" class="btn btn-dark">Dark Button</button>
</div>

<!-- Bootstrap Bundle with Popper -->


<script src="https://cdn.jsdelivr.net/npm/[email protected]
alpha1/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Sample Output:

4. Develop a Web page with suitable HTML elements to demonstrate


Bootstrap 5.0 Framework classes for Borders, Margins and
Paddings.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 5.0 Borders, Margins, and Paddings</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]
alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
/* Optional custom styles */
body {
padding: 20px;
}
.border-example {
background-color: #f0f0f0;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="container">
<h1>Bootstrap 5.0 Borders, Margins, and Paddings</h1>
<h2>Borders</h2>
<div class="border border-primary border-5 border-top">Border Top</div>
<div class="border border-secondary border-4 border-end">Border
End</div>
<div class="border border-success border-3 border-bottom">Border
Bottom</div>
<div class="border border-danger border-2 border-start">Border
Start</div>
<div class="border border-warning border-1">Border</div>

<h2>Margins</h2>
<div class="border-example m-1">Margin 1</div>
<div class="border-example m-2">Margin 2</div>
<div class="border-example m-3">Margin 3</div>
<div class="border-example m-4">Margin 4</div>
<div class="border-example m-5">Margin 5</div>

<h2>Paddings</h2>
<div class="border-example p-1">Padding 1</div>
<div class="border-example p-2">Padding 2</div>
<div class="border-example p-3">Padding 3</div>
<div class="border-example p-4">Padding 4</div>
<div class="border-example p-5">Padding 5</div>
</div>

<!-- Bootstrap Bundle with Popper -->


<script src="https://cdn.jsdelivr.net/npm/[email protected]
alpha1/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Output:
5. Develop a web pages with suitable HTML elements to
demonstrate Bootstrap 5.0 framework classes for Containers.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 5.0 Containers</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]
alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
/* Optional custom styles */
body {
padding: 20px;
}
.container-example {
padding: 20px;
margin-bottom: 20px;
border-radius: 10px;
}
.standard-container {
background-color: #f0f0f0;
}
.fluid-container {
background-color: #cce5ff;
}
.small-container {
background-color:
#d4edda;
}
.medium-container {
background-color:
#fff3cd;
}
.large-container {
background-color:
#f8d7da;
}
.extra-large-container {
background-color: #d6d8d9;
}
</style>
</head>
<body>
<div class="container">
<h1>Bootstrap 5.0 Containers</h1>

<h2>Standard Container</h2>
<!-- Standard Container -->
<div class="container-example standard-container">
This is a standard container. It has a fixed width and is centered
horizontally.
</div>

<h2>Fluid Container</h2>
<!-- Fluid Container -->
<div class="container-fluid container-example fluid-container">
This is a fluid container. It stretches to the edges of the viewport.
</div>

<h2>Responsive Breakpoint Containers</h2>


<!-- Small Container -->
<h3>Small Container</h3>
<div class="container-sm container-example small-container">
This is a small container. It is ideal for mobile screens.
</div>

<!-- Medium Container -->


<h3>Medium Container</h3>
<div class="container-md container-example medium-container">
This is a medium container. It provides a balance between content
space and screen size.
</div>

<!-- Large Container -->


<h3>Large Container</h3>
<div class="container-lg container-example large-container">
This is a large container. It is suitable for desktop screens.
</div>

<!-- Extra Large Container -->


<h3>Extra Large Container</h3>
<div class="container-xl container-example extra-large-container">
This is an extra large container. It is ideal for widescreen displays or
large desktop screens.
</div>
</div>

<!-- Bootstrap Bundle with Popper -->


<script src="https://cdn.jsdelivr.net/npm/[email protected]
alpha1/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Output:

6. Develop web pages with suitable HTML elements to demonstrate


Bootstrap 5.0 framework classes for Grid System.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 5 Demo: Grid System</title>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css
" rel="stylesheet">
</head>
<body>

<div class="container">
<h2>Grid System Example</h2>
<div class="row">
<div class="col-md-4">
<div class="p-3 mb-2 bg-primary text-white">Column 1</div>
</div>
<div class="col-md-4">
<div class="p-3 mb-2 bg-secondary text-white">Column 2</div>
</div>
<div class="col-md-4">
<div class="p-3 mb-2 bg-success text-white">Column 3</div>
</div>
</div>

<h3 class="mt-5">Responsive Layouts</h3>


<div class="row">
<div class="col-sm-6 col-md-4">
<div class="p-3 mb-2 bg-info text-white">Column 1</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="p-3 mb-2 bg-warning text-dark">Column 2</div>
</div>
<div class="col-sm-12 col-md-4">
<div class="p-3 mb-2 bg-danger text-white">Column 3</div>
</div>
</div>

<h3 class="mt-5">Nesting Grids</h3>


<div class="row">
<div class="col-md-6">
<div class="p-3 mb-2 bg-light">Main Column</div>
<div class="row">
<div class="col-md-6">
<div class="p-3 mb-2 bg-secondary text-white">Nested Column
1</div>
</div>
<div class="col-md-6">
<div class="p-3 mb-2 bg-dark text-white">Nested Column 2</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="p-3 mb-2 bg-primary text-white">Sidebar</div>
</div>
</div>
</div>

<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.mi
n.js"></script>
</body>
</html>

Output:
7. Develop a Web pages with suitable HTML elements to
demonstrate Bootstrap 5.0 framework classes for Images, Cards and
Gutters.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 5 Demo: Images, Cards, and Gutters</title>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css
" rel="stylesheet">
</head>
<body>

<div class="container mt-5">


<h2>Images</h2>
<div class="row">
<div class="col-md-6">
<img src="https://picsum.photos/600/400" class="img-fluid"
alt="Responsive image 1">
</div>
<div class="col-md-6">
<img src="https://picsum.photos/600/400" class="img-fluid"
alt="Responsive image 2">
</div>
</div>

<h2 class="mt-5">Cards</h2>
<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col">
<div class="card h-100">
<img src="https://picsum.photos/200/300" class="card-img-top"
alt="Card image 1">
<div class="card-body">
<h5 class="card-title">Card Title 1</h5>
<p class="card-text">This is a sample card with some text content. It
could contain additional information about the product or service being
showcased.</p>
<a href="#" class="btn btn-primary">Learn More</a>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="https://picsum.photos/200/300" class="card-img-top"
alt="Card image 2">
<div class="card-body">
<h5 class="card-title">Card Title 2</h5>
<p class="card-text">This is another sample card with some
text content. You can customize this text to fit your needs.</p>
<a href="#" class="btn btn-primary">Learn More</a>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="https://picsum.photos/200/300" class="card-img-top"
alt="Card image 3">
<div class="card-body">
<h5 class="card-title">Card Title 3</h5>
<p class="card-text">This is a third sample card with some text
content. Feel free to modify the content to suit your requirements.</p>
<a href="#" class="btn btn-primary">Learn More</a>
</div>
</div>
</div>
</div>

<h2 class="mt-5">Gutters</h2>
<div class="row g-4">
<div class="col-md">
<div class="p-3 bg-primary text-white">Column 1</div>
</div>
<div class="col-md">
<div class="p-3 bg-secondary text-white">Column 2</div>
</div>
<div class="col-md">
<div class="p-3 bg-success text-white">Column 3</div>
</div>
</div>
</div>

<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.mi
n.js"></script>
</body>
</html>
Output:

8. Develop a Web Page with suitable HTML elements to demonstrate


Bootstrap 5.0 framework classes for Nav and Footers.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 5 Demo: Nav and Footer</title>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css
" rel="stylesheet">
</head>
<body>

<nav class="navbar navbar-expand-lg navbar-light bg-light">


<div class="container">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-
controls="navbarSupportedContent" aria-expanded="false" aria-
label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="navbarSupportedContent">


<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Disabled</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search"
aria-label="Search">
<button class="btn btn-outline-success"
type="submit">Search</button>
</form>
</div>
</div>
</nav>

<div class="container mt-5">


<h2>Main Content</h2>
<p>This is the main content area of the web page.</p>
</div>

<footer class="footer mt-auto py-3 bg-light">


<div class="container">
<span class="text-muted">Place sticky footer content here.</span>
</div>
</footer>

<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.mi
n.js"></script>
</body>
</html>

Output:

9. Develop a Web Pages with suitable HTML elements to


demonstrate Bootstrap 5.0 framework classes for Badges, Progress
Bar, spinners and Pagination.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 5 Demo: Badges, Progress Bar, Spinners, and
Pagination</title>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css
" rel="stylesheet">
</head>
<body>

<div class="container mt-5">


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

<h2 class="mt-5">Progress Bar</h2>


<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 25%;" aria-
valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
</div>

<h2 class="mt-5">Spinners</h2>
<div class="spinner-border text-primary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-secondary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-success" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-danger" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-warning" role="status">
<span class="visually-hidden">Loading...</span>
</div>

<h2 class="mt-5">Pagination</h2>
<nav aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">Previous</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>
</nav>
</div>

<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.mi
n.js"></script>
</body>
</html>

Output:

10. Develop a Web pages with suitable HTML elements to


demonstrate Bootstrap 5.0 framework classes for Modals, Alerts and
Popover.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 5 Demo: Modals, Alerts, and Popovers</title>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css
" rel="stylesheet">
</head>
<body>

<div class="container mt-5">


<h2>Modals</h2>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal"
data-bs-target="#exampleModal">
Launch Modal
</button>

<!-- Modal -->


<div class="modal fade" id="exampleModal" tabindex="-1" aria-
labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-
label="Close"></button>
</div>
<div class="modal-body">
This is a Bootstrap modal. Click the button below to close.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-
dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

<h2 class="mt-5">Alerts</h2>
<div class="alert alert-primary" role="alert">
This is a primary alert—check it out!
</div>
<div class="alert alert-secondary" role="alert">
This is a secondary alert—check it out!
</div>
<div class="alert alert-success" role="alert">
This is a success alert—check it out!
</div>
<div class="alert alert-danger" role="alert">
This is a danger alert—check it out!
</div>

<h2 class="mt-5">Popovers</h2>
<button type="button" class="btn btn-secondary" data-bs-toggle="popover"
title="Popover title" data-bs-content="And here's some amazing content. It's
very engaging. Right?">Click to toggle popover</button>
</div>

<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.mi
n.js"></script>
<script>

Dept. Of CSD, PESITM, Shivamogga 24


// Initialize Bootstrap popover
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-
toggle="popover"]'));
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
});
</script>
</body>
</html>

Output:

11. Develop your personal online CV or Professional CV


using suitable Bootstrap classes.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My CV</title>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css
" rel="stylesheet">
<style>
body {
font-family: Arial, sans-serif;
}
.header {
background-color: #007bff;
color: #fff;
padding: 40px;
text-align: center;
}
.section {
padding: 30px 0;
}
.section-heading {
font-size: 24px;
margin-bottom: 20px;
}
.experience-item {
margin-bottom: 20px;
}
.experience-item h3 {
margin-bottom: 10px;
}
.education-item {
margin-bottom: 20px;
}
.education-item h3 {
margin-bottom: 10px;
}
</style>
</head>
<body>

<div class="header">
<h1>John Doe</h1>
<p>Web Developer</p>
</div>

<div class="container">
<div class="section">
<h2 class="section-heading">About Me</h2>
<p>I am a passionate web developer with experience in building
responsive and user-friendly websites using HTML, CSS, and JavaScript. I
have a keen eye for design and enjoy solving complex problems to deliver
innovative solutions.</p>
</div>

<div class="section">
<h2 class="section-heading">Experience</h2>
<div class="experience-item">
<h3>Senior Web Developer</h3>
<p>XYZ Company - 2018-present</p>
<ul>
<li>Developed and maintained multiple web applications using HTML,
CSS, JavaScript, and PHP.</li>
<li>Collaborated with cross-functional teams to design and implement
new features.</li>
<li>Optimized website performance and ensured compatibility across
different browsers and devices.</li>
</ul>
</div>
<div class="experience-item">
<h3>Junior Web Developer</h3>
<p>ABC Agency - 2016-2018</p>
<ul>
<li>Assisted in the development of various web projects from concept to
deployment.</li>
<li>Worked closely with designers to translate mockups into functional
websites.</li>
<li>Contributed to team meetings and brainstorming sessions to
improve project outcomes.</li>
</ul>
</div>
</div>

<div class="section">
<h2 class="section-heading">Education</h2>
<div class="education-item">
<h3>Bachelor of Science in Computer Science</h3>
<p>University of Example - 2012-2016</p>
</div>
</div>
</div>

<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.mi
n.js"></script>
</body>
</html>
Output:
12. Develop a blog post your favourite topic or create
memoirs/additional stories using suitable Bootstrap classes.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Travel Adventures</title>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css
" rel="stylesheet">
<style>
body {
font-family: Arial, sans-serif;
}
.header {
background-color: #007bff;
color: #fff;
padding: 40px;
text-align: center;
}
.blog-post {
margin-bottom: 40px;
}
.blog-post .title {
font-size: 24px;
font-weight: bold;
margin-bottom: 10px;
}
.blog-post .meta {
color: #6c757d;
margin-bottom: 20px;
}
.blog-post .content {
line-height: 1.6;
}
</style>
</head>
<body>

<div class="header">
<h1>My Travel Adventures</h1>
</div>

<div class="container">
<div class="blog-post">
<h2 class="title">Exploring the Streets of Paris</h2>
<div class="meta">Posted on January 15, 2023</div>
<div class="content">
<p>Paris, the city of love and lights, is one of my favorite destinations in
the world. Walking along the cobblestone streets, admiring the majestic
architecture, and indulging in delicious pastries are just a few of the
highlights of my visit.</p>
<p>One of the most memorable experiences was visiting the iconic
Eiffel Tower. Standing beneath this towering structure, I was in awe of its
beauty and grandeur. Climbing to the top provided breathtaking views of
the cityscape below.</p>
<p>Exploring the charming neighborhoods of Montmartre and Le
Marais was another highlight of my trip. From quaint cafes to bustling
markets, each street corner revealed a new treasure waiting to be
discovered.</p>
<p>No trip to Paris would be complete without sampling the local
cuisine. From croissants and macarons to escargot and coq au vin, I savored
every bite of French delicacies.</p>
<p>As I bid adieu to this enchanting city, I knew that I would carry
memories of my Parisian adventure with me forever.</p>
</div>
</div>

<div class="blog-post">
<h2 class="title">Sunset Serenity in Santorini</h2>
<div class="meta">Posted on March 22, 2023</div>
<div class="content">
<p>Santorini, with its stunning sunsets and picturesque landscapes, is a
dream destination for travelers seeking tranquility and beauty. My visit to
this Greek island was nothing short of magical.</p>
<p>Watching the sun dip below the horizon from the cliffside village of
Oia was a surreal experience. The sky painted in hues of pink and orange
created a mesmerizing backdrop for photographs.</p>
<p>During the day, I explored the narrow streets of Fira and Kamari,
marveling at the whitewashed buildings and blue-domed churches. I also
took a boat tour to the volcanic island of Nea Kameni, where I hiked to the
crater for panoramic views of the Aegean Sea.</p>
<p>The local cuisine, with its emphasis on fresh seafood and
Mediterranean flavors, was a delight to my taste buds. Dining al fresco
overlooking the caldera added to the overall ambiance.</p>
<p>As I watched the stars twinkle in the night sky, I felt a sense of
peace and contentment wash over me. Santorini had captured my heart, and
I knew that I would return someday to experience its beauty once again.</p>
</div>
</div>
</div>

<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.mi
n.js"></script>
</body>
</html>
Output:

You might also like