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 Sets
![FamFamFam Custom Twitter Icon Sets]()
Use FamFamFam icon set in Twitter Bootstrap, or you can learn how to integrate other icon sets and extend Twitter Bootstrap existing icon library. - Bootstrap Button
This tool create a custom button to replace the existing button style. - Bootstrap Button Generator
If 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 PSD
Bootstrap 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. - StyleBootstrap
This 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 Datepicker
Pretty straight forward, it's a colorpicker and datepicker that matches the bootstrap style. - WYSIWYG Editor for bootstrap
bootstrap-wysihtml5 is a javascript plugin that makes it easy to create simple, beautiful wysiwyg editors with the help of wysihtml5 and Twitter Bootstrap. - Colorpicker
Yet 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. - Bootboxjs
Bootbox.js is a small JavaScript library which allows you to create simple programmatic dialog boxes using Twitter's Bootstrap modals. - Font Awesome
Extend 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 Bootstrap
This project brings the beauty of Twitter's Bootstrap to jQuery UI widgets. - Bootwatch
Change the style of Twitter bootstrap easily by downloading premade CSS styles. - FB Bootstrap
Fbootstrapp 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. - DarkStrap
A Dark Theme for Twitter Bootstrap 2. - Kickstrap
A full version of Twitter's Bootstrap with themes, enhancements, and other goodies. - jQuery Mobile Bootstrap
A jQuery Mobile theme based on Twitter Bootstrap - WordPress BootstrapTwitter Bootstrap in a Wordpress Theme.
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.Jetstrap - The Bootstrap Interface Builder
jetstrap.com/
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.
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/
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
http://pikock.github.com/bootstrap-magic/
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