1. Twitter Bootstrap
By – Rajesh Bhansali – bhansali.rajesh.n@gmail.com

2. INTRODUCTION – By nerds, for nerds
• Twitter Bootstrap is used to speed up the
development of new websites and web applications, and
is open-sourced on GitHub. It utilizes LESS CSS and is
compiled via Node.
• With Bootstrap you can create HTML & CSS-based
design templates that look and behave great in latest
desktop, tablets & smartphone browsers by making use
of responsive CSS.

3. ORIGIN – When it began
• Bootstrap was released in August 2011 by Twitter
• It is developed by Mark Otto @mdo and Jacob
Thornton @fat at Twitter
• Their idea was to develop a frontend UI framework to
encourage consistency across internal tools and speed
up the development of new websites.
• The latest version of Bootstrap is 2.3.0

4. POPULARITY – Bootstrap is widely accepted
• On Github ,Bootstrap is the most popular starred and
popular forked repositories even leaving behind the likes
of Nodejs, jQuery, HTML5-Boilerplate, Backbone to
name a few
• Some popular examples of websites built with Bootstrap
available at visit the unofficial Tumblr, browse the
examples
• Joomla 3.0 uses Bootstrap
• Themeforest is a very popular template provider. It has
over 200 Bootstrap themes available for various CMSs
such as Wordpress, Joomla and Drupal. Woothemes
also uses Bootstrap

5. BUILT WITH BOOTSTRAP – Used by the best
• Toyota.com - Needs no introduction
• Appster – Fastest growing mobile firm in Australia
• Quicklinkr - A home for all of your favorites
• Open Cooks – Website for food lovers
• Football Manager – Gaming website
• Fleetio – Online vehicle management
• Honest code –Create modern, accessible & searchable
websites

6. PACKAGE – What’s included in Bootstrap?
• Scaffolding: Global styles for the body to reset type and
background, link styles, grid system, and two simple
layouts.
• Base CSS: Styles for common HTML elements like
typography, code, tables, forms, buttons & plus
includes Glyphicons, icon set.
• Components: Basic styles for common interface
components like tabs and pills, navbar, alerts, page
headers, and more.
• Javascript plugins: Similar to Components, these
JavaScript plugins are interactive components for things
like tooltips, popovers, modals, and more.

7. WHAT IT'S NOT – Make no mistake
• Don’t mistake it to be a tool to make a browser support
HTML5
• There is incomplete support for HTML5 and CSS3 even
though Bootstrap itself is compatible with all major
browsers
• Contains CSS3 styles for rounded corners, gradients &
shadows.
• You may include html5shiv to add basic support for
HTML5 elements in older IE browsers <!--[if lt IE 9]> <script
src="//html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->
• Or use Modernizr in your project to detect browser
features and create fallbacks for them including those of

8. GET STARTED – Let's do something with it
• Using ready made examples available to us on the
Bootstrap website we will now try to create a responsive
fluid layout right from downloading it to customizing it for
a project.
• While doing this will also explore the original website,
refer the original documentation and thereby get
familiarized with it by going through some of the
categories visible at the top of the Bootstrap
documentation.
• And also see how Open Cooks uses Bootstrap and
explore a bit of it’s code.

9. DRAWBACK – Be careful with fonts
• One obvious drawback of using Bootstrap is that it
provides fixed font sizes(pixels) instead of relative font
sizes(ems) which is results in a failure of accessibility
guideline C14 (WCAG2.0)
• The debate and explanation given by Mark Otto can be
read here which is not completely convincing. In version
3.0 of Bootstrap we can expect fonts to be relatively
defined.
• For your projects where you make use of Bootstrap
always prefer to override Bootstrap’s fixed font sizes
and properties with relative units.

10. RESOURCES – Few resources to look at
Few Bootstrap resources to look at:
• https://wrapbootstrap.com/
Make money from your Bootstrap developments
• http://bootswatch.com/
Download easy to install CSS files to replace the original
• http://jumpstartui.com/
Ready made design themes
• http://stylebootstrap.info/
Interactive Bootstrap customization
• http://320press.com/wpbs/
Ready made WordPress theme that has all the same
features as Twitter’s Bootstrap.

11. DECIDE – Using Bootstrap is a great choice
• Is free! Saves you time & money. Implementation is
easy.
• Simple and powerful grid system
• Gives you free CSS styles such as animated buttons,
icons, static navigation bars, and image thumbnails.
• Inbuilt jQuery Plugins to add interactivity to websites
• Best is you can make a responsive website for all
devices
• Being open sourced on GitHub anyone can contribute

12. Thank you!