Extending Bootstrap

After that little rocket ride, you might be left wondering just what there is to be extended in Twitter Bootstrap.

Well, the community, it appears, seems to think quite a lot actually.

One of the things I personally went looking for soon after starting to use TWB was a decent file upload component. I also had a client that wanted iOS-style, yes/no slide switches rather than check boxes.

There are thousands upon thousands of different plug-ins and extensions out there to go with Bootstrap. Pair that with Twitter’s latest toolkit "Twitter Flight" and you've got the potential for one UI kit to rule them all.

After much exhaustive searching and looking to see what's available, here are some of my top picks in Twitter Bootstrap extensions.

Bootstrap Extension Sites

Bootsnipp

There are not many different ways you can describe Bootsnipp except to say that it has all of the things that relate to Twitter Bootstrap.

It's a real powerhouse of page templates and code samples, and has possibly the largest list of links to resources that I've seen so far.

The list of sites on its resources page includes all the other sites I'm going to list in this chapter, but more than that, it groups everything into useful categories. So, if all you're looking for is UI additions, you only need to use the category list or UI tag to find what you want quickly.

As if that's not enough, it also includes an online form builder, allowing you to drag and drop different controls into a form, which you can then export into your own template for use in your own projects.

There is also a button builder allowing you to style and add icons for both the Version 2 and Version 3 frameworks, meaning you no longer have to remember all of those classes to get your buttons just right.

Wrap Bootstrap

In some ways, Wrap Bootstrap is similar to Bootsnipp; the main difference is that they concentrate solely on templates, and I’m talking about full site templates here, not just the small page snippets that Bootsnipp offers.

There is also a paid for section on the site, and an opportunity for you to sell your own templates via their merchandising system. If you're looking for high-quality, pre-made templates ready for you to code against, Wrap Bootstrap is probably where you should be looking.

Extended Full Bootstrap Kits

Jasny Bootstrap

If you're going to download any extended version of Bootstrap, it has to be Jasny.

It has everything that the normal version has and then some. For example, the type ahead JavaScript module has been extended to work directly off an AJAX call. There are new input types that can take input masks, a file selector/upload component, row links , extra icons, and much more. Jasny is not just Bootstrap Extended, it is THE Bootstrap Extended.

Bootplus

Bootplus is not an awful lot different than Bootstrap itself; however, as the author describes it, that's not its purpose.

The idea behind Bootplus is to style things a little more like Google, specifically Google+.

The author’s even added a few new components: "News Cards," "People Cards," "People Hover Cards," and "Navbar Notifications" that look and feel just like the components available in a G+ page.

UI Kits

Fuel UX

While Fuel UX gives the impression that it's a full Bootstrap with extensions, in reality it's more of a UI furniture extension kit.

Many of the extension kits out there fully override everything from CSS and basic styles, right through to custom additions. Fuel UX, however, does not.

Fuel UX concentrates on one thing and one thing only: making the input controls and other on-screen elements better and with richer functionality.

Three things that Fuel UX provides that are absolutely first-rate are a Data Grid, Tree View, and Wizard Bar; there are examples of these and more directly on the website.

Bootstrap Form Helpers

Like Fuel UX, Form Helpers adds new input types. Unlike the others, however, it doesn't in any way attempt to improve on what’s already there.

Instead, what it attempts to do is add additional controls on top of those already provided, in an attempt to increase the number of input types available.

One thing it does add that seems sadly missing elsewhere is Time and Date pickers; it also adds some input elements that are unique to this kit such as Font Lists and Currency Pickers.

Useful Singular Components

Bootstrap Switch

Want an iOS-style sliding switch for your UIs? Then look no further.

Bootstrap Switch has it all. It's smoothly animated; you can change colors, text, label sizes, and everything else you can with regular TWB components.

It's also styled to look like the rest of Bootstrap and has a programmatic API to match.

Bootstrap Markdown

Markdown has taken the web development market by storm recently, and for good reason.

It allows you to add a rich in-page editor to your applications without enabling the masses to type any HTML they like into your page.

The Markdown extension gives you that nice, fluent front-end editing experience as made popular by sites such as StackOverflow, while allowing you to convert the data to and from regular HTML with nothing more than a few JavaScript calls.

All the Rest

As much as I'd love to list every single last one of them here, there are just too many extensions to even find them all.

While I was researching this book, I came across yet more sites that I never even knew existed the first time round, and the list continues to grow.

There are whole groups on YouTube producing entire series of tutorials on this amazing bit of kit, and there are sites like Tutorialzine. It pumps out Top 20 lists by the day.

Couple that with the fact that there are now at least five online drag-and-drop Bootstrap UI builders that I know of that allow you to create your layouts directly in the browser, there's no signs showing that any of this is slowing down.

Bootstrap, quite simply, puts the power of design and UI layout back in the developer’s hands, leaving things in a nice, clean, easy-to-maintain state that can then be passed to a front-end graphic designer whose job it is to make things shine.

In the meantime, you can get on with the all-important task of writing your code, knowing that the visual side of what you do has now been taken care of.

Thanks for reading, and remember to continue building awesome stuff.