20+ Beautiful Resources That Complement Twitter Bootstrap

17°

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:

  • oliverastro

    thanx!!!

  • 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.

  • Wolfgang

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

  • 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!

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

  • Madd

    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.

  • Juergen

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

    Thx for the great list.

  • Cezar

    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.

  • DEEP

    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.

  • anon

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

  • 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

  • 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.

  • 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

  • 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.

  • Jesus Garza

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

  • 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 ..

  • 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/

  • 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/

  • Vitalets

    In-place editing with Bootstrap form and popover:

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

  • 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!

  • thanks, really great resources

  • nir

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

  • Max

    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!

  • 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!

  • John Caldman

    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.

  • Kai

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

  • 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.

  • 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

  • Del

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

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

  • 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

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

  • akpinar

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

    getbootstrap-theme.com

  • 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!

Search