Scribd
Upload
0 views4 pages

Node.js(2nd Program)

This document is an HTML template for a responsive web application using the Bootstrap framework. It includes a navigation bar, a header, cards for content display, and a footer, all designed to adjust to different screen sizes. The template utilizes Bootstrap's grid system and components to ensure responsiveness across devices.

Uploaded by

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

Node.js(2nd Program)

This document is an HTML template for a responsive web application using the Bootstrap framework. It includes a navigation bar, a header, cards for content display, and a footer, all designed to adjust to different screen sizes. The template utilizes Bootstrap's grid system and components to ensure responsiveness across devices.

Uploaded by

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

2. Make the above web application responsive web application using Bootstrap framework.

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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

<title>Responsive Web Application</title>

<!-- Bootstrap CSS -->

<link href="[Link]
rel="stylesheet">

</head>

<body>

<!-- Navigation Bar -->

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

<div class="container">

<a class="navbar-brand" href="#">My Website</a>

<button class="navbar-toggler" type="button"

data-bs-toggle="collapse"

data-bs-target="#menu">

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

</button>
<div class="collapse navbar-collapse" id="menu">

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

<li class="nav-item">

<a class="nav-link active" 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>

<!-- Header -->

<div class="container text-center mt-5">

<h1 class="text-primary">Responsive Bootstrap Website</h1>

<p>This page adjusts automatically for mobile, tablet and desktop screens.</p>

</div>

<!-- Cards -->


<div class="container mt-4">

<div class="row">

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

<div class="card">

<div class="card-body text-center">

<h3>HTML</h3>

<p>HTML is used to create web pages.</p>

<button class="btn btn-primary">Learn More</button>

</div>

</div>

</div>

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

<div class="card">

<div class="card-body text-center">

<h3>CSS</h3>

<p>CSS is used to style web pages.</p>

<button class="btn btn-success">Learn More</button>

</div>

</div>

</div>

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

<div class="card">

<div class="card-body text-center">


<h3>Bootstrap</h3>

<p>Bootstrap makes websites responsive.</p>

<button class="btn btn-danger">Learn More</button>

</div>

</div>

</div>

</div>

</div>

<!-- Footer -->

<footer class="bg-dark text-white text-center p-3 mt-4">

© 2026 Responsive Web Application

</footer>

<!-- Bootstrap JavaScript -->

<script src="[Link]
script>

</body>

</html>

You might also like