Bootstrap Hero

THE BIG BADASS
LIST OF USEFUL TWITTER
BOOTSTRAP RESOURCES


Want More? Follow @bootstraphero, or Subscribe to our email newsletter

If you find this list at all helpful, please
checkout our new project: Heroku SSL with ExpeditedSSL

Components

Additional Bootstrap specific addons to supplement the base Bootstrap features

Display

Uses badges to display the maximum length of the field where the user is inserting text. This plugin uses the HTML5 attribute "maxlength" to work.
a pretty decent jQuery table plugin
A simple timepicker component for Twitter Bootstrap.
Guide users through your application via a series of Bootstrap popovers
A frontend validation plugin for Twitter Bootstrap
Replacement for alert() messages and other user interaction notifications.
A jQuery Table of Contents plugin that can be themed with Twitter Bootstrap or jQueryUI.
An implementation to replace the alert(), prompt(),confirm() notifications on the browser when using Twitter Bootstrap with Modal information
Example of how to implement SubNavs in Bootstrap navigation menus.
Uses the modal dialog provided by bootstrap and provides a controlable dialog functionality for web pages as a jQuery plugin.
This is a plugin for Twitter Bootstrap that adds a lightbox that is based off the modal dialog
Lightweight wrapper for adding @user mention functionality to Twitter Bootstraps Typeahead plugin
JavaScript notifications for Bootstrap or jQuery UI
An accordion-based wizard based on Bootstrap styles.
A simple, full-featured, pagination system for jQuery that outputs Twitter Bootstrap marked up pagination links.
A jQuery plugin to handle multiple tagged input.
A Bootstrap styled jQuery Table of Contents
Quick and easy way to build your product tours with Twitter Bootstrap Popovers
Bootstrap tags is a lightweight jQuery plugin meant to extend the Twitter Bootstrap UI to include tagging.
Add-on to the popular Twitter Bootstrap framework to include the use of arrows at any angle in your UI designs
Extends Bootstrap's native modals to provide additional functionality. Introduces a ModalManager class that operates behind the scenes to handle multiple modals by listening on their events.
Pillbox container (often used for tags) control
Editable, searchable data display table.
Simple and flexible HTML, CSS, and Javascript for web apps that wants to use the "Windows 8 App Store" style
Easy to configure site tour wizard
Transforms any div into a scrollable area with a nice scrollbar (default Bootstrap styling).
Multi-Color progressbar component for Twitter Bootstrap
HTML5 video player plugin for jQuery based on bootstrap UI
A dynamic pagination jQuery plugin for Twitter Bootstrap
An extension to the Modal dialog of Twitter's Bootstrap toolkit,
Style, sort and manipulate tables quickly
A port of the Pagedown Markdown editor for use with Twitter Bootstrap.
Slick dropdown on hover and a good discussion of the tradeoffs for mobile.
A simple plugin to enable twitter bootstrap dropdowns to activate on hover and provide a nice user experience.
"Modern" the style formerly known as "Metro" appearance Bootstrap button styles.
Uses the markup and css from bootstrap to make pretty D3 popovers.
Growl style alerts for Bootstrap
Bootbox.js is a small JavaScript library which allows you to create programmatic dialog boxes.

Form

Extends Typeahead to support multiple datasources, backbone, ajax and static arrays
Tiny, opensource, Bootstrap WYSIWYG rich text editor from MindMup
Uses badges to display the maximum length of the field where the user is inserting text. This plugin uses the HTML5 attribute "maxlength" to work.
Works the same way tagging people on FB or Twitter does
Make all file input fields look like standard Twitter Bootstrap buttons
A simple timepicker component for Twitter Bootstrap.
A custom select for @twitter bootstrap using button dropdown, designed to behave like regular Bootstrap selects;
Auto-suggest combo with bootstrap theme using jQuery
A frontend validation plugin for Twitter Bootstrap
A small bootstrap plugin that provide form input controls that feedback to the user as to whether their input was valid.
Tree control for Bootstrap, very handy for directory listings, folders with folders in them, or any hierarchical.
Wizard Control to move people through a series of steps.
Auto-suggest combo with bootstrap theme using jQuery
Bootstrap Dual Listbox is a responsive dual listbox widget optimized for Twitter Bootstrap. Works on all modern browsers and on touch devices.
Yet another jQuery color picker. This plugin is unobtrusive and integrates well with Twitter Bootstrap. The source code only requires jQuery and is about 200 lines of JavaScript and 100 lines of CSS.
Popover Error Messages with JQuery Validation and Twitter Bootstrap. Displays error messages as Twitter Bootstrap Popovers instead of inline text.
A stylish wysiwyg editor for Bootstrap.
A simple, no-frills date/time picker for use with Twitter Bootstrap.
Adds a drop-down of fonts from Google Font API
Extremely slick Date and Time picker for Bootstrap - unique animation+UI to switch between date and time entry modes.
a JQuery based plugin to provide for using select inputs with the multiple attribute to present a dropdown menu containing the single options as checkboxes.
jQuery plugin for range sliders with Bootstrap styling
Collection of additional form and input components for Bootstrap. Action links, input mask, row link, file upload, page alerts, semi-fluid layout, desktop row and more.
Drag and drop a Google Maps map marker to choose a location, or dynamically update an embedded map on the page when the address is entered.
File Upload widget with multiple file selection, drag&drop support, progress bars and preview images for jQuery.
A context menu extension of Twitter Bootstrap made for everyone's convenience.
Replace ugly and hard to use HTML select boxes with gorgeous and feature rich drop downs.
Wait indicator for form submissions
Search input control for Twitter Bootstrap
Pillbox container (often used for tags) control
Create simple, beautiful wysiwyg editors with the help of wysihtml5 and Twitter Bootstrap
Allows for select box filtering, default selection and better styling
Additional functionality beyond the stock Bootstrap typeahead - callback on select, local or remote data source
A user-friendly file-uploading experience over the web
In-place editing with Twitter Bootstrap, jQuery UI or pure jQuery
A JQuery validation plugin for bootstrap forms.
Replaces the default checkboxes and radio inputs for better looking ones.
Chosen (the select box awesomefier) - now for Bootstrap and LESS
Plugin designed to work with Twitter Bootstrap to enable declarative AJAX support.
Bootstrap checkbox's restyled as on/off style toggle buttons

Input

A stylish wysiwyg editor for Bootstrap.
Select a time for a text input using your mouse or arrow keys.
Bootstrap style form element combining textfield and select controls.
A drop down of timezones from country code
A drop down of languages or a display of language name from language code.
Textfield input formatting of phone numbers
A drop-down of states within a country or display of state name from state and country code
A drop-down of countries or a display of country name from country code.
Creates a dropdown menu from which a user can select a range of dates
Add datepicker to any field or other element.
Add a color picker to any field or other element.

Framework Integrations

Means and Methods of Integrating Bootstrap into your Application Framework or CMS

ASP

CSS and component helpers for ASP.NET MVC
CSLA integration for Twitter Bootstrap
Quickly add Twitter Bootstrap to an MVC 4 application.

Java

Tapestry Module for Twitter Bootstrap.
Grails Bootstrap UI Set for Plugin Platform Themes
Provides simple and flexible components representing Twitter's bootstrap components, styles, and plugins.
Wicket-Bootstrap is based on Twitter's toolkit (bootstrap) and the Apache Wicket Framework.
A Plugin for simple Twitter Bootstrap integration into Struts2.
Provides Twitter Bootstrap CSS framework resource files within Grails.

Javascript

Single page app framework using jQuery, Knockout, RequireJS and Bootstrap.
A plugin that adds custom bindings for twitter bootstrap plugins such as tooltips and popovers.
Simple reusable blog template for Node.js and Bootstrap
A mixin for ArrayControllers to build a paginated view that can be controlled with Bootstrap's pagination component.
Set of UI elements styled using the Bootstrap toolkit for use with Ember.js.
Optional package to add Bootstrap support within Meteor
Twitter Bootstrap Theme for ExtJS 4
NodeJS Boostrap using Express / EJS / Twitter Bootstrap / Responsive CSS3
A Derby component library based on Twitter Bootstrap.
Twitter Bootstrap for Ender
Bootstrap directives for AngularJS
A rails plugin for scaffolding views using Angular.js, Twitter bootstrap and font awesome.

Joomla

The Wright Framework is used to create Joomla Templates. The name is in honor of the famous architect, Frank Lloyd Wright, because the framework is like a blueprint.
With the adoption of the Bootstrap framework, Joomla! has become the first major CMS to be mobile ready in both the visitors and administrator areas.
Theme Development Toolset for Joomla using Bootstrap
Integrates the Bootstrap library and also makes it easy to install the various Bootstrap plugins within Joomla.
Premium Joomla Bootstrap templates, code snippets, discussions and more

PHP

CodeIgniter library to build uniform form elements with bootstrap styling
The Wright Framework is used to create Joomla Templates. The name is in honor of the famous architect, Frank Lloyd Wright, because the framework is like a blueprint.
Sleek, intuitive, and powerful front-end framework seemingless integrated into Symfony2.
A custom Wordpress gallery for dynamic thumbnail layout using Twitter Bootstrap 2.2.2 thumbnails and the WordPress built in gallery manager.
A custom Wordpress nav walker class to implement the Twitter Bootstrap 2.2 navigation style in your custom theme using the Wordpress built in menu manager.
A collection of widgets and utilities that will easy the task of developing Yii applications with the beauty of Twitter Bootstrap.
A responsive Drupal them based on Twitter Bootstrap
Minimal blog CMS built with PHP and Bootstrap
a PHP5 minimalistic framework made to build applications based on MVC and CRUD patterns, bundled with Bootstrap
A TYPO3 collection of tools, flexible content elements (TemplaVoilà), custom helper extensions and the basic twitter Bootstrap framework.
Shoestrap is a WordPress theme that’s based on HTML5 Boilerplate and Bootstrap from Twitter.
Quickly link the latest Bootstrap CSS and Javascript to all pages, regardless of the WordPress Theme
Bootstrap based CodeIgniter project
A theme for cakePHP 2.1 with Twitter Bootstrap.
YiiBooster is YiiBootstrap on 'roids.
EZPublish CMS Design and Template for Twitter Bootstrap
Bringing together the Yii PHP framework and Twitter's Bootstrap
MopaBootstrapBundle is a collection of code to integrate twitter's bootstrap as easy as possible into your symfony2 project.
Zend Framework Boilerplate - Bootstrap included in default
A basic port of Twitter's Bootstrap development framework to Drupal 7
Kick starts the development process of the web development process by including Twitter Bootstrap into CodeIgniter
Use Bootstrap with CakePHP without the need for FormHelper hacks.

Perl

Renders form messages using Bootstrap formatting and classes within Catalyst
YAML config for Mojolicious, Configurable application menu based on user type Unified user notification through messages displayed
Bootstrap layouts for the Perl Dancer framework

Python

Packages Twitter's Bootstrap into an extension that mostly consists of a blueprint named 'bootstrap'. It can also create links to serve Bootstrap from a CDN.
ToscaWidgets 2 library that makes excessive use of the Twitter Bootstrap CSS Framework.
Pyramid - Twitter Bootstrap integration
Provide a base Django project which handles the build process of Twitter Bootstrap 2.1 via django-compress
Django Toolkit for integration with Twitter's Bootstrap
Control the rendering behavior of Django forms in a DRY way with Bootstrap
Bootstrap your Django admin in 3 minutes, without changing your existing codebase.

Ruby

Single gem to load Bootstrap, Fontawesome and themes from Bootswatch into your Rails app.
In-place editing with Twitter Bootstrap for Rails
Make Twitter Bootstrap into Rails Engine.
A collection of Rails helpers to output formatting for Twitter Bootstrap.
A Rails generator that makes working with Bootstrap forms even easier on Rails
Integrates the Twitter Bootstrap pagination component with the will_paginate pagination gem.
A website for open source Ruby on Rails example applications and Rails tutorials.
A Formtastic form builder that creates markup suitable for the Twitter Bootstrap framework.
Hooks into less-rails to provide both compiled and LESS CSS source files from the Twitter Bootstrap project within the Rails 3.1 asset pipeline.
Boilerplate application of a Sinatra and Twitter Bootstrap application
A Rails FormBuilder DSL that makes it easier to include Bootstrap stylings within your form.
Integrates Bootstrap CSS toolkit for Rails 3.1 Asset Pipeline (Rails 3.2 supported)
Bootstrap Themes for the Kaminari Pagination gem
Bootstrap alerts and Rails flash messages combined in one easy-to-use gem.
Bootstrap based theme for Hobo 2.0

Wordpress

Listing of free, base and premium themes for Wordpress based on Bootstrap.
A custom Wordpress gallery for dynamic thumbnail layout using Twitter Bootstrap 2.2.2 thumbnails and the WordPress built in gallery manager.
A custom Wordpress nav walker class to implement the Twitter Bootstrap 2.2 navigation style in your custom theme using the Wordpress built in menu manager.
Plugin will add a button to your WordPress text editor so you can easily add Twitter Bootstrap shortcodes to your pages and posts
Shoestrap is a WordPress theme that’s based on HTML5 Boilerplate and Bootstrap from Twitter.
Quickly link the latest Bootstrap CSS and Javascript to all pages, regardless of the WordPress Theme
A responsive WordPress theme with all the Twitter Bootstrap components and interactions.
Bootstrap in a WordPress theme a 320press project.
A solid base for custom theme development on Wordpress with Bootstrap
Rapidly create sites with HTML5 Boilerplate & Bootstrap from Twitter
WordPress Theme, with a great image and gallery handling, based on Bootstrap from Twitter.
Alien Ship is meant to be a foundation on which to build, it is fully integrated with Bootstrap.
WP Strap is an open-source WordPress theme using the Bootstrap framework from Twitter.

Interface Builders

Visual Tools for designing the structure or other aspects of a Bootstrap layout

Display

Interface Builder for Bootstrap
Change the size and colors of the Bootstap icons if you are using the Pro files, all the extra icons will be available to your Bootstrap project.
Bootstrap buttons, but with the FamFam Iconset replacing glyphicons
Extensive gradient builder for setting Bootstrap values
Make pretty buttons easily for Twitter Bootstrap
A powerful Photoshop-like CSS gradient editor from ColorZilla.
Make slick looking buttons easily.
Client side image placeholders
A simple jQuery plugin that draws grid columns to a twitter bootstrap layout. Very helpful for debugging.

Structure

Interface Builder for Web Apps
Drag and drop form builder for twitter bootstrap.
The Bootstrap Interface Builder
Design & build in your browser. (It's the fastest way to ship.)
Gallery of free HTML snippets for Twitter Bootstrap.

Theme

Clearinghouse of Free, OpenSource and Premium themes from all over the Internet.
Generate your own Bootstrap color scheme
Theme marketplace for Twitter Bootstrap
A toolkit designed to kickstart development of facebook iframe apps in both relevant sizes
Web Design Tool and Theme Generator for Twitter Bootstrap
The beauty of Twitter's Bootstrap to jQuery UI widgets.
The Twitter Bootstrap Themer
BootSwatchr is a visual tool for creating a custom Bootstrap theme from the ground up.
Set of open source themes for Bootstrap
Element style picker for Bootstrap customization
Generate Bootstrap themes using the color scheme

Mockup Tools

Stencils and Templates for Drawing and Mockup Applications

PDF scaled to 60% of live page for quick sketches of layouts within the Bootstrap Grid.
This is a set of Omnigraffle stencils, colors and templates that mirror Twitter Bootstrap as closely as possible.
Includes all base elements layered in Photoshop for typography, buttons, grids, navigation, and more used in the original CSS3 Bootstrap v2 framework from Twitter
Free Axure Widgets Library for Twitter Bootstra
A set of grids in photoshop and illustrator based on the bootstrap scaffolding, these are the default responsive grids available on the bootstrap site.
Make it easy to mockup web sites or web applications in OmniGraffle for Bootstrap
Fireworks elements of Twitter Bootstrap
A symbols library for the mockup/drawing app Balsamiq
A simple .psd for quickly and easily mocking up Twitter Bootstrap designs.
Photoshop Plugin For Dealing With Grids
A set of layouts that NiceUX uses to speed up their prototyping process for Twitter Bootstrap
Prototype Bootstrap-based apps using your favorite presentation tool.

Tools and Services

Additional items to make Bootstrap Development Easier and Faster

Devtools

Free templates and wireframes for Bootstrap
A Bootstrap playground - sandbox for Twitter Bootstrap. Use Bootply to design, prototype, extend, or test the Bootstrap framework.
Build email templates with Bootstrap
IE7 shim for adding support in Bootstrap 3.x
Responsive design testing tool - easily check your content at different viewport sizes.
Discover, optimize and explore the perfect typographic ratios for a given font size and content width
Bootsnipp Button Builder
A Chrome extension for easy access to Bootstrap Framework documentation.
A bunch of nicely described and categorized Twitter Bootstrap code snippets for Sublime Text editor.
A FontAwesome alternative - icons font designed for use with Bootstrap
954 free SVG and PNG icons easily customizable for games or apps
Additional 30+ Icons on top of FontAwesome - representing browsers, apps, web services and displays
A bunch of cool, fun, and cross-browser animations converted into LESS for you to use in your Bootstrap projects
A Github Pages theme for your project built with
Starts with mobile styles for the Bootstrap grid first and uses media queries to add layout for larger screens.
Focused on being a 1:1 translation from Less to Sass. Frequently updated
Because Font Awesome had no RSS-icon and a font with only one icon would be a bit boring
Bootstrap with no gradients, rounded corners or other design flare. A starting point of customization projects.
Modify the local versions of variables.less, bootstrap.less and responsive.less while keeping the original bootstrap repository isolated and easily updateable
Desktop application for generating Bootstrap templates
Generate custom icon webfonts from the comfort of the command line.
A bunch of nicely described and categorized Twitter Bootstrap code snippets for Sublime Text editor.
A Sass-powered version of Twitter's Bootstrap, ready to drop right into your Sass powered applications.
Twitter Bootstrap converted for Rails + Compass
Bootstrap, but with Dojo instead of jQuery

Services

An unofficial site showcasing the very best sites using Bootstrap
Twitter Bootstrap Documentation Archive
Bootstrap, FontAwesome and Bootswatch hosted on NetDNA's Content Delivery Network
Generate HTML5 + Bootstrap templates

How Tos

Tutorials and Instructions on using Bootstrap

Articles

Tips and recommendations on getting started with LESS and Bootstrap customization.
Up and running with Twitter Bootstrap in 20 Minutes
Justin Lazanowski writes up how he was able to get Bootstrap's carousel working for touch/swipe actions.
An introduction and demonstration of the most interesting features of Bootstrap.
How to add drag-and-drop reordering on a twitter-bootstrap table in Rails. Uses ranked-model and jQuery-UI.
Here are one coder’s tips for making any site quickly look more professional.
We are going to look into Bootstrap and try out a few of the features provided, to see how this framework can speed up our web development process.
Rapid and Responsive: UX to Prototype with Bootstrap — Josh Jeffrys | MoDevDC
Great article on how to evaluate, design and build a single page app with node.
How to use Twitter Bootstrap to Create a Responsive Website Design
his short tutorial will go over the different steps to create your first jQuery plugin to extend Twitter Bootstrap.
Bootstrap is a sleek, intuitive and powerful front- end framework for faster and easier web development - a good fit with WPF and WebMatrix.
Step by Step Visual Studio project for how to add Bootstrap to a project.
Learn how to make our own responsive WordPress theme using Bootstrap.
This will equip you to build web apps and sites using Twitter Bootstrap.
Section of the larger Rails Tutorial going into specifics of integrating bootstrap-sass.
HowTo create a simple application that allows people to attach a photo from their Dropbox account, crop an area with the Jcrop plugin, and download the result.
How to use responsive form elements to create a Bootstrap based contact page
A very real world project, a single page site or splash page that works on mobile, built with Bootstrap
Bootstrap leaves the file input to the browser default, this article goes through the steps to integrate it better.
a detailed, step by step tutorial that will take you through the process of writing a new Rails 3.1 app that uses Twitter Bootstrap with Formtastic and Tabulous
Twitter Bootstrap provides a tremendous amount of useful CSS support that would take a long time to reimplement
How to create your own form templates with Symfony2 and Bootstrap
Quick and Easy Interactive Wireframes with Bootstrap
A lazy load carousel delays loading of images in order to make the page load faster. It loads the images only if needed.
Tutorial on how to fit all the necessary code – HTML, JavaScript and CSS on one single page, hence the name.
How to setup a new CI+Bootstrap project
How to Create a Custom Icon Set for Bootstrap
How to integrate the jQuery validate plugin with Bootstrap Styles
Golden Bootstrap is a bunch of less written css rules giving you the divine power of using golden ratio sized columns with Bootstrap.
An introduction using Twitter Bootstrap and its key important features to style your apps quickly and easily.
How to create and customize Modal windows using Twitter Bootstrap with several examples and explanations.
Fluid vs Fixed (and responsive) decision making
Please! if you do use Bootstrap for just about everything be courteous to your audience and change up some of the basic variables so it doesn’t look all the same!
How to build a responsive, interactive, and visually engaging web page with simple and flexible HTML, CSS and JavaScript
HowTo Using the Twitter Bootstrap Framework to build a responsive Joomla! Template from Scratch

Presentations

Covers changes in design thinking switching to a Mobile first mindset.
How to use Bootstrap, CSS3 and HTML5 to refresh the design of your site.
Presentation by Bootstrap Creator Mark Otto on how the principles of design are reflected in Bootstrap
We dive in to the principles of using Bootstrap effectively in your design and development process - and how not use it.
Not strictly Bootstrap, but awesome: You’ll learn basic typeface anatomy & terminology, typesetting techniques
Understand the background and underpinnings of Bootstrap from the source themselves.

Videos

A video course on Lynda.com covering how to get started with Bootstrap by Jen Kramer
How to take advantage of the bootstrap framework in your extension so you can leave the designing to the designers.
How to display flash messages, add form validations with SimpleForm, customize layout with variables, and switch to using Sass.
learn how to include Bootstrap into Rails with the twitter-bootstrap-rails gem.
YUI contributor Jay Shirley (@jshirley) talks about his project to provide an alternative JavaScript implementation for Twitter Bootstrap based on YUI.
A 17 Video series on how to get started and customize Twitter Bootstrap

Javascript Addons

Useful Bootstrap Compatible Javascript Addons

Extends Typeahead to support multiple datasources, backbone, ajax and static arrays
Single page app framework using jQuery, Knockout, RequireJS and Bootstrap.
A plugin that adds custom bindings for twitter bootstrap plugins such as tooltips and popovers.
Simple reusable blog template for Node.js and Bootstrap
Javascript forms validation. Powerful, UX aware & Dead simple.
Great article on how to evaluate, design and build a single page app with node.
his short tutorial will go over the different steps to create your first jQuery plugin to extend Twitter Bootstrap.
A mixin for ArrayControllers to build a paginated view that can be controlled with Bootstrap's pagination component.
Set of UI elements styled using the Bootstrap toolkit for use with Ember.js.
Optional package to add Bootstrap support within Meteor
Twitter Bootstrap Theme for ExtJS 4
NodeJS Boostrap using Express / EJS / Twitter Bootstrap / Responsive CSS3
A Derby component library based on Twitter Bootstrap.
YUI contributor Jay Shirley (@jshirley) talks about his project to provide an alternative JavaScript implementation for Twitter Bootstrap based on YUI.
Twitter Bootstrap for Ender
Gmail like client side form draft saves.
Filters elements by data attribute
Fades text using snappy CSS3 transitions
Fades between images using CSS3
Trims text down to fit into its container
An easy-to-use jQuery plugin that types
Bootstrap directives for AngularJS
Pure browser qrcode generation with jQuery
A JQuery validation plugin for bootstrap forms.
A rails plugin for scaffolding views using Angular.js, Twitter bootstrap and font awesome.
A jQuery Select Box Plugin for Mobile, Tablet, and Desktop
A Javascript library for capturing input
Image Manipulation in Javascript - manipulate images using HTML5 canvas and Javascript
Speeds up scrolling through long lists and keeps infinite feeds smooth and stable for users

Want to make your own super popular Badass list of resources? Checkout: http://www.bigbadassresourcelist.com