Program 1: Develop a Web page(s) 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 Demo</title>
<!-- Bootstrap CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<div class="container mt-5">
<h1 class="display-1">Heading 1</h1>
<h1 class="display-2">Heading 2</h1>
<h1 class="display-3">Heading 3</h1>
<h1 class="display-4">Heading 4</h1>
<h1 class="display-5">Heading 5</h1>
<h1 class="display-6">Heading 6</h1>
</div>
<!-- Bootstrap Bundle with Popper -->
<script src="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.
1. `<meta charset="UTF-8">`: This meta tag specifies the character encoding for the HTML
document. In this case, it indicates that the document is encoded using UTF-8, which is a
widely used character encoding that supports a vast range of characters from various
languages and symbol sets. Using UTF-8 ensures that the document can properly display text
in different languages and special characters.
2. `<meta name="viewport" content="width=device-width, initial-scale=1.0">`: This meta tag
is used to control the layout and scaling of the webpage on different devices, particularly on
mobile devices. It sets the width of the viewport to the width of the device's screen
(`width=device-width`) and sets the initial zoom level to 1.0 (`initial-scale=1.0`). This helps
ensure that the webpage displays properly and is appropriately scaled for viewing on various
devices with different screen sizes and resolutions.
6. `<title>Bootstrap 5.0 Headings 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.
- `<link>`: This is an HTML element used to link external resources to the document, such as
stylesheets (CSS files).
- `href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"`:
This specifies the URL of the Bootstrap CSS file hosted on a CDN. In this case, it's using the
jsDelivr CDN service to fetch the Bootstrap CSS file.
- `rel="stylesheet"`: This attribute specifies the relationship between the linked document and
the current document. In this case, it indicates that the linked resource is a stylesheet.
So, when this line of code is included in an HTML document, it fetches the Bootstrap CSS file
from the specified URL and applies its styles to the HTML document, enabling the use of
Bootstrap's predefined styles and components.
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).
This line of code represents a `<div>` element with two attributes:
- `class="container"`: This assigns the class "container" to the `<div>` element. In Bootstrap,
the "container" class is used to create a fixed-width container for content. It helps to center
and contain the content within a specified width, typically adapting to different screen sizes.
- `class="mt-5"`: This assigns the class "mt-5" to the `<div>` element. In Bootstrap's spacing
utility, the "mt-5" class adds margin space to the top of the element. Specifically, "mt" stands
for margin-top, and "5" represents a predefined amount of margin space. In this case, "mt-5"
adds a significant amount of margin space to the top of the `<div>` element, pushing down the
content below it.
So, `<div class="container mt-5">` creates a container with fixed width and adds a substantial
margin space to the top of it. This is commonly used to create a layout with content
positioned below with some space in between.
10. `<h1 class="display-1">Heading 1</h1>`: Defines a level 1 heading (`<h1>`) with the
Bootstrap class `.display-1`, which styles the heading to be large and bold.
This line of code represents an `<h1>` (heading 1) element with the class "display-1" applied
to it.
- `<h1>`: This is an HTML element used to define the most important heading in a section. It
typically renders the text with the largest font size among the headings.
- `class="display-1"`: This assigns the class "display-1" to the `<h1>` element. In Bootstrap's
typography utility, the "display-1" class is used to style the heading with a large font size and
additional styling, making it prominent and visually distinct. This class is typically used for
headings that need to stand out prominently on the page, such as section titles or major
headings.
So, `<h1 class="display-1">Heading 1</h1>` defines a heading level 1 with the "display-1"
styling applied to it, resulting in a large, prominently styled heading.
11. `<h1 class="display-2">Heading 2</h1>`: Similar to the above, but with `.display-2`
class applied, resulting in a slightly smaller size.
<h1 class="display-2">Heading 2</h1> defines a heading level 1 with the "display-2" styling
applied to it, resulting in a large, but slightly smaller and less prominent heading compared to "display-
1".
12. `<h1 class="display-3">Heading 3</h1>`: Heading styled with `.display-3` class, smaller
than the previous ones.
13. `<h1 class="display-4">Heading 4</h1>`: Heading styled with `.display-4` class, smaller
than `.display-3`.
14. `<h1 class="display-5">Heading 5</h1>`: Heading styled with `.display-5` class, smaller
than `.display-4`.
15. `<h1 class="display-6">Heading 6</h1>`: Heading styled with `.display-6` class,
smallest among the display classes.
16. `<!-- Bootstrap Bundle with Popper -->`: Comment indicating the inclusion of
Bootstrap's JavaScript bundle.
17. `<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 line of code links the Bootstrap JavaScript bundle from a CDN (Content Delivery
Network) to the HTML document, enabling the use of Bootstrap's JavaScript functionality.
- `<script>`: This HTML element is used to embed or reference an external script file within an
HTML document.
- `src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/
bootstrap.bundle.min.js"`: This specifies the URL of the Bootstrap JavaScript bundle hosted on
a CDN. The Bootstrap bundle includes both Bootstrap's JavaScript and its dependencies, such
as Popper.js, which is required for some Bootstrap components like tooltips, popovers, and
dropdowns to function properly.
So, when this line of code is included in an HTML document, it fetches the Bootstrap
JavaScript bundle from the specified URL and enables the functionality of Bootstrap
components like dropdowns, modals, and more.
This code creates a simple web page demonstrating different heading styles provided by
Bootstrap 5.0 framework classes. Each heading (`<h1>` to `<h6>`) has a different size and
style applied using Bootstrap's display classes (`.display-1` to `.display-6`).
This line of code is commonly found in the `<head>` section of an HTML document and
serves two main purposes:
