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>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Website</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</head>
<body>
<div class="container-fluid">
<div class="page-header text-center bg-success ">
<h2>Bureau of Police Research and Development</h2>
</div>
<div>
<img class="img-thumbnail" src="dawn.jpg">
</div>
<div class="navbar navbar-dark bg-warning">
<div class="nav-item col-md-4 text-center text-decoration-underline ">
<a class="nav-link" href="./Home.html" aria-current="page">Home</a>
</div>
<div class="nav-item col-md-4 text-center ">
<a class="nav-link" href="./History.html">History</a>
</div>
<div class="nav-item col-md-4 text-center">
<a class="nav-link" href="./Contactus.html" >Contact us</a>
</div>
</div>
<div class="row text-center">
<div class="col-md-2 ">
<table class="table table-bordered">
<thead>
<tr><th>Events</th></tr>
</thead>
<thead>
<tr><th>Gallery</th></tr>
</thead>
<thead>
<tr><th>Azadhi Mahotsav</th></tr>
</thead>
<thead>
<tr><th>e-USTAD</th></tr>
</thead>
<thread>
<tr><th>Press Release</th></tr>
</thread>
<thread>
<tr><th>Tenders</th></tr>
</thread>
</table>
</div>
<div class="col-md-8">
<img class="img img-thumbnail" src="pro.jpg">
</div>
<div class="col-md-2">
<img class="img img-thumbnail" src="lan.png">
<h3>Directive General of BPRD</h3>
</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Website</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</head>
<body>
<div class="container-fluid">
<div class="page-header text-center bg-success ">
<h2>Bureau of Police Research and Development</h2>
</div>
<div>
<img class="img-thumbnail" src="dawn.jpg">
</div>
<div class="navbar navbar-dark bg-warning">
<div class="nav-item col-md-4 text-center">
<a class="nav-link" href="./Home.html" aria-current="page">Home</a>
</div>
<div class="nav-item col-md-4 text-center text-decoration-underline">
<a class="nav-link" href="./History.html">History</a>
</div>
<div class="nav-item col-md-4 text-center ">
<a class="nav-link" href="./Contactus.html" >Contact us</a>
</div>
</div>
<div class="col-md-12 text-center">
<h2>History</h2>
<h3>Evolution of BPRD</h3>
</div>
<div>
<h3>Modernization:</h3>
<br/><h4>
Modernization Division ensures effective implementation/ introduction of the modern technology/gadgetry in the Police Forces. Identification of emerging technologies and orientation of work on new technologies should be encouraged so that the Police Forces can be equipped with the best and are capable to resist any threat whether in the jungle, streets or in the lab.
The Division lease with the national laboratories other scientific organizations and institutions and public and private sector undertakings for modernization programs and stimulating indigenous production of Police equipment and system.
The Modernization Division is expected to keep abreast with modernization in the application of science and technology to police work in India and abroad and study new procedures and methodologies with a view to promoting the introduction of suitable equipment and techniques in police work in India to improve its operational efficiency.</h4>
</div>
<div>
<h4><br/>Besides advising the Government of India, the Modernization Division, if required by the State Governments, also advises them on matters falling within the field of its operations.
The Modernization Division (erstwhile Development Division) was set up in 1970. The Division was augmented in 2009 with creation of additional technical posts i.e. Principal Scientific Officers, Senior Scientific Officers and Senior Scientific Assistants in the field of Explosives/Ballistics, Weapons, Uniform Accouterments, Life Sciences, Building& Design, Electronics, Traffic &Transport. The Modernization Division is headed by Director, an officer rank of the Inspector General of Police.</h4>
</div>
</div>
</div>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Website</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</head>
<body>
<div class="container-fluid">
<div class="page-header text-center bg-success ">
<h2>Bureau of Police Research and Development</h2>
</div>
<div>
<img class="img-thumbnail" src="dawn.jpg">
</div>
<div class="navbar navbar-dark bg-warning">
<div class="nav-item col-md-4 text-center">
<a class="nav-link" href="./Home.html" aria-current="page">Home</a>
</div>
<div class="nav-item col-md-4 text-center">
<a class="nav-link" href="./History.html">History</a>
</div>
<div class="nav-item col-md-4 text-center text-decoration-underline">
<a class="nav-link" href="./Contactus.html" >Contact Us</a>
</div>
</div>
<div class="row">
<div class="col-md-3">
<table class="table table-bordered">
<tr><th>Contact US</th></tr>
<tr><th>Organisation Address</th></tr>
<tr><th>Citizens Corner</th></tr>
</table>
</div>
<div class="col-md-9 text-center" style="padding-right: 10px;">
<h3>Contact US</h3>
<address>
<h3>Address:</h3>
<h4>Bureau of Police Research and Development<br/>
Ministry of Home Affairs,<br/>
NH-8, Mahipalpur<br/>
New Delhi (India)<br/></h4>
<h3>Telefax:</h3>
<h4>Office: +91-11-26781312, Email id: dg[at]bprd[dot]nic[dot]in<br/>
ADG Office: +91-11-26781341, Email id: adg[at]bprd[dot]nic[dot]in<br/>
Administration Directorate: +91-11-26781326, Email id: igadm[at]bprd[dot]nic[dot]in<br/>
Training Directorate: +91-11-26782027, Email id: dirtrg[at]bprd[dot]nic[dot]in<br/>
NPM Directorate: +91-11-26781345, Email id: dirnpm[at]bprd[dot]nic[dot]in<br/>
MOD Directorate: +91-11-26782023, Email id: igmod[at]bprd[dot]nic[dot]in<br/>
Research & CA Directorate: +91-11-26781314, Email id: dirrd[at]bprd[dot]nic[dot]in<br/></h4>
</address>
</div>
</div>
</div>
</body>
</html>
Thus the program to create the webpage using bootstrap is completed successfully.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent