To design a website using bootstrap framework.
Requirement collection.
Creating the layout using bootstrap grid system.
Updating the sample content.
Choose the appropriate style and color scheme.
Validate the layout in various browsers.
Validate the HTML code.
Publish the website in the given URL.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bureau_of_Police_Research_and_Development</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="p-5 bg-primary text-white text-center">
<h1>Bureau of Police Research and Development</h1>
<h3>Ministry of Home Affairs</h3>
</div>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<div class="container-fluid">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="/static/home.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"></a>
</li>
<li class="nav-item">
<a class="nav-link active" href="/static/gallery.html">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">NPM</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Publication</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Dopo</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">SPM</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Training</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Research</a>
</li> <li class="nav-item">
<a class="nav-link" href="#"></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Police Expo</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Modernization</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CA</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Reports</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">SPC</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Organisation</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Awards</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Notable</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Admin</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="/static/about.html">About Us</a>
</li>
</ul>
</div>
</nav>
<div class="container mt-5">
<div class="row">
<div class="col-sm-4">
<img src="./img/img1.jfif" style="height:100px;" alt="police">
<h2>Director General</h2>
<h3 class="mt-4">Links on News and Events</h3>
<p>Click below</p>
<ul class="nav nav-pills flex-column">
<li class="nav-item">
<a class="nav-link active" href="https://bprd.nic.in/">bprd</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"></a>
</li>
<li class="nav-item">
<a class="nav-link active" href="https://en.wikipedia.org/wiki/Bureau_of_Police_Research_and_Development">wikipedia of bprd</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"></a>
</li>
<li class="nav-item">
<a class="nav-link active" href="https://twitter.com/bprdindia?lang=en">Twitter of bprd</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"></a>
</li>
<li class="nav-item">
<a class="nav-link active" href="https://economictimes.indiatimes.com/topic/bureau-of-police-research-and-development">Important News</a>
</li>
</ul>
<hr class="d-sm-none">
</div>
<div class="col-sm-8">
<img src="./img/img2.jfif" style="height:400px;" alt="police">
<h2>What's New</h2>
<h5>FEB 11, 2022</h5>
<p>“Good Policing cannot be perceived without the BPR&D”</p>
<p>Honurable Union Home Minister and Minister of Cooperation Shri Amit Shah ji said this on the eve of the 50th anniversary of the BPR&D.</p>
<p>As we enter the 51st year, our endeavour will be to redefine policing with cutting edge research.</p>
<p>The mandate of the BPR&D has provided meaningful space for all stakeholders in policing and correctional administration. </p>
<p>The collective wisdom of the practitioners, the academia and the civil society has culminated in inputs for policy imperatives in policing and prisons.</p>
<p>The verticals of the BPR&D on Research, Modernization, Capacity Building and the National Police Missions have contributed substantially in studying problems and defining solutions by Promoting Good Practices and Standards.</p>
<p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
</div>
</div>
</div>
<div class="mt-5 p-4 bg-dark text-white text-center">
<p>The Bureau of Police Research and Development, was set up on 28 August 1970 in furtherance of the objective of the Government of India for the modernisation of police forces. It has evolved as a multifaceted, consultancy organisation.</p>
</div>
</body>
</html>
Gallery Page:
<!DOCTYPE html>
<html lang="en">
<head>
<title>BPRD</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<style>
.fakeimg {
height: 200px;
background: #aaa;
}
</style>
</head>
<body>
<div class="p-5 bg-primary text-white text-center">
<h1>Bureau of Police Research and Development</h1>
<h3>Ministry of Home Affairs</h3>
</div>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<div class="container-fluid">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="/static/home.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"></a>
</li>
<li class="nav-item">
<a class="nav-link active" href="/static/gallery.html">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">NPM</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Publication</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Dopo</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">SPM</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Training</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Research</a>
</li> <li class="nav-item">
<a class="nav-link" href="#"></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Police Expo</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Modernization</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CA</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Reports</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">SPC</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Organisation</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Awards</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Notable</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Admin</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="/static/about.html">About Us</a>
</li>
</ul>
</div>
</nav>
<div class="container mt-5">
<div class="row">
<div class="col-sm-4">
<table class="table table-bordered">
<thead>
<tr>
<th class="nav-link active">Photo Gallery</th>
</tr>
</thead>
<tbody>
<tr>
<td class="nav-link active">National Conference</td>
</tr>
<tr>
<td class="nav-link active">Foundation Day</td>
</tr>
<tr>
<td class="nav-link active">Attachment of IPS Officers</td>
</tr>
</tbody>
</table>
<ul class="nav nav-pills flex-column">
<li class="nav-item">
<h3 class="mt-4">Links on News and Events</h3>
<p>Click below</p>
<a class="nav-link active" href="https://bprd.nic.in/">bprd</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"></a>
</li>
<li class="nav-item">
<a class="nav-link active" href="https://en.wikipedia.org/wiki/Bureau_of_Police_Research_and_Development">wikipedia of bprd</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"></a>
</li>
<li class="nav-item">
<a class="nav-link active" href="https://twitter.com/bprdindia?lang=en">Twitter of bprd</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"></a>
</li>
<li class="nav-item">
<a class="nav-link active" href="https://economictimes.indiatimes.com/topic/bureau-of-police-research-and-development">Important News</a>
</li>
</ul>
<hr class="d-sm-none">
</div>
<div class="col-sm-8">
<h2>GALLERY</h2>
</br>
<img src="./img/img3.jfif" style="height:150px;" alt="police">
<img src="./img/img4.jfif" style="height:150px;" alt="police">
<img src="./img/img5.jfif" style="height:150px;" alt="police">
</div>
</div>
</div>
<div class="mt-5 p-4 bg-dark text-white text-center">
<p>The Bureau of Police Research and Development, was set up on 28 August 1970 in furtherance of the objective of the Government of India for the modernisation of police forces. It has evolved as a multifaceted, consultancy organisation.</p>
</div>
</body>
</html>
About us:
<!DOCTYPE html>
<html lang="en">
<head>
<title>BPRD</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<style>
.fakeimg {
height: 200px;
background: #aaa;
}
</style>
</head>
<body>
<div class="p-5 bg-primary text-white text-center">
<h1>Bureau of Police Research and Development</h1>
<p>Ministry of Home Affairs</p>
</div>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<div class="container-fluid">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="/static/home.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"></a>
</li>
<li class="nav-item">
<a class="nav-link active" href="/static/gallery.html">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">NPM</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Publication</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Dopo</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">SPM</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Training</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Research</a>
</li> <li class="nav-item">
<a class="nav-link" href="#"></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Police Expo</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Modernization</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CA</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Reports</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">SPC</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Organisation</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Awards</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Notable</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Admin</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="/static/about.html">About Us</a>
</li>
</ul>
</div>
</nav>
<div class="container mt-5">
<div class="row">
<div class="col-sm-4">
<table class="table table-bordered">
<thead>
<tr>
<th class="nav-link active">About Us</th>
</tr>
</thead>
<tbody>
<tr>
<td class="nav-link active">Evolution of BPRD</td>
</tr>
<tr>
<td class="nav-link active">Awards</td>
</tr>
<tr>
<td class="nav-link active">Work Allocation</td>
</tr>
</tbody>
</table>
<hr class="d-sm-none">
</div>
<div class="col-sm-8">
<h2>ABOUT US</h2>
<h5>CREATION:</h5>
<p>1. The Government of India vide Resolution No.8/136/68-P.I (Pers.I) dated 28.08.1970 formally established the Bureau of Police Research and Development (BPR&D), under the Ministry of Home Affairs giving a new orientation to then existing Police Research and Advisory Council (1966) for the following reasons and with the primary objective of modernization of police force</p>
<p>2.The Bureau was established with the following two divisions initially with a well laid out charter of duties</p>
<p>Research, Statistics and Publication</p>
</div>
</div>
</div>
<div class="mt-5 p-4 bg-dark text-white text-center">
<p>The Bureau of Police Research and Development, was set up on 28 August 1970 in furtherance of the objective of the Government of India for the modernisation of police forces. It has evolved as a multifaceted, consultancy organisation.</p>
</div>
</body>
</html>
Thus the Bootstrap website has been created.