Scribd
Upload
0 views

Program 2

This document outlines a web page created to demonstrate Bootstrap 5.0 framework classes for text and fonts. It includes sections for text colors, font weights, and font styles, utilizing various Bootstrap classes for styling. The page is structured with HTML elements and linked to Bootstrap's CSS and JavaScript for functionality.

Uploaded by

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

Program 2

This document outlines a web page created to demonstrate Bootstrap 5.0 framework classes for text and fonts. It includes sections for text colors, font weights, and font styles, utilizing various Bootstrap classes for styling. The page is structured with HTML elements and linked to Bootstrap's CSS and JavaScript for functionality.

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/ 4

Program 2: Develop a Web Page(s) 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 Demo</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
</head>
<body>
<div class="container mt-5">
<h1>Text Colors</h1>
<p class="text-primary">Primary text color</p>
<p class="text-secondary">Secondary text color</p>
<p class="text-success">Danger text color</p>
<p class="text-danger">Success text color</p>
<p class="text-warning">Warning text color</p>
<p class="text-info">Info text color</p>
<p class="text-light bg-dark">Light text color on dark background</p>
<p class="text-dark">Dark text color</p>
<p class="text-muted">Muted text color</p>
<p class="text-white bg-dark">White text color on dark background</p>

<h1>Font Weight</h1>
<p class="fw-light">Light font weight</p>
<p class="fw-normal">Normal font weight</p>
<p class="fw-bold">Bold font weight</p>

<h1>Font Style</h1>
<p class="fst-italic">Italic font style</p>
<p class="fst-normal">Normal font style</p>
</div>

<!-- Bootstrap Bundle with Popper -->


<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></
script>
</body>
</html>
Explanation
1. `<!DOCTYPE html>`: Declares the document type and version of HTML being used.
2. `<html lang="en">`: Defines the root element of the HTML document and specifies the language
as English.
3. `<head>`: Contains meta-information about the HTML document, such as character set, viewport
settings, and title.
4. `<meta charset="UTF-8">`: Specifies the character encoding for the document as UTF-8.
5. `<meta name="viewport" content="width=device-width, initial-scale=1.0">`: Sets the viewport
properties to ensure proper rendering and scaling on different devices.
6. `<title>Bootstrap 5.0 Text and Fonts Demo</title>`: Sets the title of the HTML document.
7. `<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">`: Links the Bootstrap CSS file hosted on a CDN (Content Delivery Network) to the
HTML document, allowing the use of Bootstrap styles.
8. `<body>`: Contains the content of the HTML document visible to users.
9. `<div class="container mt-5">`: Defines a container element with Bootstrap's `.container` class
and adds margin from the top using the `.mt-5` class (margin-top).
10. Text Colors Section:
- `<h1>Text Colors</h1>`: Indicates the start of the section demonstrating text colors.
- Each `<p>` element demonstrates a different text color using Bootstrap's `.text-*` classes, such as
`.text-primary`, `.text-secondary`, etc.
- Background color for some text is set using the `.bg-dark` class for better visibility.
11. Font Weight Section:
- `<h1>Font Weight</h1>`: Indicates the start of the section demonstrating font weights.
- Each `<p>` element demonstrates a different font weight using Bootstrap's `.fw-*` classes, such as
`.fw-light`, `.fw-normal`, `.fw-bold`.
12. Font Style Section:
- `<h1>Font Style</h1>`: Indicates the start of the section demonstrating font styles.
- Each `<p>` element demonstrates a different font style using Bootstrap's `.fst-*` classes, such as
`.fst-italic`, `.fst-normal`.
13. `<!-- Bootstrap Bundle with Popper -->`: Comment indicating the inclusion of Bootstrap's
JavaScript bundle.
14. `<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></
script>`: Links the Bootstrap JavaScript bundle from the CDN, providing functionality like
dropdowns and modals.

This code creates a web page demonstrating various text and font properties provided by Bootstrap
5.0 framework classes. Each section showcases different classes available for styling text colors,
font weights, and font styles.

You might also like