This presentation focuses on the concept of creating responsive design via Bootstrap. In addition it also tries to explain various css classes available in Bootstrap.

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