Bootstrap (www.getbootstrap.com) is a sleek, intuitive, and powerful open source front-end framework for faster and easier web development. After it's initial release in August 2011, it quick gained popularity in the web development community and currently it's the most popular project on GitHub. Numerous projects, components and tools are build around it and both small and big companies are using it. Get introduced to Bootstrap and the ecosystem around it. Your front-end development will never be the same again!

1. Ready? Bootstrap! Go!
ColdFusion UserGroup Belgium
24/04/2013
Bootstrap
Sleek, intuitive, and powerful front-end framework
for faster and easier web development.

2. 2
• Guust Nieuwenhuis
• Analyst Programmer at Orange Lark
• Adobe Community Professional
• CFUG Belgium co-manager
• ColdFusion CAB member
• Scotch on the Rocks CAB member
About me

3. ... I can’t design!
I have to confess...

4. What?
Why?
Bootstrap?

5. • Web UI Framework
• CSS, images, icons, JavaScript
• Started at Twitter
• By nerds (@mdo and @fat)
• For nerds (you and me!)
• Open Source (Apache License v2.0) since August 2011
• Version 2.3.1
What?

6. What?
• Some GitHub stats...
• Forked: 14.747 (#1)
• Starred: 48.841 (#1)
• Pull request: 7.642
• Closed Issues: 7.449
on April 21th 2013

7. Why?
• Grid System
• Fixed or Fluid
• Configurable
• Components
• Custom jQuery plugins
• Responsive
• LESS

8. Features
Get Started
Scaffolding
Base CSS
Components
jQuery Plugins

9. Get started
• Download
• Compiled
• Source
• Customize
• File Structure
• HTML Template
• Examples

10. Scaffolding
• Grid system
• Fixed
• Fluid
• Layout
• Fixed
• Fluid
• Responsive design

11. Base CSS
• Typography
• Code
• Tables
• Forms
• Buttons
• Images
• Icons

12. Components
• Dropdowns
• Button groups
• Button dropdowns
• Navigational tabs, pills, and lists
• Navbar
• Breadcrumbs
• Pagination
• Labels & Badges
• Page headers and hero unit
• Thumbnails
• Alerts
• Progress bars

13. jQuery Plugins
• Transitions
• Modals
• Dropdowns
• ScrollSpy
• Togglable tabs
• Tooltips
• Popovers
• Alert messages
• Buttons
• Collapse
• Carousel
• Typeahead
• Affix

14. Demo’s
Examples
Built with

15. The future of Bootstrap
Bootstrap v3

16. Bootstrap v3
• Switch to the MIT license
• Components
• List groups (new)
• Panels (new
• Carousel (redesign)
• Modals (redesign for mobile first)

17. Bootstrap v3
• Drop legacy code
• Drop IE7/FF3x support entirely
• Improve responsive CSS
• Mobile first, all CSS in one file
• Use the @font-face version of Glyphicons

18. Bootstrap v3
• Centralize community efforts
• New GitHub organization
• Strengthening the community
• Growing the team
• New URLs
• And more: https://github.com/twitter/bootstrap/pull/6342

19. The Bootstrap ecosystem
Themes
Theme Builders
Components
Tools
Even more...

20. Themes
• Bootswatch (http://bootswatch.com)
• {wrap}bootstrap (http://wrapbootstrap.com)
• Flat UI (http://designmodo.github.io/Flat-UI/)
• Geo for Bootstrap (http://divshot.github.io/geo-bootstrap/)

21. Themes Builders
• Bootstrap Customize (http://twitter.github.io/bootstrap/customize.html)
• StyleBootstrap.info (http://stylebootstrap.info)
• Boostrap Magic (http://pikock.github.io/bootstrap-magic/)
• PaintStrap (http://paintstrap.com)

22. Components
• jQuery UI Bootstrap (http://addyosmani.github.io/jquery-ui-bootstrap/)
• Datepicker (https://github.com/eternicode/bootstrap-datepicker)
• Select2 (http://ivaynberg.github.io/select2/)
• X-editable (http://vitalets.github.io/x-editable/)
• Bootstrap Switch (http://www.larentis.eu/switch/)
• File Uploader (http://blueimp.github.io/jQuery-File-Upload/)
• Bootstro.js (http://clu3.github.io/bootstro.js/)

23. Tools
• Design
• Bootstrap PSD (http://gui.repixdesign.com/#bootstrap)
• Bootstrap Fireworks toolkit (http://www.fireworkstoolkits.com/toolkits/
bootstrap-2/)
• Content Delivery Network
• BootstrapCDN (http://www.bootstrapcdn.com)

24. Tools
• Snippets
• Bootsnipp (http://bootsnipp.com)
• Prototyping
• Jetstrap (http://jetstrap.com)
• Divshot (http://www.divshot.com)
• Pingendo (http://www.pingendo.com)
• Layoutit! (http://www.layoutit.com/)

25. Even more...
• Bootsnipp resources list
• http://bootsnipp.com/resources
• Bootstrap Hero resources list
• http://bootstraphero.com/the-big-badass-list-of-twitter-bootstrap-
resources
• Twitter Bootstrap Web Development How-To
• http://www.packtpub.com/twitter-bootstrap-web-development/book

26. Contact me!
info@lagaffe.be
www.lagaffe.be
@lagaffe
info@orangelark.be
www.orangelark.be
@orangelark

27. Ready? Bootstrap! Go!
ColdFusion UserGroup Belgium
24/04/2013
Bootstrap
Sleek, intuitive, and powerful front-end framework
for faster and easier web development.