Scribd
Upload
14 views5 pages

Practical 7 (IWT)

Uploaded by

harshitsingh1930
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
14 views5 pages

Practical 7 (IWT)

Uploaded by

harshitsingh1930
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

PRACTICAL 7

Use Bootstrap library and icons to develop a responsive website

A responsive website is designed to provide an optimal viewing and interaction experience across a
wide range of devices (desktops, tablets, and mobile phones). It adjusts its layout dynamically based on
the size and resolution of the screen.

Bootstrap is one of the most popular frameworks for building responsive websites. It provides pre-
designed CSS classes and JavaScript components to create layouts and UI elements that work
seamlessly across different screen sizes. Bootstrap simplifies the process of creating a responsive
website by offering a grid system, prebuilt components, and utility classes.

7.html

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Responsive Website</title>

<!-- Bootstrap CSS -->

<link

href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css"

rel="stylesheet">

<!-- Bootstrap Icons -->

<link

href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css"

rel="stylesheet">

</head>

<body>

<!-- Navbar -->

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">

<div class="container">

<a class="navbar-brand" href="#"><i class="bi bi-star-fill"></i> MyBrand</a>


<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">

<span class="navbar-toggler-icon"></span>

</button>

<div class="collapse navbar-collapse" id="navbarNav">

<ul class="navbar-nav ms-auto">

<li class="nav-item"><a class="nav-link" href="#">Home</a></li>

<li class="nav-item"><a class="nav-link" href="#">About</a></li>

<li class="nav-item"><a class="nav-link" href="#">Services</a></li>

<li class="nav-item"><a class="nav-link" href="#">Contact</a></li>

</ul>

</div>

</div>

</nav>

<!-- Hero Section -->

<div class="container-fluid bg-primary text-white text-center py-5">

<h1>Welcome to My Responsive Website</h1>

<p>Powered by Bootstrap and Icons</p>

<button class="btn btn-light btn-lg mt-3"><i class="bi bi-hand-thumbs-up"></i> Get Started</button>

</div>

<!-- Features Section -->

<div class="container py-5">

<div class="row text-center">

<div class="col-md-4 mb-4">

<i class="bi bi-phone display-4 text-primary"></i>

<h3>Mobile Friendly</h3>

<p>Our design adapts to any screen size.</p>

</div>

<div class="col-md-4 mb-4">


<i class="bi bi-speedometer2 display-4 text-success"></i>

<h3>Fast Performance</h3>

<p>Optimized for speed and reliability.</p>

</div>

<div class="col-md-4 mb-4">

<i class="bi bi-shield-lock display-4 text-danger"></i>

<h3>Secure</h3>

<p>We prioritize your security and privacy.</p>

</div>

</div>

</div>

<!-- Footer -->

<footer class="bg-dark text-white text-center py-3">

<div class="container">

<p>&copy; 2024 MyBrand | Follow us:

<a href="#" class="text-white ms-2"><i class="bi bi-facebook"></i></a>

<a href="#" class="text-white ms-2"><i class="bi bi-twitter"></i></a>

<a href="#" class="text-white ms-2"><i class="bi bi-instagram"></i></a>

</p>

</div>

</footer>

<!-- Bootstrap JS -->

<script

src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js">

</script>

</body>

</html>
OUTPUT

1. ON DESKTOP

2. ON MOBILE
CODE EXPLANATION

1. Responsive Navbar:
o Includes a collapsible menu for smaller screens using navbar-toggler.
2. Hero Section:
o Uses a full-width background with a heading, paragraph, and button.
3. Icons:
o Included Bootstrap Icons for visual enhancements:

<i class="bi bi-icon-name"></i> is used for icons like bi-star-fill, bi-phone, etc.

4. Responsive Features Section:


o Three equally spaced columns that adapt to screen sizes.
5. Footer:
o Contains social media icons and a copyright message.

OUTPUT

1. On Desktop: Navbar is fully expanded, features are aligned horizontally, and content is spread.
2. On Mobile: Navbar collapses into a toggle button, features stack vertically.

You might also like