Twitter Bootstrap presentation by Aneesh Alidina 21st June 2013. Learn how you can use Twitter Bootstrap to build beautiful websites and web apps.

1. Twitter Bootstrap
A powerful front-end framework for faster and easier
web development and web apps.
Aneesh Alidina
www.aneesh.co
@aneeshalidina

2. Developed Aug 2011 by small group of Twitter employees
(Mark Otto and Jacob Thornton)
Most popular Github project on the web
Background

3. Provides a clean and uniform solution for building an
interface for developers.
User Interface Framework (JS, CSS and Images)
Open Source project
Supports all major browsers incl. IE7
Supports HTML5 and CSS3
Beautiful and functional built-in components which
are easy to customise
Why should I use bootstrap?

4. Twitter Bootstrap can be used to speed up website/app
development process. It utilises LESS CSS (http://lesscss.org/)
Dropdown menus
Buttons
Navbars
Breadcrumbs
Pagination
Label and badges
Thumbnails
Carousel
Alerts and more
Bootstrap Features

5. Customise and download
http://twitter.github.io/bootstrap/

6. Bootstrap package whats included
Scaffolding – background, link styles, grid system
Base CSS files – common style for HTML elements like
typography, code, tables, forms and icon set
Components – basic styles for common interface, like
tabs, navbars, page headers etc.
Javascript plugins – interactive components like
popovers, modals and more

7. Bootstrap examples - homepage

8. Bootstrap examples – landing page

9. Bootstrap examples – forms

10. Responsive 12 column grids, layouts and components
<div class= “row”>
<div class = “span4”>…</div>
<div class = “span8”>…</div>
</div>
Scaffolding: The Grid System

11. To start, navbars are static (not fixed to the top) and
include support for a project name and basic navigation.
Place one anywhere within a .container, which sets the
width of your site and content.
<div class="navbar">
<div class="navbar-inner">
<a class="brand" href="#">Title</a>
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
</div>
Using bootstrap
Basic Navbar example

12. Toyota.com
NASA (http://code.nasa.gov/)
1000’s websites and it’s also great for prototyping
Bootstrap with Joomla 3.0
Personal websites: www.aneesh.co
Built with bootstrap – who uses it

13. Playground for bootstrap:
http://www.bootply.com/
Saving the world from default bootstrap:
http://www.bootswatch.com
Wordpress Bootstrap:
http://320press.com/wpbs/
Cool Resources

14. Questions?