* Bootstrap

* Web front-end framework

* Solves cross browser compat via a reset css
* Is comprised of:
* CSS
* Javascript
* Fonts

* Open-source on Github
* Created by two guys who work at Twitter

*What is Bootstrap?

* quick and easy way to create responsive website layouts

* predefined grid classes for different types of devices like
cell phones, tablets, laptops and desktops
* 12 column responsive grid system
* .col-xs-*class to create grid columns for extra small
devices like cell phones
* .col-sm-*class for small screen devices like tablets
* .col-md-*class for medium size devices like desktops
* .col-lg-*for large desktop screens

*Bootstrap Grid

System

* Working with Headings

* You can define allHTML headings

,<h1>through<h6> In the same way you

define in simple HTML document.
* can use the<small>tag or<span>tag
with.smallclass to display the secondary text of
any heading in a smaller and lighter variation.

*Typography

* Creating Page Headers

* make your<h1>heading appear differently than

rest of the headings on a page

* Bootstrap Text Formatting

* Text Emphasis Classes

* Creating a Simple Table with Bootstrap

* adding the Bootstrap's class.tableto the<table>

element

*Table

* Tables with Striped Rows

* adding the Bootstrap's class.table-stripedto

the.tablebase class.

* Table with Borders on All Sides

* adding an extra Bootstrap's class.tableborderedto the.tablebase class.

* Enable Hover State on Table Rows

* adding the Bootstrap's class.table-hoverto

the.tablebase class.

* Optional Emphasis Classes for Table Rows

* emphasize the row or individual cells data like

success, warning, danger, etc. through coloring

its background.

* Creating Vertical Form Layout

*Forms

* Creating Horizontal Form Layout

* labels are right aligned and floated to left to make

them appear on the same line as form controls.
* Steps to achieve this layout are listed below:

* Add the class.form-horizontalto the<form>element.

* Wrap labels and form controls in a<div>element and
apply the class.form-group.
* Use Bootstrap's predefinedgrid classesto align labels
and form controls.
* Add the class.control-labelto the<label>element.

* Placing Help Text around Form Controls

* guide users to enter the correct data in a form.

* place block level help text for the form controls
using the class.help-block.

* Bootstrap Form Validation States

* styling input controls to present different

validation states.
* includes validation styles for error, warning, and
success messages.

*Buttons

* Changing the Sizes of Buttons

* make buttons larger or smaller through adding an

extra class.btn-lg,.btn-sm, or.btn-xs.

* Bootstrap Disabled Buttons

* adding the class.disabled

* Creating Basic Tabs with Bootstrap

*Nav Components

* Adding Icons to Tabs

* Creating Basic Pills Nav with Bootstrap

* using the base class.nav-pillsinstead of.navtabs, without any further change in markup.

* Creating Tabs with Dropdowns

* The four CSS classes.dropdown,.dropdown-

toggle,.dropdown-menuand.caretare required
in addition to the.nav,.nav-tabs,.nav-pillsto
create a simple dropdown menu.

* create responsive navigation header for your

website or application.
* These responsive navbar initially collapsed on
devices having small viewports like cell-phones
but expand when user click the toggle button.
* it will be horizontal as normal on the medium
and large devices like laptop or desktop.

*Navbar