• Like
Twitter Bootstrap Presentation
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Twitter Bootstrap Presentation


Twitter Bootstrap presentation by Aneesh Alidina …

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

Published in Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads


Total Views
On SlideShare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 1. Twitter BootstrapA powerful front-end framework for faster and easierweb development and web apps.Aneesh Alidinawww.aneesh.co@aneeshalidina
  • 2. Developed Aug 2011 by small group of Twitter employees(Mark Otto and Jacob Thornton)Most popular Github project on the webBackground
  • 3. Provides a clean and uniform solution for building aninterface for developers.User Interface Framework (JS, CSS and Images)Open Source projectSupports all major browsers incl. IE7Supports HTML5 and CSS3Beautiful and functional built-in components whichare easy to customiseWhy should I use bootstrap?
  • 4. Twitter Bootstrap can be used to speed up website/appdevelopment process. It utilises LESS CSS (http://lesscss.org/)Dropdown menusButtonsNavbarsBreadcrumbsPaginationLabel and badgesThumbnailsCarouselAlerts and moreBootstrap Features
  • 5. Customise and downloadhttp://twitter.github.io/bootstrap/
  • 6. Bootstrap package whats includedScaffolding – background, link styles, grid systemBase CSS files – common style for HTML elements liketypography, code, tables, forms and icon setComponents – basic styles for common interface, liketabs, navbars, page headers etc.Javascript plugins – interactive components likepopovers, 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) andinclude support for a project name and basic navigation.Place one anywhere within a .container, which sets thewidth 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 bootstrapBasic Navbar example
  • 12. Toyota.comNASA (http://code.nasa.gov/)1000’s websites and it’s also great for prototypingBootstrap with Joomla 3.0Personal websites: www.aneesh.coBuilt with bootstrap – who uses it
  • 13. Playground for bootstrap:http://www.bootply.com/Saving the world from default bootstrap:http://www.bootswatch.comWordpress Bootstrap:http://320press.com/wpbs/Cool Resources
  • 14. Questions?