Responsive website Using Bootstrap - DataOps Redefined!!!

Posted on November 13, 2021November 13, 2021 | by Subham Kumar Mishra

What is Bootstrap?

Bootstrap is the most popular CSS Framework for developing responsive and mobile-first websites.

Bootstrap is an HTML, CSS & JS Library that focuses on simplifying the development of informative web pages (as opposed to web apps). The primary purpose of adding it to a web project is to apply Bootstrap’s choices of color, size, font and layout to that project.

First we create a file with Html extension

Now insert the html templates using bootstrap started templates it creates the html basic requirment like meta tags body tags ….

Now add nav bar using bootstrap components

also add some containers through this our web page is responsive you can check using view inspect

You can add some img use as logo

Code –



	<!doctype html>
	<html lang="en">

	<head>

	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

	<!-- Bootstrap CSS -->
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
	integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

	<title>Welcome to Cotocus </title>
	</head>

	<body>
	<!-- our code starts here -->
	<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
	<a class="navbar-brand" href="/">Cotocus</a>
	<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
	aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
	<span class="navbar-toggler-icon"></span>
	</button>

	<div class="collapse navbar-collapse" id="navbarSupportedContent">
	<ul class="navbar-nav mr-auto">
	<li class="nav-item active">
	<a class="nav-link" href="/">Home <span class="sr-only">(current)</span></a>
	</li>
	<li class="nav-item">

	<a class="nav-link" href="/about.html">About</a>
	</li>

	<li class="nav-item dropdown">
	<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
	aria-haspopup="true" aria-expanded="false">
	Services
	</a>
	<div class="dropdown-menu" aria-labelledby="navbarDropdown">
	<a class="dropdown-item" href="/services.html">Internship</a>
	<a class="dropdown-item" href="/services.html">Jobs</a>
	<div class="dropdown-divider"></div>
	<a class="dropdown-item" href="/services.html">Write us </a>
	</div>
	</li>
	<li class="nav-item">

	<a class="nav-link" href="/contact.html">Contact Us</a>
	</li>

	</ul>
	<form class="form-inline my-2 my-lg-0">
	<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
	<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
	</form>
	</div>
	</nav>

	<div class="alert alert-success alert-dismissible fade show" role="alert">
	<strong>Fill your form</strong> You can join our Internship program.
	<button type="button" class="close" data-dismiss="alert" aria-label="Close">
	<span aria-hidden="true">×</span>
	</button>
	</div>

	<div class="container mt-3">
	<div class="jumbotron">
	<h1 class="display-4">Welcome to Cotocus!</h1>
	<p class="lead">Cotocus is software base company , main branch in Karnataka . We dele with many comoany having sevaral projects .</p>
	<hr class="my-4">
	<p>one of the branch is in Bokaro you can also join there for the internahip program.</p>
	<a class="btn btn-primary btn-lg" href="https://www.google.com/maps/place/Cotocus/@12.966215,77.5892902,14z/data=!3m1!4b1!4m5!3m4!1s0x3bae15d538ddf0fd:0xb4c383b64ef508bf!8m2!3d12.9662156!4d77.6067998" target="_blank" role="button">View On Google Maps</a>
	</div>



	</div>


	<div class="container">
	<div class="row">
	<div class="col-md-4 text-center">
	<img src="professnow.jpg" class="bd-placeholder-img rounded-circle" width="140" height="140" />
	<h2>professnow</h2>
	<p> This application empowers every users and professionals around the world to easily connect and book for all kind of services you need at home or office by checking hundreds of service options in your city. </p>
	<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
	</div>
	<div class="col-md-4 text-center">
	<img src="devosschool.png" class="bd-placeholder-img rounded-circle" width="140" height="140" />
	<h2> devosschool </h2>
	<p> DevOpsSchool is a next generation solution built to resolve IT Companies and Software professional's skills up-gradation and digital transformation problems.</p>
	<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
	</div>
	<div class="col-md-4 text-center">
	<img src="wizbrand.png" class="bd-placeholder-img rounded-circle" width="140" height="140" />
	<h2> wizbrand </h2>
	<p> A powerful platform for all your Digital marketing needs. Manage all your Digital marketing projects, assets, tasks, your resources and track their progress and stay organized with centralized workspace "WizBrand.com".</p>
	<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
	</div>
	</div>

	</div>




	<!-- Optional JavaScript -->
	<!-- jQuery first, then Popper.js, then Bootstrap JS -->
	<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
	integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
	crossorigin="anonymous"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
	integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
	crossorigin="anonymous"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
	integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
	crossorigin="anonymous"></script>
	</body>

	</html>
	s

view raw Responsiveweb.html hosted with

by GitHub

Thanku

bootstrap