Responsive Design With Bootstrap By: Gaurav Yadav : July 2016

Container class :

Use .container for a responsive fixed width container.

Css for container in --- .container{width:1170px;}

<div class="container"> ...</div>

Use .container-fluid for a full width container, spanning the entire width of your viewport.

Css for container-fluid in --- .container-fluid{width:100%;}

<div class="container-fluid"> ...</div>

Basic Structure Code :

How to Use Bootstrap :

STEP 1: Download Bootstrap.zip file

Click Here Free Download Latest Bootstrap File

STEP 2: Link Bootstrap Css in <head></head> tag

<link rel="stylesheet" href="css/bootstrap.css" />
<script src="js/jquery.min.js" ></script >
<script src="js/bootstrap.min.js"></script>

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

<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>

<body> 
<div class="container"> 
<div class="row"> 
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 " style=" min-height: 150px !important; background: #31961f !important">
<h2 align="center" >Col-3</h2>
</div>
<div class="col-lg-9 col-md-9 col-sm-9 col-xs-12" style="min-height: 150px !important; background: red !important">
<h2 align="center" >Col-9</h2>
</div>
</div> 
<div class="row"> 
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style=" min-height: 400px !important; background: #ddd !important">
<h2 align="center" >Col-12</h2>
</div>
</div> 
<div class="row"> 
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-12" style=" min-height: 150px !important; background: #000 !important">
<h2 align="center" >Col-2</h2>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-12" style=" min-height: 150px !important; background: #31961f !important">
<h2 align="center" >Col-2</h2></div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-12" style=" min-height: 150px !important; background: #000 !important">
<h2 align="center" >Col-2</h2>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-12" style=" min-height: 150px !important; background: #31961f !important">
<h2 align="center" >Col-2</h2>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-12" style=" min-height: 150px !important; background: #000 !important"><h2 align="center" >Col-2</h2></div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-12" style=" min-height: 150px !important; background: #31961f !important"><h2 align="center" >Col-2</h2></div>
</div> 
</div> 

</body>
</html>

Output :

Bootstrap is an open source project originally created by Twitter to enable creation of responsive, mobile first web pages. Bootstrap has a standard set of classes that allow developers to quickly create applications that scale to devices of all sizes, and incorporate common components such as dialog boxes and validation. Bootstrap has become a defacto standard for web design.

So why should you choose Bootstrap? Here are 6 great reasons:

Reason #1. Easy to get started.

Reason #2. Great grid system.

Reason #3. Base styling for most HTML elements.

Reason #4. Extensive list of components.

Reason #5. Bundled Javascript plugins.

Reason #6. Good documentation.

Basic structure of Bootstrap

bootstrap/
  ├── css/
  │   ├── bootstrap.css
  │   ├── bootstrap.min.css
  ├── js/
  │   ├── bootstrap.js
  │   ├── bootstrap.min.js
  └── img/
      ├── glyphicons-halflings.png
      └── glyphicons-halflings-white.png

Bootstrap

CSS FOLDER

Bootstrap.css
Bootstrap.min.css
Bootstrap.theme.css
Bootstrap.theme.min.css

JS FOLDER

Bootstrap.js
Bootstrap.min.js
Jquery.js

Fonts

Responsive Design With Bootstrap By: Gaurav Yadav

Friday, 29 July 2016

Responsive Design With Bootstrap By: Gaurav Yadav : What is Bootstrap and Basic Structure of Bootstrap...

Wednesday, 27 July 2016

Bootstrap Basic Classes