Bootstrap is the most popular HTML,

CSS, and Java Script

framework for developing responsive,
mobile-first websites.
 WHAT IS BOOTSTRAP?
 BOOTSTRAP HISTORY
 WHY USE BOOTSTRAP?
 HOW TO DOWNLOAD?
 HOW TO WORK ON BOOTSTRAP?
 TOPICS OF BOOTSTRAP AND HOW TO USE
 RESOURCES
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
History of Bootstrap:-
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!
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, Edge, Safari, and Opera)
How to Download Bootstrap:-
 Download Bootstrap from www.getbootstrap.com
 Check the bootstrap version (v 3.3.7)
 Click on the large Download Bootstrap button.
 Locate the download file and unzip or extract it. You should get a
folder named simply bootstrap.
 Use a editor for write code.
 Download Sublime from www.sublimetext.com
How to link CSS and Java script file:-
 TOPICS OF
BOOTSTRAP

1. Grid system 9. Alert 17. Navbar menu

2. Container 10. Glyphicons 18.Dropdown menu
3. Jumbotron 11. label 19. Form
4. Page Header 12. Pagistion 20.
5. Typography 13. Pager 21.
6. Tables 14. List group 22.Model
7. Button group 15. Panel 23.Tooltip
8. Well 16. Tabs and pills menu 24.Popover
Grid classes:-
 XS for phone (extra small) How to grid
work?
 SM for tablet(small)
 MD for desktop(medium)
 LG for large desktop
 Container :-
Container is used to create boxed content.
1. Container-(Box layout or margin)
2. Container –fluid –(screen layout)

Jumbotron :-
A Jumbotron is displayed as a grey box with rounded corners. It also
large fonts sizes of text insides it. Use <div> element with class.
Page – Header class adds a horizontal line under the heading.


Bootstrap includes simple and easy customized typography for
headings , body ,list text.


Bootstrap table has a light padding and only horizontal dividers.
Bootstrap provide three styles of images.
Img- rounded, img-circle, img-thumbnail


Responsive images automatically adjust to fit the size of the screen.


Well class adds a rounded border with a gray background color
and some padding.
Bootstrap provides seven styles of buttons.
.btn
.btn-default
.btn-primary
.btn-success
.btn-info
.btn-warning
.btn-danger
.btn-link

Bootstrap allows you to group a series of buttons together.
Use class btn-group
Bootstrap provide an easy way to create predefined alert messages.
Alert created with alert class
Alert-success, alert-info , alert-warning, alert-danger
So download JQuery file and link

To close the alert message, add a .alert- dismissable class to the alert container.

Glyphicon are basically little symbol, icons bootstrap provides 260
Glypicons.
www.getbootstrap.com/components/
Accessiable icon(copy)
Syntax -<span class=“glyphicon glyphicon-name”></span>