The document is a presentation by Sakshi Arora on Twitter Bootstrap, a popular open-source front-end framework for web development that enables responsive design using HTML, CSS, and JavaScript. It highlights the advantages of Bootstrap, including its ease of use, customization options, and support for various devices through a 12-column grid system. The presentation also provides links for further reading and understanding of Bootstrap features and components.

1. BOOTSTRAP
Presenter: SAKSHI ARORA, Mindfire Solutions
Date: 10/July/2014

2. Presenter: Sakshi Arora, Mindfire Solutions
Bootstrap Introduction

Twitter Bootstrap is the most popular front end
framework for faster and easier web development.

Allows user to develop responsive application
using HTML, CSS and Javascript.

Bootstrap was developed by Mark Otto and Jacob
Thornton at Twitter.

It is an open source product.

Download bootstrap toolkit from following link:
http://getbootstrap.com/

3. Presenter: Sakshi Arora, Mindfire Solutions
Why use Bootstrap?

Open source toolkit.

It supports responsive web design.

4. How it ensures responsiveness?
Bootstrap targets 4 devices on basis on pixel
value:
Mobile Phones
(<768px)
Tablets
(>=768px)
Medium Desktop
Devices
(>=992px)
Large Desktop
Devices
(>=1200px)
Media queries are written on basis of these pixel
value(refer to bootstrap css).
Presenter: Sakshi Arora, Mindfire Solutions

5. Why use Bootstrap?(cont..)

Easy to use.

Saves development time.

It allows user to customize inbuilt css classes.

Mobile first approach.

Supported by popular browsers.
Presenter: Sakshi Arora, Mindfire Solutions

6. Bootstrap Grid System
Presenter: Sakshi Arora, Mindfire Solutions

Rows must be placed within a .container (fixed-
width) for proper alignment and padding.

Rows can be created via .row css class.

Column css classes are used for creating columns
in rows.

Bootstrap grid system span across 12 columns of
screen.

7. Bootstrap 12 column layout is shown below:
Bootstrap Grid System
Presenter: Sakshi Arora, Mindfire Solutions
.container css class
.row
css
class
eg:
.col-xs-1
(refer next
slide)

8. Bootstrap Grid System
Grid Options available
Presenter: Sakshi Arora, Mindfire Solutions
Heading Extra small
devices
Phones
(<768px)
Small devices
Tablets (≥768px)
Medium devices
Desktops
(≥992px)
Large devices
Desktops
(≥1200px)
Container
Class
None
(auto)
750px 970px 1170px
Column
Class
.col-xs-* .col-sm-* .col-md-* .col-lg-*

9. Bootstrap Grid System
Presenter: Sakshi Arora, Mindfire Solutions

* is value between 1 and 12.

Using col-md-* will apply specified column
layout to medium desktop and large devices
but not on extra small(phone) and small
devices(tablets). Phone and tablets will have
vertical alignment.

Using col-xs-* will apply specified column
layout on all devices.

10. Grid System Example

Example:
<div class=”container”>
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
</div>

Output:
Presenter: Sakshi Arora, Mindfire Solutions
.col-md-6 .col-md-6

11. Bootstrap Toolkit

CSS classes available for Navigation Bar,
Carousel, Modal Dialog, Buttons, Labels,
Panels, Forms, Tabs, ProgressBar and many
more. They form part of bootstrap css.

Then there are no. of Javascript methods and
events available for Modals, Dropdown,
Scrollspy, Tabs and many more. They form
part of bootstrap js.

There are glyphicons available in fonts folder
of toolkit.
Refer to next page reference links to have
detailed study.
Presenter: Sakshi Arora, Mindfire Solutions

12. http://www.tutorialspoint.com/bootstrap/
Presenter: Sakshi Arora, Mindfire Solutions
http://www.tutorialspark.com/twitterBootstrap/TwitterBootstrap_Modals.php
http://getbootstrap.com/

13. Presenter: Sakshi Arora, Mindfire Solutions
Thank you