1. Introduction to
Twitter Bootstrap
Pragnesh Vaghela | @technologythree | technologythree.com

2. Why Responsive Design?
1. A single URL for a piece of content makes it easier for your users to
interact with, share, and link to your content
2. No redirection is needed for users to get to the device-optimized view,
which reduces loading time. Also, user agent-based redirection is error-
prone and can degrade your site's user experience
@ 2013 Technology Three 2

3. Google’s recommended configuration
Sites that use responsive web design, i.e. sites that
serve all devices on the same set of URLs, with each
URL serving the same HTML to all devices and using
just CSS to change how the page is rendered on the
device
@ 2013 Technology Three 3

4. Is it that easy?
1. don’t underestimate the amount of time it takes to build a
responsive site
2. it’s painstaking design and user experience work upfront
3. need to consider all iterations device type, screen size,
orientation – portrait, landscape
4. took Time.com 9 months to redesign start to finish
5. cost Fathead $250,000 - 1,500 staff hours over 3 months
@ 2013 Technology Three 4

5. Twitter Bootstrap
1. made to not only look and behave great in the latest desktop
browsers (as well as IE7!), but in tablet and smartphone
browsers via responsive CSS
2. built at Twitter by @mdo and @fat
3. code licensed under Apache License v2.0
@ 2013 Technology Three 5

6. Bootstrap features
1. 12-column responsive grid
2. dozens of components
3. javaScript plugins
4. typography
5. form controls
6. web-based customizer
@ 2013 Technology Three 6

7. 12-column Responsive Grid
1. 940px wide container without responsive features enabled
2. with responsive CSS grid adapts to be 724px and 1170px
wide depending on your viewport
3. below 767px viewports, the columns become fluid and stack
vertically
4. media queries allow for custom CSS based on a number of
conditions—ratios, widths, display type, etc—but usually
focuses around
min-width and max-width
@ 2013 Technology Three 7

8. Supported Devices
Supports a handful of media queries in a single
file to help make your projects more appropriate
on different devices and screen resolutions
@ 2013 Technology Three 8

9. Responsive Utility Classes
Has utility classes for showing and hiding content by device.
Below is a table of the available classes and their effect on a
given media query layout (labeled by device)
@ 2013 Technology Three 9

10. Dozens of Reusable Components
1. dropdowns
2. button groups and dropdowns
3. navbars
4. breadcrumbs
5. pagination
6. typography
7. thumbnails, alerts, progress bars and more
@ 2013 Technology Three 10

11. 13 custom jQuery plugins
plugins can be included individually or all at once
1. transitions
2. modals
3. dropdown
4. scrollspy
5. tab
6. tooltip
7. popover
8. alert, button, collapse, carousel, typeahead and affix
@ 2013 Technology Three 11

12. Thank You
Pragnesh Vaghela | @technologythree | technologythree.com