50 Must-have plugins for extending Twitter Bootstrap

Martin Angelov You most certainly know about Twitter Bootstrap – the popular front end framework for building websites and apps. It favors simple, responsive design, and comes bundled with a sensible default stylesheet, a number of useful jQuery plugins and an icon set. Although it doesn’t come with much else, Bootstrap is very extensible. Bootstrap Drag And Drop Builder Bootstrap Studio is a powerful drag and drop builder for the Bootstrap framework. Website Bootstrap Studio Collections of Bootstrap Enhancements Here we will show you two collections of Bootstrap plugins that extend the framework with useful functionality. Fuel UX Fuel UX is an incredible collection of enhancements to Twitter Bootstrap. Website | Github Fuel UX Jasny Jasny is another collection of useful interface components for bootstrap. Website | Github Jasny Bootstrap Galleries It is worth noting that you can use any regular jQuery plugin with your bootstrap-powered website. Bootstrap Lightbox Website | Github Bootstrap Lightbox

CSS Flip Animation You've all asked for it and now I've added it: Internet Explorer support! Annoyingly enough, the change involves rotate the front and back elements instead of just the container. Skip to this section if you'd like the Internet Explorer code. IE10+ is supported; IE9 does not support CSS animations. CSS animations are a lot of fun; the beauty of them is that through many simple properties, you can create anything from an elegant fade in to a WTF-Pixar-would-be-proud effect. One CSS effect somewhere in between is the CSS flip effect, whereby there's content on both the front and back of a given container. Quick note: this is not the first tutorial about this effect, but I've found the others over-complicated. The HTML The HTML structure to accomplish the two-sided effect is as you would expect it to be: There are two content panes, "front" and "back", as you would expect, but also two containing elements with very specific roles explained by their CSS. The CSS CSS Flip Toggle CSS Vertical Flip

3D card flipping | CSS transitions, CSS transforms and CSS animation Part of the design for the Southampton Hackney Association included a grid of sponsors. The design was such that on hover or click, they would flip over revealing a contact number, email address or URL. We wanted this site to work on browsers that didn't support 3D transforms, as at the time, only webkit had support. Code path for browsers with 3D transforms The code used is exactly as above. The markup consists of a div, containing two divs for the back and front faces. Fallback In older browsers, jQuery Flip is used. Due to issues with getting jQuery flip to work on hover, the behaviour was changed to work on click. Using this technique, the effect works on all browsers in use, back to IE6. Part of the design for the Southampton Hackney Association included a grid of sponsors. Code path for browsers with 3D transforms The code used is exactly as above. Fallback In older browsers, jQuery Flip is used. Using this technique, the effect works on all browsers in use, back to IE6. Fallback