20+ Beautiful Resources That Complement Twitter Bootstrap

22°

Twitter Bootstrap is a beautiful "web design kit" for creating cross browser, consistent and good looking interfaces.

With a flexible and well-thought HTML/CSS/Javascript structure, it offers many of the popular UI components, a grid system and JavaScript plugins for common scenarios.

Twitter Bootstrap

And, it seems to be rocking the web design community as there are lots of websites already built and being built with it (it is also the most watched/forked repository in GitHub).

Twitter Bootstrap is already powerful enough to empower any web interface. In order to make more use of it and/or ease the development process, there are various tools/resources that complement it.

These include Bootstrap themed vector UI images, WordPress themes, web-based Bootstrap customizers and more. Here they are:

jQuery UI Bootstrap

jQuery UI Bootstrap

This is an awesome resource for jQuery and Twitter Bootstrap users that combines the power of both.

It is a jQuery UI theme that not only brings Bootstrap-themed widgets but also enables us to use (most) of Twitter Bootstrap side-by-wide without any components being broken visually.

Bootstrap Image Gallery

Twitter Bootstrap Image Gallery

This is an extension for the "Modal dialog" of Twitter Bootstrap toolkit for simplifying the navigation through a set of images.

It has features like mouse + keyboard navigation, transition effects, fullscreen mode and slideshow.

jQuery Mobile Bootstrap Theme

jQuery Mobile Bootstrap Theme

Similar to the jQuery UI theme above, this is a theme built for jQuery Mobile.

It is a handy resource if you have a web front-end built with Twitter Bootstrap and want to offer a similar look for mobile.

Colorpicker and Datepicker for Twitter Bootstrap

Colorpicker + Datepicker for Twitter Bootstrap

A slick datepicker and colorpicker built for Twitter Bootstrap.

They integrate into the system as any other component and can be attached to any field or HTML element.

StyleBootstrap.info

StyleBootstrap.info

Twitter Bootstrap has its own customizer but StyleBootstrap is a more detailed one with color pickers and the ability to style each component differently.

And, for every generated style, the application generates a unique URL in case you want to share it with others or return back and edit anytime later.

Beautiful Buttons for Twitter Bootstrappers

Twitter Bootstrap Button Designer

One of the most attractive parts of Twitter Bootstrap is the beautiful buttons it has: standard, dropdown, pagination, etc.

This is an online button designer that eases customizing the output with user-friendly sliders that help changing each variable.

Bootswatch

Bootswatch

Twitter Bootstrap's default theme is very nice, however, we may want to have another look but still get the awesomeness offered by the kit.

Bootswatch provides free-to-use themes for Twitter Bootstrap and they can be used by simply downloading and replacing the CSS file.

Fbootsrapp

Twitter Bootstrap for Facebook

A toolkit for designing Facebook iframe apps in both relevant sizes which is built on top of Twitter Bootstrap.

It includes base CSS and HTML for typography, forms, buttons, tables, grids, navigation, and more, styled in the typical facebook look and feel.

Bootstrap PSD

Twitter Bootstrap PSD

The design kit includes all base elements of Twitter Bootstrap layered in Photoshop for typography, buttons, grids, navigation and more.

They are vector based, each item is in a separate layer and their colors can be adjusted easily.

Bootstrap Fireworks

Twitter Bootstrap for Fireworks

A  very well organized vector image set of Twitter Bootstrap's components.

Each item comes with varieties of different states and all of the UI components are organized in pages within Fireworks.

That's a great resource for anyone designing first in Fireworks and then switching to HTML.

P.S. There is also another Fireworks-Bootstrap set which is simpler-yet-nice.

Django Bootstrap Toolkit

Django for Twitter Bootstrap

This is a toolkit for connecting Django with Twitter Bootstrap.

It is still a work in progress yet promising and can be very useful for Django fans.

WordPress Themes For Twitter Bootstrap

BootstrapWP

There are multiple WordPress themes that use Twitter Bootstrap as a base and help anyone build new WP-powered websites using the kit:

Other Resources

There are also few other resources built for Twitter Bootstrap including:

36 Comments
  1. Reply oliverastro February 29, 2012 at 10:31 AM

    thanx!!!

  2. Reply forrest321 February 29, 2012 at 12:24 PM

    Great list! I’ve created a blank MVC 3 (C#) project with Bootstrap on github here: http://bit.ly/zJt0oo I’ll definitely be adding jQuery UI Bootstrap asap.

  3. Reply samcome February 29, 2012 at 12:47 PM
  4. Reply Wolfgang February 29, 2012 at 4:07 PM

    There is also a Twitter Bootstrap plugin for Grails at https://github.com/groovydev/twitter-bootstrap-grails-plugin

  5. Reply Ademar Filho February 29, 2012 at 4:34 PM

    S2 Bootstrap S2
    ———————-
    there is a joomla project too…
    http://bootstrap.fastnetwebdesign.co.uk/

    This is a Joomla v2.5 template based on Twitter Bootstrap – “the simple and flexible HTML, CSS, and Javascript for popular user interface components and interactions.”

    This template has no real styling and is only meant to get you up & running with Bootstrap… you’ll have to style it yourself, but can use the great inbuilt CSS that Bookstrap provides

    This template is available for download free!

  6. Reply Jim Cummins February 29, 2012 at 4:38 PM

    This is absolutely awesome. Bootswatch has some nice alternate themes.

  7. Reply Madd March 1, 2012 at 3:25 AM

    I might be unpopular, but I am already tired of Bootstrap. I work as a web app developer and we’ve already built 5 apps using it, because my boss is so excited about it. They all look the same and I don’t like it anymore.

  8. Reply Juergen March 1, 2012 at 3:42 AM

    There is a TYPO3 extension too … http://typo3.org/extensions/repository/view/mn_twitter_bootstrap/current/

    Thx for the great list.

  9. Reply Cezar March 1, 2012 at 1:30 PM

    I have a Django-bootstrap project on github at https://github.com/emperorcezar/Django-bootstrap

    It’s a different approach. Not a toolkit per se, but a starter Django project with bootstrap included. I’ll probably be taking some inspiration from the project you mentioned.

  10. Reply DEEP March 1, 2012 at 6:04 PM

    nice one but i am just overwhelmed with the way things are progressing. Before you get grasp of something, an update is already in market and people already forking it

    I would like to see a survey of comparison of stress levels in 2001 and 2011 of designers and developers.

    If things have been developed to make designer/developer life easier than they should have less stress now than 10 years ago.

  11. Reply anon March 4, 2012 at 1:48 AM

    The correct link for “Beautiful Buttons for Twitter Bootstrappers” is:-
    http://charliepark.org/bootstrap_buttons/

  12. Reply Christoffer Niska March 6, 2012 at 5:52 AM

    I’ve developed a bootstrap extension for the Yii PHP framework. It can be found at http://www.cniska.net/yii-bootstrap. Code can be found at Bitbucket http://bitbucket.org/Crisu83/yii-bootstrap

  13. Reply Paul G. March 7, 2012 at 7:26 AM

    I just wanted to give a heads up to our WordPress Twitter Bootstrap plugin for adding the CSS and Javascript libraries to any WordPress site.

    This is the only WordPress plugin that does anything like this, and it free for download from WordPress.org.

    You can grab it here: http://bit.ly/qRVL1i

    I’d love to hear any feedback on the plugin that people have and for the latest release notes, we have an article on our site here: http://bit.ly/wLkYjf

    Thanks!
    Paul.

  14. Reply Philip Locke March 9, 2012 at 1:53 PM

    Great resource/post… Thanks for the effort of listing these items.

    As mentioned in a comment here by Ademar Filho (thanks…), I created the http://bootstrap.fastnetwedesign.co.uk template for the Joomla v2.5 CMS – using Twitter Bootstrap as the base RWD framework. It’s free to download for any Joomla junkies who want to use it as a starter template.

    I have also just recreated my business website (in Joomla v2.5) using the Bootstrap code – http://www.fastnetwebdesign.co.uk

    I can only take my hat off to the Twitter guys for their great work. Using it and turning it into a Joomla template has been easy & a lot of fun 😉

    Cheers
    Phil

  15. Reply Ben Peck March 24, 2012 at 1:01 AM
  16. Reply Peter Drinnan March 29, 2012 at 5:28 AM

    Just responding to Madd. There are people selling themes for Bootrap and they look very different. I see Bootstrap as a methodology that makes it easier for you to work with other developers.

  17. Reply Jesus Garza April 2, 2012 at 5:31 PM

    Maybe you should update the reference to stylebootstrap.info because its more like a DIY Bootswatch.

  18. Reply sudhir May 8, 2012 at 9:29 AM

    Bootstrap really misses a nice side navigation with options for sub nav. Also a professional looking admin theme (like on themeforest) would be a great ..

  19. Reply Sam S May 15, 2012 at 3:34 AM

    What you see is HTML5 editor for Bootstrap

    truly awesome project, supa amazing thing it is – works well with 2.0.4-wip too

    https://github.com/xing/wysihtml5
    http://jhollingworth.github.com/bootstrap-wysihtml5/

  20. Reply Jiri Melcak May 31, 2012 at 1:59 PM

    We’ve developed easy online tool for creating buttons based on Twitter Bootstrap. Just pickup color, size, input type, icon, icon position and copy markup to clipboard.

    http://www.plugolabs.com/twitter-bootstrap-button-generator/

  21. Reply Vitalets July 23, 2012 at 2:28 PM

    In-place editing with Bootstrap form and popover:

    http://vitalets.github.com/bootstrap-editable

  22. Reply Dougy July 25, 2012 at 6:55 PM

    Great resource.

    I would add the alienship twitter boostrap wordpress framework to this list: http://www.johnparris.com/alienship/

    and here are my two recent developments using this framework:
    http://electnewmedia.com/
    http://goldbird.org/

    Bootstrap for the win!

  23. Reply aditia August 20, 2012 at 6:08 PM

    thanks, really great resources

  24. Reply nir August 25, 2012 at 4:04 PM

    Great resources.
    You can add BootTheme ( http://www.boottheme.com/ ) to the list

  25. Reply Max August 26, 2012 at 4:09 PM

    Great post! I wanted to add something I’ve been working on called Jetstrap (http://jetstrap.com/). Jetstrap is an interface builder for Bootstrap, so you can quickly layout pages using Bootstrap and export the HTML.

    I hope many people find it useful!

  26. Reply Wizard-G October 13, 2012 at 7:24 AM

    This is an awesome list.
    Would you consider adding PaintStrap(http://paintstrap.com/) which I made?
    It can build a bootstrap theme which uses Adobe kuler/COLOURlovers color scheme.
    Thanks!

  27. Reply John Caldman October 19, 2012 at 12:13 AM

    Nice list, thanks. Maybe I will consider some improvements for a project (http://www.byfuss.com) that was built with Twitter Bootstrap and Rails. Tks.

  28. Reply Kai November 10, 2012 at 7:20 AM

    I like “Twitter Bootstrap” for me it’s the best web design kit =)

  29. Reply mr wu December 5, 2012 at 8:33 AM

    Nice list, thanks. Maybe I will consider some improvements for a project (http://www.keping17.com
    http://www.tengyu17.com) that was built with Twitter Bootstrap and Rails. Tks.

  30. Reply tsifei chan January 15, 2013 at 5:25 AM

    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 : https://github.com/pikock/bootstrap-magic

  31. Reply Del February 11, 2013 at 3:24 PM

    Great collection. Will use this to help build the app.

  32. Reply tsohost May 5, 2013 at 8:36 AM

    Yeah, we love bootstrap and its so powerful and flexible! Great post btw. Big fan of dgango 😀

  33. Reply dhanesh mane May 27, 2013 at 8:06 AM

    Hey its really a nice collection of components. Twitter bootstrap is infact a relly very nice framework to design and develop responsive web sites.

    Thanks
    Dhanesh Mane

  34. Reply Prasad Chavan July 11, 2013 at 2:58 AM

    Nice post. But you missed out Fuel UX – http://prasadchavan.in/blog/fuelux-twitter-bootstrap-extension/

  35. Reply akpinar November 1, 2013 at 8:50 AM

    I’ve found another new theme css generator for twitter bootstrap template

    getbootstrap-theme.com

  36. Reply Start Bootstrap November 23, 2013 at 2:01 AM

    Start Bootstrap is another great complementary tool to help you get started on Bootstrap based projects. Start Bootstrap is a library of 100% free and open source HTML starter templates for Bootstrap.

    You can check them out at http://startbootstrap.com. Happy Bootstrapping!

Leave a reply

Search