Web Development

18 Useful Twitter Bootstrap Goodies You Should Know

Written by Kevin Liew on 29 May 2012
261,573 Views • Shares
46 comments

Introduction

Twitter Bootstrap is one of my favourite framework for quick website prototyping and default style for my CMS. If you don't know about Twitter Bootstrap, it's a simple and flexible HTML, CSS, and Javascript for popular user interface components and interactions. Created by the developers from Twitter, this great tool contains base CSS, grid, responsive, general styling, UI components and javascript plugins that can speed up your development process.

I have been using it for a while now, it allowed me to have full concentration on the functionality of the website instead of cross browsing testing and styling. It can easily save me heaps of times! Based on my personal opinion, Twitter Bootstrap does limit how you design a website. If you look at this Twitter Bootstrap showcase, many of them are identical and you can read another opinion from Paul Scrivens. It's a good tool, but don't abuse it.

In this post, I have found many useful tools, plugins and themes created specifically for Twitter Bootstrap. If you love using Twitter Bootstrap, I'm sure you will love all these resources.

Update I also created a post about third party Twitter Bootstrap javascript plugins - Extend Twitter Bootstrap Javascript Plugins.

Everybody seems to like this post a lot, it's mentioned on The Treehouse Show! Thanks, Team Tree House ;)

Tools - Wireframing, Generators and Template

  • FamFamFam Custom Twitter Icon SetsFamFamFam Custom Twitter Icon SetsUse FamFamFam icon set in Twitter Bootstrap, or you can learn how to integrate other icon sets and extend Twitter Bootstrap existing icon library.
  • Bootstrap ButtonBootstrap ButtonThis tool create a custom button to replace the existing button style.
  • Bootstrap Button GeneratorBootstrap Button GeneratorIf you don't want to go through the documentation, you can use this button generator. You can create different kind of buttons with all the predefined style in Twitter bootstrap.
  • Bootstrap PSDBootstrap PSDBootstrap GUI PSD is a toolkit from RepixDesign designed to kickstart webdesign of webapps and sites. It Includes al base elements layered in Photoshop for typography, buttons, grids, navigation, and more used in the original CSS3 Bootstrap framework from Twitter.
  • StyleBootstrapStyleBootstrapThis website allow you to generate your own unique design. It has a good interface and give you a quick preview of the new style.
  • SASS Twitter BootstrapIf you use SASS instead of LESS, you will appreaciate this.
  • BoilerStrapA blank slate for the modern web. Just add creativity.

Additional Plugins

  • Colorpicker and DatepickerColorpicker and DatepickerPretty straight forward, it's a colorpicker and datepicker that matches the bootstrap style.
  • WYSIWYG Editor for bootstrapWYSIWYG Editor for Bootstrapbootstrap-wysihtml5 is a javascript plugin that makes it easy to create simple, beautiful wysiwyg editors with the help of wysihtml5 and Twitter Bootstrap.
  • ColorpickerColorpickerYet another jQuery color picker. The look integrates very well with Bootstrap Twitter. Design and colors taken from Google Calendar. The source code only requires jQuery and is about 100 lines of JavaScript.
  • BootboxjsBootboxjsBootbox.js is a small JavaScript library which allows you to create simple programmatic dialog boxes using Twitter's Bootstrap modals.
  • Font AwesomeFont AwesomeExtend the existing icons with SVG based font icons.

Skin, Themes & Styles

  • Bootstrap Styler

    A good collection of well-developed and beautifully made bootstrap themes which targeting different audiences. Inherited from bootstrap, they are responsive, UI rich and the best thing is, apart from its grid and layout, they don't look like the original bootstrap at all. You find bootstrap with metro design, dark theme, theme with full background and etc.
  • jQuery UI BootstrapjQuery UI BootstrapThis project brings the beauty of Twitter's Bootstrap to jQuery UI widgets.
  • BootwatchBootwatchChange the style of Twitter bootstrap easily by downloading premade CSS styles.
  • FB BootstrapFB BootstrapFbootstrapp is a toolkit designed to kickstart development of facebook iframe apps in both relevant sizes. It includes base CSS and HTML for typography, forms, buttons, tables, grids, navigation, and more, styled in the typical facebook look and feel.
  • DarkStrapDarkStrapA Dark Theme for Twitter Bootstrap 2.
  • KickstrapKickstrapA full version of Twitter's Bootstrap with themes, enhancements, and other goodies.
  • jQuery Mobile BootstrapjQuery Mobile BootstrapA jQuery Mobile theme based on Twitter Bootstrap
  • WordPress BootstrapTwitter Bootstrap in a Wordpress Theme.
Join the discussion

Comments will be moderated and rel="nofollow" will be added to all links. You can wrap your coding with [code][/code] to make use of built-in syntax highlighter.

46 comments
Antanas Antaso 8 years ago
Just in case,word bootstrap is missing letter T in headline...
Reply
Pat 7 years ago
The headline isn't the only spelling error. The article is full of them. It is also chock full of grammar errors.
Reply
Tanguy Krotoff 7 years ago
I have change the name of jquery-colorpicker to jquery-simplecolorpicker and the source code is now at: https://github.com/tkrotoff/jquery-simplecolorpicker
Reply
Robbie 7 years ago
Great List :)
Reply
Andy Feliciotti 7 years ago
Awesome post, thanks for the resources!
Reply
Ali 7 years ago
I hope many people find this useful, we spent few days looking for nice Bootstrap template, there are many of them but almost none is written in LESS. Since we are using Bootstrap for rapid prototyping, we need to have it wirtten in LESS. Found some on ThemeForest - http://themeforest.net/item/huraga-responsive-admin-template-/2844632
Reply
Jake 7 years ago
Nice collection of Bootstrap resources. We're working on a drag-and-drop web app interface builder that leverages Bootstrap called Divshot (http://divshot.com ). Currently we're in private beta and sending out more invites soon!
Reply
Brad 7 years ago
Don't forget about the WordPress themes over at BragThemes.com that use Bootstrap!
Reply
Dipesh batheja 7 years ago
This is very useful! This framework is getting so popular that people have started requesting PSD to HTML conversions from us specifically on Twitter bootstrap. So we have started offering PSD to Twitter Bootstrap conversions. Checkout http://www.netlingshq.com/services/psd-to-html ... Addons section.
Reply
Steve 7 years ago
The comments to this article are as useful as the article.
I just bookmarked divshot and themeforest.
Both look very promising!
Reply
Monica Gupta 7 years ago
Thanks for such a great list! :) ...
Reply
Drew Strickland 7 years ago
This is a bit of a shameless plug, but I couldn't help but notice that http://BootSwatchr.com isn't on this list. It's an excellent resource for those looking to completely re-theme Bootstrap. (disclosure, I am the developer of BootSwatchr)
Reply
Saifudeen 7 years ago
Indeed an excellent reference buddy!
Reply
George 7 years ago
Very cool ! Thanks for sharing!!!
Reply
David Goodchild 7 years ago
You forgot to add the Twitter Bootstrap Plugin for WordPress :)

Dave.
Reply