Q5. Design a Website with Bootstrap 5
Question 5:
Design a website using Bootstrap 5.0.
In this assignment, we will create a Bootstrap 5 version of the NMU website. The design will include:
- Responsive navbar
- Hero section
- About, Departments, and Contact sections
- Footer with author credit
Example: Bootstrap 5 NMU Website
File Name: nmu-bootstrap.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
/>
<title>NMU University - Bootstrap 5 Demo</title>
<!-- Bootstrap 5 CDN -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
/>
<link rel="stylesheet" href="nmu-bootstrap.css" />
</head>
<body>
<!-- Navbar -->
<nav
class="navbar navbar-expand-lg navbar-dark bg-primary sticky-top"
>
<div class="container">
<a class="navbar-brand" href="#">NMU University</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 active" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#departments">Departments</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Hero Section -->
<section
id="home"
class="py-5 text-center text-white"
style="background: linear-gradient(135deg,#6a11cb,#2575fc);"
>
<div class="container">
<h1 class="display-4">Welcome to NMU University</h1>
<p class="lead">Empowering Students for a Bright Future</p>
<a href="#departments" class="btn btn-light btn-lg mt-3"
>Explore Departments</a
>
</div>
</section>
<!-- About Section -->
<section id="about" class="py-5 bg-light">
<div class="container">
<h2 class="text-center mb-4">About NMU</h2>
<p class="text-center">
North Maharashtra University (NMU) is a prestigious
institution providing quality education in various fields.
The university focuses on academic excellence, research, and
holistic development of students.
</p>
</div>
</section>
<!-- Departments Section -->
<section id="departments" class="py-5">
<div class="container">
<h2 class="text-center mb-4">Departments</h2>
<div class="row g-4">
<div class="col-md-4">
<div class="card h-100 shadow-sm">
<div class="card-body">
<h5 class="card-title">Computer Science</h5>
<p class="card-text">
Offering BSc, MSc, and MCA programs with a focus on
modern computing technologies.
</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card h-100 shadow-sm">
<div class="card-body">
<h5 class="card-title">Physics</h5>
<p class="card-text">
Advanced research and practical learning in
theoretical and experimental physics.
</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card h-100 shadow-sm">
<div class="card-body">
<h5 class="card-title">Chemistry</h5>
<p class="card-text">
Providing innovative curriculum and lab-based
education in chemistry.
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="py-5 bg-light">
<div class="container">
<h2 class="text-center mb-4">Contact Us</h2>
<form class="row g-3 justify-content-center">
<div class="col-md-5">
<input
type="text"
class="form-control"
placeholder="Your Name"
required
/>
</div>
<div class="col-md-5">
<input
type="email"
class="form-control"
placeholder="Email Address"
required
/>
</div>
<div class="col-10">
<textarea
class="form-control"
rows="4"
placeholder="Message"
required
></textarea>
</div>
<div class="col-10 text-center">
<button type="submit" class="btn btn-primary btn-lg">
Send Message
</button>
</div>
</form>
</div>
</section>
<!-- Footer -->
<footer class="bg-primary text-white py-4">
<div class="container text-center">
<p>
© 2025 NMU University. Designed by
<strong>Ansari Intesab</strong> for MCA-420 Lab Assignment.
</p>
</div>
</footer>
<!-- Bootstrap JS CDN -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>File Name: nmu-bootstrap.css
/* Custom styling */
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
h2 {
font-weight: bold;
}
.card-title {
color: #2575fc;
}
section {
scroll-margin-top: 70px; /* offset for sticky navbar */
}
.btn-primary {
background: #2575fc;
border: none;
}
.btn-primary:hover {
background: #1a5edc;
}Output Preview : Bootstrap 5 NMU Website
Last updated on