Bootstrap How Works

Today trend’s – Websites should be mobile responsive. For do mobile responsive websites, bootstrap is compulsory and important also. Now we are step wise explaining how bootstrap integrated with HTML and CSS.

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
—————————
>> 1. .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>

>> 2. .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>

Leave a Reply

avatar
  Subscribe  
Notify of