Scribd
Upload
2 views

Program 8

The document provides an example of a web page using Bootstrap 5.0, showcasing a responsive navigation bar and footer. It includes HTML code that demonstrates the structure and styling of these elements, along with explanations of the key components. The layout is designed to be mobile-friendly and includes links and content organization within the footer.

Uploaded by

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

Program 8

The document provides an example of a web page using Bootstrap 5.0, showcasing a responsive navigation bar and footer. It includes HTML code that demonstrates the structure and styling of these elements, along with explanations of the key components. The layout is designed to be mobile-friendly and includes links and content organization within the footer.

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 8: Develop a Web page(s) with suitable HTML elements to demonstrate Bootstrap

5.0 framework classes for Nav and Footers.

Program:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 5 Nav and Footer 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>

<!-- Navigation Bar -->


<nav class="navbar navbar-expand-lg navbar-light bg-primary">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-
target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle
navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<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="https://flipkart.com">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://amazon.com">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-
disabled="true">Disabled</a>
</li>
</ul>
</div>
</div>
</nav>

<!-- Main Content -->


<div class="container mt-5">
<h1 class="text-center">Welcome to Bootstrap 5 Example</h1>
<p class="text-center">This is a simple example to demonstrate Bootstrap 5 navigation
bar and footer.</p>
</div>

<!-- Footer -->


<footer class="bg-light text-center text-lg-start">
<div class="container p-4">
<div class="row">
<div class="col-lg-6 col-md-12 mb-4 mb-md-0">
<h5 class="text-uppercase">Footer Content</h5>
<p>
Here you can use rows and columns to organize your footer content. Lorem ipsum
dolor sit amet,
consectetur adipisicing elit.
</p>
</div>

<div class="col-lg-3 col-md-6 mb-4 mb-md-0">


<h5 class="text-uppercase">Links</h5>
<ul class="list-unstyled mb-0">
<li>
<a href="https://example.com/link1" class="text-dark">Link 1</a>
</li>
<li>
<a href="https://google.com/link2" class="text-dark">Link 2</a>
</li>
<li>
<a href="https://atme.edu.in/link3" class="text-dark">Link 3</a>
</li>
<li>
<a href="https://vtu.ac.in/link4" class="text-dark">Link 4</a>
</li>
</ul>
</div>

<div class="col-lg-3 col-md-6 mb-4 mb-md-0">


<h5 class="text-uppercase mb-0">Links</h5>
<ul class="list-unstyled">
<li>
<a href="https://example.com/link5" class="text-dark">Link 5</a>
</li>
<li>
<a href="https://outlook.com/link6" class="text-dark">Link 6</a>
</li>
<li>
<a href="https://gmail.com/link7" class="text-dark">Link 7</a>
</li>
<li>
<a href="https://example.com/link8" class="text-dark">Link 8</a>
</li>
</ul>
</div>
</div>
</div>

<div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.2);">


© 2024 Copyright:
<a class="text-dark" href="https://yourwebsite.com">YourWebsite.com</a>
</div>
</footer>

</body>
</html>
Explanation:

Head Section

1. Meta Tags:
o <meta charset="UTF-8">: Sets the character encoding for the document to
UTF-8.
o <meta name="viewport" content="width=device-width, initial-
scale=1.0">: Ensures proper scaling and rendering on mobile devices.
2. Title:
o <title>Bootstrap 5 Nav and Footer Example</title>: Sets the title of the
webpage.
3. Bootstrap CSS:
o <link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootst
rap.min.css" rel="stylesheet">: Includes the Bootstrap 5.0 CSS for styling.
4. Bootstrap JS and Popper.js:
o <script
src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/po
pper.min.js"></script>: Includes Popper.js required for Bootstrap tooltips and
popovers.
o <script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstra
p.min.js"></script>: Includes the Bootstrap 5.0 JavaScript for interactive
components.

Body Section

Navigation Bar

 Nav Container:

 <nav class="navbar navbar-expand-lg navbar-light bg-light">: Creates a


responsive navigation bar with a light background.
 <div class="container-fluid">: Ensures the navbar spans the full width of the
viewport.

 Brand and Toggler:

 <a class="navbar-brand" href="#">Navbar</a>: Defines the brand/logo link.


 <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarNav" aria-controls="navbarNav" aria-
expanded="false" aria-label="Toggle navigation">: Adds a button to toggle the
collapsed navbar content on small screens.
 <span class="navbar-toggler-icon"></span>: Defines the icon for the toggler
button.

 Collapsible Content:
o <div class="collapse navbar-collapse" id="navbarNav">: Contains the
collapsible content of the navbar.
o <ul class="navbar-nav">: Defines a list of navigation items.
o Each <li class="nav-item"> contains a navigation link (<a class="nav-
link" href="#">).

Main Content

Container:

 <div class="container mt-5">: A Bootstrap container to center and add spacing (mt-
5 for margin-top).
 <h1 class="text-center">: A centered heading.
 <p class="text-center">: A centered paragraph.

Footer

 Footer Container:

 <footer class="bg-light text-center text-lg-start">: Creates a footer with a


light background and centered text.
 <div class="container p-4">: Adds padding to the footer content.

 Footer Rows and Columns:

 <div class="row">: Defines a row for the footer content.


 Column 1:
o <div class="col-lg-6 col-md-12 mb-4 mb-md-0">: A column that spans 6
out of 12 grid columns on large screens and 12 out of 12 on medium screens.
o <h5 class="text-uppercase">: A heading for the column.
o <p>: A paragraph for additional text.

o Column 2 and 3 (Links):
 <div class="col-lg-3 col-md-6 mb-4 mb-md-0">: Columns for
footer links.
 <h5 class="text-uppercase">: Headings for link sections.
 <ul class="list-unstyled mb-0">: Unordered lists without default
styles.
Each <li> contains a link (<a class="text-dark" href="#">).
 Footer Bottom:
o <div class="text-center p-3" style="background-color: rgba(0, 0,
0, 0.2);">: A bottom section with a semi-transparent background.
o Contains a copyright notice and a link to the website.

This layout demonstrates how to use Bootstrap 5.0 to create a responsive navigation bar and
footer with multiple sections and links.

You might also like