Bootstrap FrameworkThe most popular responsive, mobile-first HTML5 and CSS3 framework

Guy Romelle MagayanoFreelance Web Developer/Web Designer

What is Bootstrap? Free front-end framework for faster and

easier web development Bootstrap includes HTML and CSS for typography, forms, buttons, tables, navigation, image carousels…

Optional JavaScript plugins Ability to easily create responsive designs

FeaturesBootstrap Main Features

Features • Grid System• CSS Components (e.g. Buttons, Tabs,

Breadcrumb, Pagination, Alerts, Progress Bars, Dropdowns, Input, Navbar, Page header, etc. )

• CSS Variables (LESS and SASS)• Built-in Javascript plugins and other compatible

JS plugins• Various typography features (e.g. Headings,

Paragraph texts, etc. )• Web-based Customizer

Brief HistoryBootstrap Origins

Brief History

• Developed by Mark Otto and Jacob Thornton at Twitter

• Released as an open source product in August 2011

• Currently on version 3• Popularity and usage is rising

Pros and ConsBootstrap: The Good. The Bad.

Bootstrap: Pros

Save time: Uses predefined design templates and classes

Responsive features Consistent design across

elements Easy to use Compatible with all

modern browsers Open Source: Free to

download and use

Bootstrap: Cons

• DIV-heavy code (as in <div></div>)

• Relies on classes extensively• Source code can be rather

complex• Larger CSS and JS files can

cause some loading lag time• Popularity means lots of

sites are using it… may want to customize to stand out

Demo/s (*sort of)InstallationHow to use grids and containers?Other great features

Headings

Paragraphs

Links and Buttons

Formatting Options

Many other classes exist for: Inline text elements Alignment classes Transformation classes Abbreviations Addresses Blockquotes

Interested in Getting More?

Check out the Bootstrap website at getbootstrap.com