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.
