Sleek, intuitive, and powerful mobile first
front-end framework for faster and easier
What is Bootstrap?
● Bootstrap is an open source product from
Mark Otto and Jacob Thornton who, when
it was initially released, were both
employees at Twitter.
● There was a need to standardize the
frontend toolsets of engineers across the
What is Bootstrap?
● Since Bootstrap launched in August 2011,
it has taken off in popularity.
● It has evolved from being an entirely CSS-
driven project to include a host of
● Getting started with Bootstrap is as simple
the root of your site:
● Customize variables, components,
● The fastest way to get Bootstrap is to
download the compiled and minified
with the included fonts. No
documentation or original source files are
Content Delivery Network
● The folks over at NetDNA have graciously
provided CDN support for Bootstrap's CSS
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
● If you download the original files, you
need to compile Bootstrap's LESS files into
usable CSS. To do that, Bootstrap only
officially supports Recess, Twitter's CSS
hinter built on top of less.js.
│ ├── bootstrap.css
│ ├── bootstrap.min.css
│ ├── bootstrap-theme.css
│ ├── bootstrap-theme.min.css
│ ├── bootstrap.js
│ ├── bootstrap.min.js
● This is the most basic
form of Bootstrap:
compiled files for
quick drop-in usage
in nearly any web
● Please note that all
require jQuery to be
● Global CSS settings, fundamental HTML
elements styled and enhanced with
extensible classes, and an advanced grid
● Bootstrap makes use of certain HTML
elements and CSS properties that require
the use of the HTML5 doctype.
● Bootstrap 3 is mobile first.
● To ensure proper rendering and touch
zooming, add the viewport meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0" >
<meta name="viewport" content="width=device-width, initial-scale=1.0,
maximum-scale=1.0, user-scalable=no" >
● 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. This applies max-
width: 100%; and height: auto; to the image
so that it scales nicely to the parent
<img src="..." class="img-responsive" alt="Responsive image" >
Typography and links
● Bootstrap sets basic global display,
typography, and link styles. These styles
can be found within scaffolding.less.
● Normalize.css is a modern, HTML5-ready
alternative to CSS resets.
● Normalize.css is a small CSS file that
provides better cross-browser consistency
in the default styling of HTML elements.
● Bootstrap includes a responsive, mobile
first fluid grid system that appropriately
scales up to 12 columns as the device or
viewport size increases.