This document provides an overview of Bootstrap, an open-source front-end framework for building responsive, mobile-first websites and web applications. It discusses Bootstrap's history, key features including its CSS and JavaScript components, grid system, and how it enables responsive design. Specific components like progress bars, modals, and glyphs are demonstrated. The document is intended to introduce developers to Bootstrap and provide examples of how its various features can be used.

1. SLIDE TITLE
 Click to edit Master text styles
 Second level
 Third level
 Fourth level
 Fifth level
By Shreel Desai
Bootstrap

2. SLIDE TITLE
 Click to edit Master text styles
 Second level
 Third level
 Fourth level
 Fifth level
 Overview
 History Of Bootstrap
 Why use Bootstrap ?
 Bootstrap with Examples
 Responsive Bootstrap
Agenda
2© 2014 KNOWARTH

3. SLIDE TITLE
 Click to edit Master text styles
– Second level
– Third level
• Fourth level
– Fifth level
OVERVIEW

4. SLIDE TITLE
 Click to edit Master text styles
 Second level
 Third level
 Fourth level
 Fifth level
Bootstrap Overview
4© 2014 KNOWARTH
• Bootstrap is a front-end framework for faster & easier
web development.
• Standards Based :
- HTML
- CSS
- JavaScript
• Browser Support :
- All Modern Browsers
• Bootstrap makes the job of a web developer easy,
who is not an expert in CSS

5. SLIDE TITLE
 Click to edit Master text styles
– Second level
– Third level
• Fourth level
– Fifth level
HISTORY

6. SLIDE TITLE
 Click to edit Master text styles
 Second level
 Third level
 Fourth level
 Fifth level
History of Bootstrap
6© 2014 KNOWARTH
• An Open Source framework
• Creators – MARK OTTO & JACOB THORNTON – Ex-
Employees at Twitter
• Launched in August 2011, and is popular since then.
• It has evolved from being an entirely CSS-driven
project to include a host of JavaScript plugins & icons.

7. SLIDE TITLE
 Click to edit Master text styles
– Second level
– Third level
• Fourth level
– Fifth level
WHY BOOTSTRAP ?

8. SLIDE TITLE
 Click to edit Master text styles
 Second level
 Third level
 Fourth level
 Fifth level
Easy to start – download & use
Easy to use & Saves time
Good & Flexible layout system (Grid)
Mobile-First Responsive Web Design
Styling for almost all HTML elements
Extensive list of components
Very nice list of Icons as fonts
Extensible via JavaScript plugins
Why use Bootstrap ?
8© 2014 KNOWARTH

9. SLIDE TITLE
 Click to edit Master text styles
– Second level
– Third level
• Fourth level
– Fifth level
BOOTSTRAP - Examples

10. SLIDE TITLE
 Click to edit Master text styles
 Second level
 Third level
 Fourth level
 Fifth level
Where to Start ?
10© 2014 KNOWARTH
• http://getbootstrap.com
• Include :
- Bootstrap[.min].css
- Bootstrap-theme[.min].css
• Done !!

11. SLIDE TITLE
 Click to edit Master text styles
 Second level
 Third level
 Fourth level
 Fifth level
Structure
11© 2014 KNOWARTH
• Bootstrap Folder Structure :-

12. SLIDE TITLE
 Click to edit Master text styles
– Second level
– Third level
• Fourth level
– Fifth level
BOOTSTRAP'S CSS

13. SLIDE TITLE
 Click to edit Master text styles
 Second level
 Third level
 Fourth level
 Fifth level
 Grid system
 Typography
 Code
 Tables
 Forms
Bootstrap's CSS - Features
13© 2014 KNOWARTH
Buttons
Images
Helper Classes
Responsive Utilities

14. SLIDE TITLE
 Click to edit Master text styles
 Second level
 Third level
 Fourth level
 Fifth level
 HTML5
doctype :
Bootstrap's CSS - Overview
14© 2014 KNOWARTH
• Bootstrap makes use of certain HTML elements & CSS
properties that require the use of the HTML5 doctype.
Include the following code at the beginning of all your
projects :

15. SLIDE TITLE
 Click to edit Master text styles
 Second level
 Third level
 Fourth level
 Fifth level
 Containers :
Bootstrap's CSS - Overview
15© 2014 KNOWARTH
• Use .container for a responsive fixed width container :
• Use .container-fluid for a full width container :

16. SLIDE TITLE
 Click to edit Master text styles
 Second level
 Third level
 Fourth level
 Fifth level
Bootstrap's CSS - Grid System
16© 2014 KNOWARTH
• Bootstrap includes a responsive, mobile-first fluid grid
system that approximately scales upto 12 columns :

17. SLIDE TITLE
 Click to edit Master text styles
 Second level
 Third level
 Fourth level
 Fifth level
Bootstrap's CSS - Typography
17© 2014 KNOWARTH
• Headings : Classes .h1 through .h6 are available
• Transformation Classes :
- .text-uppercase
- .text-lowercase
- .text-capitalize
• Alignment classes :
- .text-left
- .text-right
- .text-center
- .text-justify

18. SLIDE TITLE
 Click to edit Master text styles
 Second level
 Third level
 Fourth level
 Fifth level
Bootstrap's CSS - Continued
18© 2014 KNOWARTH
• Similarly, Bootstrap has classes for TABLE like .table,
.table-bordered, .table-hover then classes like
.active, .success could be applied on table rows or
individual cells
• Examples of Bootstrap's FORM classes : .form-inline,
.checkbox, .radio, .radio-inline, .disabled ...
• For BUTTONS, classes like .btn, .btn-lg, .btn-primary,
.btn-link are provided by Bootstrap
• Classes like .img-responsive, .img-rounded, img-circle,
img-thumbnail are for Bootstrap's IMAGES

19. SLIDE TITLE
 Click to edit Master text styles
 Second level
 Third level
 Fourth level
 Fifth level
Bootstrap's CSS - Continued
19© 2014 KNOWARTH
• Classes like .text-success, .text-primary, .bg-danger are
examples of HELPER CLASSES
• RESPONSIVE UTILITIES :

20. SLIDE TITLE
 Click to edit Master text styles
– Second level
– Third level
• Fourth level
– Fifth level
BOOTSTRAP'S COMPONENTS

21. SLIDE TITLE
 Click to edit Master text styles
 Second level
 Third level
 Fourth level
 Fifth level
 Glyphicons
 Dropdowns
 Button groups
 Button dropdowns
 Input groups
 Navs
 Navbar
 Breadcrumbs
Bootstrap's Components
21© 2014 KNOWARTH
Pagination
Labels
Badges
Jumbotron
Page header
Thumbnails
Alerts
Progress bars

22. SLIDE TITLE
 Click to edit Master text styles
 Second level
 Third level
 Fourth level
 Fifth level
 Media Object
 List group
 Panels
 Responsive embed
 Wells
Bootstrap's Components
22© 2014 KNOWARTH

23. SLIDE TITLE
 Click to edit Master text styles
 Second level
 Third level
 Fourth level
 Fifth level
Bootstrap's Components - Glyphicons
23© 2014 KNOWARTH
• Includes 200 glyphs
• Don't mix with other components
• Only for use on empty elements
• Avoid changing the icon font location
• For performance reasons, all icons require a base class
and individual icon class.
• Example :

24. SLIDE TITLE
 Click to edit Master text styles
 Second level
 Third level
 Fourth level
 Fifth level
 Progress bar with label :
Bootstrap's Components - Progress bars
24© 2014 KNOWARTH
• Code :
• Result :

25. SLIDE TITLE
 Click to edit Master text styles
 Second level
 Third level
 Fourth level
 Fifth level
 Stripped Progress bar :
Bootstrap's Components - Progress bars
25© 2014 KNOWARTH
• Code :
• Result :
• Similarly, Bootstrap has many such components as
listed earlier.

26. SLIDE TITLE
 Click to edit Master text styles
– Second level
– Third level
• Fourth level
– Fifth level
BOOTSTRAP'S JAVASCRIPT

27. SLIDE TITLE
 Click to edit Master text styles
 Second level
 Third level
 Fourth level
 Fifth level
 Transitions
 Modal
 Dropdown
 Scrollspy
 Tab
 Tooltip
Bootstrap's jQuery Plugins
27© 2014 KNOWARTH
Popover
Alert
Button
Collapse
Carousel
Affix

28. SLIDE TITLE
 Click to edit Master text styles
 Second level
 Third level
 Fourth level
 Fifth level
 Using the compiled JavaSacript :
Bootstrap's JQuery - Overview
28© 2014 KNOWARTH
• Both bootstrap.js & bootstrap.min.js contain all plugins
in a single file. Include any one.
 Component data attributes :
 Plugin Dependencies
• Don't use data attributes from multiple plugins on the
same element.

29. SLIDE TITLE
 Click to edit Master text styles
 Second level
 Third level
 Fourth level
 Fifth level
 Example :
Bootstrap's Jquery - Modal
29© 2014 KNOWARTH
• Code :

30. SLIDE TITLE
 Click to edit Master text styles
 Second level
 Third level
 Fourth level
 Fifth level
 Example :
Bootstrap's Jquery - Modal
30© 2014 KNOWARTH
• Result :
• Similarly, there are many such jQuery plugins as listed
earlier.

31. SLIDE TITLE
 Click to edit Master text styles
– Second level
– Third level
• Fourth level
– Fifth level
RESPONSIVE BOOTSTRAP

32. SLIDE TITLE
 Click to edit Master text styles
 Second level
 Third level
 Fourth level
 Fifth level
Responsive Bootstrap
32© 2014 KNOWARTH
• V 2.3.x supported optional responsive design
• It was not mobile first
• V 3.0 is mobile first from the start
• To ensure proper rendering & touch zooming, add the
VIEWPORT META tag
• Disable zooming capabilities on mobile devices by
adding USER-SCALABLE = NO
• Images in Bootstrap 3 can be made responsive
friendly via the addition of the .img-responsive class

33. SLIDE TITLE
 Click to edit Master text styles
– Second level
– Third level
• Fourth level
– Fifth level
Queries & Questions

34. SLIDE TITLE
 Click to edit Master text styles
 Second level
 Third level
 Fourth level
 Fifth level
By Shreel Desai
e shreel.desai@knowarth.com
THANK YOU