What is Bootstrap?

Bootstrap is a free front-end framework for faster and easier web development
Bootstrap includes HTML and CSS based design templates for typography, forms, buttons, tables,
navigation, modals, image carousels and many other, as well as optional JavaScript plugins
Bootstrap also gives you the ability to easily create responsive designs

What is Responsive Web Design?

Responsive web design is about creating web sites which automatically adjust themselves to look good on all
devices, from small phones to large desktops.

Bootstrap History
Bootstrap was developed by Mark Otto and Jacob Thornton at Twitter, and released as an open source
product in August 2011 on GitHub.

In June 2014 Bootstrap was the No.1 project on GitHub!

Intelligent

Originally created by a designer and a developer at Twitter, Bootstrap has become one of the most popular
front-end frameworks and open source projects in the world.

Bootstrap was created at Twitter in mid-2010 by @mdo and @fat. Prior to being an open-sourced framework,
Bootstrap was known as Twitter Blueprint. A few months into development, Twitter held its first Hack Week
and the project exploded as developers of all skill levels jumped in without any external guidance. It served as
the style guide for internal tools development at the company for over a year before its public release, and
continues to do so today.

Originally released on Friday, August 19, 2011, we've since had over twenty releases, including two major
rewrites with v2 and v3. With Bootstrap 2, we added responsive functionality to the entire framework as an
optional stylesheet. Building on that with Bootstrap 3, we rewrote the library once more to make it responsive
by default with a mobile first approach.

Why Use Bootstrap?

Advantages of Bootstrap:

Easy to use: Anybody with just basic knowledge of HTML and CSS can start using Bootstrap
Responsive features: Bootstrap's responsive CSS adjusts to phones, tablets, and desktops
Mobile-first approach: In Bootstrap 3, mobile-first styles are part of the core framework
 Browser compatibility: Bootstrap is compatible with all modern browsers (Chrome, Firefox, Internet
Explorer, Safari, and Opera)

BS Image
Rounded Corners

The img-rounded class adds rounded corners to an image (IE8 does not support rounded corners):

Example
<img src="cinqueterre.jpg" class="img-rounded" alt="Cinque Terre" width="304" height="236">

Circle
The img-circle class shapes the image to a circle (IE8 does not support rounded corners):

Example
<img src="cinqueterre.jpg" class="img-circle" alt="Cinque Terre" width="304" height="236">

Thumbnail
The img-thumbnail class shapes the image to a thumbnail:

Example
<img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre" width="304" height="236">

Bootstrap's Default Settings

Form controls automatically receive some global styling with Bootstrap:

All textual <input>, <textarea>, and <select> elements with class .form-control have a width of 100%.

Bootstrap Form Layouts

Bootstrap provides three types of form layouts:

Vertical form (this is default)

Horizontal form
Inline form

Standard rules for all three form layouts:

Wrap labels and form controls in <div class="form-group"> (needed for optimum spacing)
Add class .form-control to all textual <input>, <textarea>, and <select> elements
Navigation Bars
A navigation bar is a navigation header that is placed at the top of the page:

With Bootstrap, a navigation bar can extend or collapse, depending on the screen size.

A standard navigation bar is created with <nav class="navbar navbar-default">.

Button Styles
Bootstrap provides seven styles of buttons:

To achieve the button styles above, Bootstrap has the following classes:

.btn-default
.btn-primary
.btn-success
.btn-info
.btn-warning
.btn-danger
.btn-link

Basic Progress Bar

A progress bar can be used to show a user how far along he/she is in a process.

Bootstrap provides several types of progress bars.

See this link http://www.w3schools.com/bootstrap/bootstrap_progressbars.asp

Bootstrap Forms

Bootstrap's Default Settings

Form controls automatically receive some global styling with Bootstrap:

All textual <input>, <textarea>, and <select> elements with class .form-control have a width of 100%.

Bootstrap Form Layouts

Bootstrap provides three types of form layouts:

Vertical form (this is default)

 Horizontal form
Inline form

Standard rules for all three form layouts:

Wrap labels and form controls in <div class="form-group"> (needed for optimum spacing)
Add class .form-control to all textual <input>, <textarea>, and <select> elements

Bootstrap Vertical Form (default)

The following example creates a vertical form with two input fields, one checkbox, and a submit button:

Bootstrap Inline Form

In an inline form, all of the elements are inline, left-aligned, and the labels are alongside.

Note: This only applies to forms within viewports that are at least 768px wide!

Additional rule for an inline form:

Add class .form-inline to the <form> element

Tip: If you don't include a label for every input, screen readers will have trouble with your forms. You can hide
the labels for all devices, except screen readers, by using the .sr-only class:

Bootstrap Horizontal Form

A horizontal form stands apart from the other forms both in the amount of markup, and in the presentation of
the form.

Additional rules for a horizontal form:

Add class .form-horizontal to the <form> element

Add class .control-label to all <label> elements

Tip: Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout.

Bootstrap Basic Table

A basic Bootstrap table has a light padding and only horizontal dividers.