18 Useful Twitter Bootstrap Goodies You Should Know

18 Useful Twitter Bootstrap Goodies You Should Know


18 Useful Twitter Bootstrap Goodies You Should Know

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.

Author: Kevin Liew

Kevin Liew is a web designer and developer and keen on contributing to the web development industry. He loves frontend development and absolutely amazed by jQuery. Feel free to say hi to me, or follow @quenesswebblog on twitter.

Share the love

46 comments

Antanas Antaso
Sat, 2nd June 2012
Just in case,word bootstrap is missing letter T in headline... Reply
Pat
Sat, 24th November 2012
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
Sat, 23rd June 2012
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
Thu, 12th July 2012
Great List :) Reply
Andy Feliciotti
Tue, 31st July 2012
Awesome post, thanks for the resources! Reply
Ali
Mon, 27th August 2012
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
Mon, 27th August 2012
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
Fri, 21st September 2012
Don't forget about the WordPress themes over at BragThemes.com that use Bootstrap! Reply
Dipesh batheja
Tue, 25th September 2012
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
Mon, 8th October 2012
The comments to this article are as useful as the article.
I just bookmarked divshot and themeforest.
Both look very promising! Reply
Monica Gupta
Thu, 11th October 2012
Thanks for such a great list! :) ...
Reply
Drew Strickland
Wed, 17th October 2012
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
Sun, 13th January 2013
Indeed an excellent reference buddy! Reply
George
Thu, 1st November 2012
Very cool ! Thanks for sharing!!! Reply
David Goodchild
Mon, 19th November 2012
You forgot to add the Twitter Bootstrap Plugin for WordPress :)

Dave. Reply
Pratiyush Kumar Singh
Wed, 21st November 2012

Jetstrap - The Bootstrap Interface Builder
jetstrap.com/ Reply
Nina
Sat, 24th November 2012
Great list but where to get a working contact form with PHP for Bootstrap? Reply
Michele
Sat, 24th November 2012
This may also be useful to someone, awesome animated switches for Bootstrap http://www.larentis.eu/bootstrap_toggle_buttons/ Reply
Ivan S.
Sat, 24th November 2012
Awesome collection! Thank you. Reply
Bruno
Sat, 24th November 2012
Great post. Thank you Reply
Scott Harvey
Sun, 25th November 2012
The link for the second ColorPicker isn't working. It should point here: https://github.com/tkrotoff/jquery-simplecolorpicker Reply
Kevin Liew Admin
Mon, 26th November 2012
Thanks for telling us. It's updated. Reply
Joshua
Sun, 25th November 2012
Misspelled it 7 times. s/([Bb])oostrap/$1ootstrap/g Reply
Kevin Liew Admin
Mon, 26th November 2012
Sorry my bad. It's corrected. Reply
Edgaras Benediktavicius
Tue, 27th November 2012
Nice list. You could also add Jetstrap which is drag&drop tool for building your Bootstrap design. Reply
Peter
Tue, 27th November 2012
Great list. Glad you put the time to put this together.

You're absolutely right in your introduction: many sites look like they've been built with Bootstrap. You can just tell. Often no attempt is made to change even the most basic of elements. That's OK for a github code page, for example, but it was never intended to be a part of your site brand. It's simply to Bootstrap a site.

I've been using Bootstrap for a while now and am fascinated by some of the implementations of Bootstrap that just don't look like Bootstrap. So much so that I've recently launched a small site to showcase the great ones I find.

Also, it's interesting to see some big names using Bootstrap. Did you know that Encyclopedia Britannica uses Bootstrap? They do.

If you're interested in browing Bootstrap design eye-candy, you can pop over to http://lovebootstrap.com

Thanks. Reply
chan tsifei
Tue, 15th January 2013
Hi there,

We would like to share with you : Bootstrap magic.
It is a Twitter Bootstrap themes generator made with AngularJS

http://pikock.github.com/bootstrap-magic/

Hope that you can give it a try. Your feedback are welcome.

Thanks

Git projet : http://pikock.github.com/bootstrap-magic/ Reply
Theo
Wed, 20th February 2013
I can definitely recommend Bootstrap Magic. From the available Bootstrap theme generators this is currently definitely the best.

In the tutorials I wrote about Twitter Bootstrap (e.g. http://www.webdesignforbeginners.inf o/bootstrap-changing-the-theme/) I use Bootstrap Magic because I have found it really easy to use and very complete. You can change the style for every Bootstrap component and see a preview instantly. Especially interesting is that you can add you own variables and use them to create a new theme.

My compliments to Pikock and Autre Planète for the development of Bootstrap Magic Reply
Anatolii
Tue, 4th February 2014
Check out also Bootstrap 3 drag&drop builder http://builder.bootstraptor.com Reply
Pikock
Wed, 16th January 2013
Bootstrap Magic made with AngularJS. Create simply your own Twitter Bootstrap theme.
http://pikock.github.com/bootstrap-magic/ Reply
Giorgio Seregni
Sat, 2nd February 2013
Hello .

i would like to share whit you a new software called Pingendo.

It’s usefull to assemble documents visually with drag and drop support ,code with live preview of your html/css, and visual CSS styling too.

It integrates snippets from Bootsnip and Bootstrap's themes from bootswatch.com.

http://www.pingendo.com Reply
Invokator
Fri, 1st February 2013
@Jake Great job ! We working on a Bootstrap front-end visual editor too. :) : http://www.invokator.com Reply
james
Mon, 4th February 2013
Your link text for Bootswatch is Bootwatch. At least you got the link right ;) Reply
Helen Bailey
Wed, 13th February 2013
Thank you for the list, and here is an infographics about Bootstrap that we hope you will like http://www.templatemonster.com/infographics/bootstrap-interactive-infographics.php Reply
Srinu
Fri, 8th March 2013
findw3
Thu, 21st March 2013
Nice post Reply
Varun
Sun, 28th April 2013
Thanks! I was looking for a combined list of various bootstrap resources. Reply
Alex
Fri, 24th May 2013
Your link above "Extend Twitter Bootstrap Javascript Plugins" is to queness.dev and fails. Nice article. Reply
twittstrap
Sun, 9th June 2013
we are looking for feedback for our newly launched github project that you can find at a following link twittstrap.com/twittstrap Reply
Juan Pablo
Wed, 14th August 2013
Hi,

Nice article. I would like to suggest a Bootstrap site for your list:
http://responsivezencart.com/
Zencart template marketplace for Twitter Bootstrap Reply
Jay
Tue, 3rd September 2013
Another resource to be added to the List

http://jaykanakiya.com/bootstrap-grid-builder/ Reply
Start Bootstrap
Sun, 22nd September 2013
Thanks for this list, I love Bootstrap! Another great resource you might want to look at is Start Bootstrap at http://startbootstrap.com . It is a 100% free collection of HTML starter templates for use with Bootstrap 3. Take what you like, or take all of them! Reply
Themespixel
Thu, 3rd October 2013
new resources for bootstrap theme marketplace, maybe can be added to the list
http://bootstrapmade.com Reply
akpinar
Fri, 1st November 2013
I’ve found another new theme css generator for twitter bootstrap template

getbootstrap-theme.com Reply
Murat Dikici
Tue, 6th May 2014
Sorry to remind you that http://usebootstrap.com is not listed as free Bootstrap theme provider. It is an awesome website for people who is looking for Bootstrap themes. (Note that I am the developer of UseBootstrap website) Reply
ben med
Thu, 21st August 2014
hi,
What about http://twittely.com , is a free collection of bootsrap template ?

Best regard ! Reply

Leave a Comment

Please keep in mind that comments are moderated and rel="nofollow" is in use. You can use [code][/code] if you want to write codes. Don't spam us :) Thanks!

Advertisement