Bootstrap

Bootstrap(bunch of pre-defined css style)is a very common framework(defines the rule we need to follow)used for Front-End Development, It saves lot of our time while dealing with CSS manually.

Download http://getbootstrap.com/getting-started/#download

Now let’s look at some pre-defined Bootstrap Classes

Container Class: What container class will do is to align your code towards center

<div class=”container”>
<h1>First Bootstrap Code</h1>
</div>
Use of Container Class

Buttons: Basically allow us to add button

Now to make a success button

<button type=”button” class=”btn btn-success”>Success</button>
Success Button

Now to make this button look large just add class btn-lg

<button type=”button” class=”btn btn-success btn-lg”>Success</button>

OR to make this button look disabled just add disabled=”disabled”

<button type=”button” class=”btn btn-success btn-lg” disabled=”disabled”>Success</button>

Jumbotron: We can think of it like a landing page

<div class="jumbotron">
<h1>Hello, world!</h1>
<p>...</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>
Jumbotron

It’s always a good idea to place Jumbotron inside container so that it will not take the full space

<div class=”container”>
<div class=”jumbotron”>
<h1>Hello, world!</h1>
<p>…</p>
<p><a class=”btn btn-primary btn-lg” href=”#” role=”button”>Learn more</a></p>
</div>

Complete Code so far https://github.com/lakhera2016/bootstrap/blob/master/introduction.html

<div class=”container”>
<div class=”jumbotron”>
<h1>Hello, world!</h1>
<p>…</p>
<p><a class=”btn btn-primary btn-lg” href=”#” role=”button”>Learn more</a></p>
</div>
</div>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>BootStrap Introduction</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<h1>BootStrap Introduction</h1>
<div class="container">
<h1>First Bootstrap Code</h1>
<button type="button" class="btn btn-success btn-lg" disabled="disabled">Success</button>
</div>
<div class="container">
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>...</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>
</div>
</body>
</html>