Scribd
Upload
3 views

Program 9

The document outlines a web page developed using Bootstrap 5.0 to showcase various components including badges, progress bars, spinners, and pagination. It includes HTML code demonstrating the implementation of these elements with appropriate Bootstrap classes. Additionally, it provides explanations of the head and body sections of the HTML document, detailing the purpose of each component.

Uploaded by

yogeshneelappa.atme
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
3 views

Program 9

The document outlines a web page developed using Bootstrap 5.0 to showcase various components including badges, progress bars, spinners, and pagination. It includes HTML code demonstrating the implementation of these elements with appropriate Bootstrap classes. Additionally, it provides explanations of the head and body sections of the HTML document, detailing the purpose of each component.

Uploaded by

yogeshneelappa.atme
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 6

Program 9: Develop a Web page(s) with suitable HTML elements to demonstrate Bootstrap 5.

0 framework
classes for Badges, Progress bar, spinners and Pagination.
Programs:

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

<!-- Container -->


<div class="container mt-5">
<!-- Badges -->
<section>
<h2>Badges</h2>
<p>Here are some examples of Bootstrap badges:</p>
<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>
</section>

<!-- Progress Bars -->


<section class="mt-5">
<h2>Progress Bars</h2>
<p>Here are some examples of Bootstrap progress bars:</p>
<div class="progress mb-3">
<div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-
valuemin="0" aria-valuemax="100">25%</div>
</div>
<div class="progress mb-3">
<div class="progress-bar bg-success" role="progressbar" style="width: 50%;" aria-
valuenow="50" aria-valuemin="0" aria-valuemax="100">50%</div>
</div>
<div class="progress mb-3">
<div class="progress-bar bg-info" role="progressbar" style="width: 75%;" aria-valuenow="75"
aria-valuemin="0" aria-valuemax="100">75%</div>
</div>
<div class="progress">
<div class="progress-bar bg-danger" role="progressbar" style="width: 100%;" aria-
valuenow="100" aria-valuemin="0" aria-valuemax="100">100%</div>
</div>
</section>

<!-- Spinners -->


<section class="mt-5">
<h2>Spinners</h2>
<p>Here are some examples of Bootstrap spinners:</p>
<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>
<div class="spinner-border text-info" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-light" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-dark" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</section>

<!-- Pagination -->


<section class="mt-5">
<h2>Pagination</h2>
<p>Here are some examples of Bootstrap pagination:</p>
<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="http://google.com">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>

<nav aria-label="Page navigation example">


<ul class="pagination justify-content-center">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1" aria-disabled="true">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>

<nav aria-label="Page navigation example">


<ul class="pagination justify-content-end">
<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>
</section>
</div>

</body>
</html>
Explanation:

Head Section

1. Meta Tags and Title:


o <meta charset="UTF-8">: Sets the character encoding to UTF-8.
o <meta name="viewport" content="width=device-width, initial-
scale=1.0">: Ensures proper scaling on mobile devices.
o <title>Bootstrap 5 Example: Badges, Progress Bars, Spinners, and
Pagination</title>: Sets the title of the webpage.
2. Bootstrap CSS and JS:
o <link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootst
rap.min.css" rel="stylesheet">: Includes Bootstrap 5 CSS.
o <script
src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/po
pper.min.js"></script>: Includes Popper.js for Bootstrap components.
o <script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstra
p.min.js"></script>: Includes Bootstrap 5 JavaScript.

Body Section

Badges

 Badges: Used to display additional information.


o <span class="badge bg-secondary">4</span>: A badge within a button
showing the number 4.
o <span class="badge bg-success">New</span>: A badge within a heading
indicating "New".
o <a href="#" class="badge bg-info">Info Link</a>: A badge styled link.

Progress Bars

 Progress Bars: Display progress of a task.


o <div class="progress-bar" role="progressbar" style="width: 25%;"
aria-valuenow="25" aria-valuemin="0"
aria-valuemax="100">25%</div>: A progress bar filled to 25%.
o Different colors (bg-success, bg-info, bg-warning) indicate various states of
progress.

Spinners

 Spinners: Indicate loading or processing states.


o <div class="spinner-border text-primary" role="status">: Creates a
primary-colored spinner.
o Different colors (text-primary, text-secondary, text-success, etc.) indicate
various states.

Pagination
Pagination: Allows navigation through multiple pages of content.

 <ul class="pagination">: Creates a pagination list.


 <li class="page-item"><a class="page-link" href="#">1</a></li>: Each page
link is an item within the pagination list.

You might also like