Bootstrap How Works

0 4403

Today trend's - Websites should be mobile responsive. For create mobile responsive websites, bootstrap is compulsory and important also. Now we are step wise explaining how bootstrap integrated with HTML (HyperText Markup Language)and CSS (Cascading Style Sheet).

Step 1: Creating a normal HTML Page

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Bootstrap </title>
</head>

<body>
<h1>Welcome to Bootstrap </h1>
<p> Phasellus ultrices sed nunc id molestie. Nulla a dolor nec odio bibendum mattis. Sed vel orci magna. Quisque et mollis dui, varius posuere est. Suspendisse luctus facilisis tempus. </p>
</body>

</html>

Step 2: Includes Bootstrap css and js file.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Bootstrap </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap css file -->

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">

</head>

<body>
<h1> Welcome to Bootstrap </h1>
<p> Phasellus ultrices sed nunc id molestie. Nulla a dolor nec odio bibendum mattis. Sed vel orci magna. Quisque et mollis dui, varius posuere est. Suspendisse luctus facilisis tempus. </p>

<!-- Bootstrap js file -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"> </script>

</body>
</html>

Step 3: Save (.html) and browse html file

Bootstrap Grid System

a) .container class used for proper alignment and padding.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Bootstrap </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Bootstrap css file-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
</head>

<body>
<div class="container">
<h1> Welcome to Bootstrap </h1>
<p> Phasellus ultrices sed nunc id molestie. Nulla a dolor nec odio bibendum mattis. Sed vel orci magna. Quisque et mollis dui, varius posuere est. Suspendisse luctus facilisis tempus. </p>
</div>

<!--Bootstrap js file-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"> </script>

</body>
</html>

b) .row and .col-lg-12 class contain in .container class.

Use below code for check basic responsiveness

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Bootstrap </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Bootstrap css file-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">

</head>

<body>
<div class="container">
<div class="row">
<h1> Welcome to Bootstrap </h1>
<div class="col-lg-6">

<p> Phasellus ultrices sed nunc id molestie. Nulla a dolor nec odio bibendum mattis. Sed vel orci magna. Quisque et mollis dui, varius posuere est. Suspendisse luctus facilisis tempus. </p>

</div>

<div class="col-lg-6">

<p> Phasellus ultrices sed nunc id molestie. Nulla a dolor nec odio bibendum mattis. Sed vel orci magna. Quisque et mollis dui, varius posuere est. Suspendisse luctus facilisis tempus. </p>

</div>
</div>
</div>
<!--Bootstrap js file-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"> </script>

</body>
</html>