20 Awesome Resources for Twitter Bootstrap Lovers

by on 30th April 2012 with 50 Comments

screenshot

Twitter Bootstrap has simply exploded in the web development community. There will always be skeptics and haters but on the whole the project has been a smashing success and can constantly be seen at the top of the Forked and Watched charts at GitHub.

As a result of Bootstrap’s fame, lots of great related resources have been put forth by the development community. Today we’ve collected our favorites into a list of everything you need to get started with Bootstrap. From introductory tutorials to wireframing kits and custom generators, there’s something here for every Bootstrap lover.

Generators

Bootstrap Custom Build

screenshot

Before diving into great third party Bootstrap resources, it’s worth pointing out a great little tool right from Twitter that allows you to completely customize an impressive range of Boostrap features so that you can create a custom build that’s perfect for your project.

If you haven’t checked out Bootstrap in a while, you should give this a look because it’s new with Twitter Bootstrap 2.0. Not only can you use it to take an overweight download and transform it into something lean, you can also save yourself a lot of CSS work by customizing colors, fonts etc. before you even initiate the download.

StyleBootstrap.info

screenshot

As with Twitter’s own tool above, this tool allows you to use a simple interface to customize various aspects of Bootstrap. The difference here is that this one focuses primarily on the visual, design aspects. You can easily go in and change colors, fonts, borders, and a lot more.

The app itself is also more visual than Twitter’s generator and allows you to see what your styles will look like before you hit that download button.

Beautiful Buttons for Twitter Bootstrappers

screenshot

This is a simple little tool that only does one thing: helps you design great looking buttons for use with Twitter Bootstrap. It’s only comprised of fours sliders and a box to copy the resulting CSS, no less, no more. It won’t revolutionize the way you use Bootstrap but it is fun to play with.

Theming

BootstrapStyler

themes

“A beautiful, reusable set of Bootstrap themes for $39″

A wonderful collection of different themes, all in-line with what you’d expect from modern, clean design trends. For a one-off fee, you can access and download all the themes in the collection. Really stunning design work, and $39 is a steal for this entire collection of themes!

WrapBootstrap

screenshot

“WrapBootstrap is a marketplace for premium Bootstrap themes and templates. Impress your clients and visitors while using a single, rock-solid foundation.”

Think of WrapBootstrap as ThemeForest for Bootstrap. You can buy or sell custom styled Bootstrap themes. If you think it’s silly to spend money on a premium theme for a free resource like Bootstrap, just take a look at the success of the WordPress theme market. By default, Bootstrap sites all start to look the same and nicely designed themes can really add some nice variation while allowing you to hold onto the great benefits that Bootstrap offers.

Bootswatch: Free themes for Twitter Bootstrap

screenshot

If you’re not convinced that a premium Bootstrap is the way to go, check out Bootswatch, a great resource for absolutely free Bootstrap themes. They’re not as overhauled as some of the premium themes, but they do offer a nice quick way to choose an alternative color scheme and typography setup.

Even if you don’t want to use a third party theme, these themes are worth checking out so that you can get a feel for how to alter the design of Bootstrap so you’re not always stuck in the same old boring format.

Galleries

Built With Bootstrap

screenshot

Built with Bootstrap is an unofficial Tumblr blog that showcases various websites that, as the name obviously implies, have been built using Bootstrap. This is a fantastic resource for designers working with Bootstrap as it allows you to see what real developers are doing with the framework, which will inspire you to take it further yourself.

If you think that Bootstrap isn’t capable of leading to anything but plain looking design, this gallery will prove you wrong. Sites like Provo Restaurant really surprised me by not looking anything like a clone of the Bootstrap example pages.

For Mockups

Bootstrap Fireworks

screenshot

This is a completely vector based UI toolkit built to mirror Twitter Bootstrap. This is great if you’re not a coder or just need to have a place to shuffle the pieces around without bothering with CSS.

This kit was created based on Twitter Bootstrap 2 so it should be up to date with elements that look just like they will in CSS.

Omnigraffle Stencil for Twitter Bootstrap 2

screenshot

OmniGraffle is a Mac application that makes creating charts and diagrams super easy. It’s been adopted by many members of the design community as a great way to wireframe apps and websites.

The Stencil kit in the link above is an exhaustive attempt to bring all of Bootstrap’s UI elements into OmniGraffle so you can simply drag and drop to create mockups on the fly.

Free Twitter Bootstrap Widgets Library for Axure RP

screenshot

Axure is a powerful, professional level application that allows you to build complex wireframes and interactive mockups. At $589 per license, it’s a solution for serious wireframers only.

If you’d like to work with Twitter Bootstrap and Axure, be sure to download this great free widget library, which includes perfect customizable representations of the Bootstrap items that work seamlessly in Axure.

Bootstrap PSD

screenshot

I know what many of you are thinking, “Fireworks? Axure? OmniGraffle? Just give me a PSD!” Well you’re in luck, because Repix Design has take the time to create and distribute a detailed, customizable PSD containing all of Bootstrap’s various components.

If you like to do your wireframing in Photoshop and you’re a Bootstrapper, this free download is a no brainer. Go grab it now.

Other Goodies

Grails Twitter Bootstrap Scaffolding

screenshot

Grails is web development framework or scaffolding for “agile, industrial strength, rapid web application development.” If you’re a fan of Grails but want to mirror the simple visual style of Bootstrap, you’re in luck because this is exactly what you’re looking for.

Font Awesome

screenshot

Font Awesome is probably my favorite Twitter Bootstrap resource. It’s basically just an icon font, so anyone can use it for any project. However, it was specifically designed to complement the visual aesthetic of Bootstrap.

Font Awesome is free for commercial use, screen reader compatible, and contains a whopping 150 icons (a number that continues to grow). Bookmark this one because you’re going to love it.

Sass Twitter Bootstrap – Projects

screenshot

When the Twitter folks built Bootstrap, they decided to make it even better with LESS, a popular CSS preprocessor that brings the magic of variables, mixins and a lot more to CSS.

The thing is, there’s a big split in the preprocessor fan base. Some people love LESS because it’s simple and incredibly easy to use, but many opt for the more powerful alternative: Sass. We can’t blame the Twitter devs for taking the LESS route but Sass fans need some love too! Fortunately, John W. Long has ported Bootstrap to Sass so now both sides of the preprocessor debate can at least agree on one thing: Bootstrap rocks.

Stylus fans need not mourn the fact they often fail to get a mention, there’s a Bootstrap Stylus port as well.

jQuery UI Bootstrap

screenshot

jQuery UI is a library of interactive interface elements built on top of the immensely popular jQuery JavaScript library. It includes all kinds of great widgets and web elements to easily add a lot of functionality to your site.

jQuery UI Bootstrap attempts to bring the visual style of Bootstrap to the jQuery UI elements. The developer says that you can even use most of Twitter Bootstrap side-by-wide with it without components breaking visually.

WordPress Bootstrap – A WordPress theme based on Twitter Bootstrap

screenshot

“We’ve built the WordPress Bootstrap theme so that it could be used as-is or as a starting point for theme developers. It’s built on top of the brilliant Bones theme framework by Eddie Machado and based on v2.0.1 of Twitter’s Bootstrap.”

It’s a responsive WordPress theme built on Bootstrap that allows you to use the awesome themes from Bootswatch. What more do you need to know? This thing is awesome.

Colorpicker and Datepicker for Twitter Bootstrap

screenshot

Here are a couple of additional elements that you can add to Bootstrap. Both are free, well documented and fit right in with the Bootstrap aesthetic.

Tutorials

5 Incredibly Useful Tools Built Into Twitter Bootstrap

screenshot

This article serves as a beginner’s introduction to Twitter Bootstrap and goes over some of my favorite features. It was written before the launch of Bootstrap 2, so there are even more features now, but it’s still a great first look at how the framework can be helpful to you.

Twitter Bootstrap 2: Bootstrap Goes Responsive

screenshot

To follow up the previous article, I released this overview when Bootstrap 2 was launched. In it I mostly discuss how the responsive side of Bootstrap functions and briefly go over some of the other great new features.

Twitter Bootstrap 101

screenshot

If you really want an all-in introduction to what Bootstrap is and how to use it, look no further than this Tuts+ multi-part video series from Dan Cochran. As with all their content, this series is top notch and super educational.

Articles: Building Twitter Bootstrap

screenshot

In this fantastic article from A List Apart, Twitter Dev Mark Otto takes you behind the scenes and tells you about the logic behind Bootstrap, how the idea evolved and became a reality, and how it represents a key pairing of designers and developers.

#328 Twitter Bootstrap Basics – RailsCasts

screenshot

Thus far we’ve gone through all of these resources without a single reference to the widespread Rails community. You guys can join the fun too though, this video will show you how to integrate Bootstrap with Rails via the twitter-bootstrap-rails gem.

How Do You Complement Bootstrap?

Now that you’ve see our list of awesome Bootstrap resources, we want to hear from you. Leave a comment below and tell us about how you use Bootstrap in your workflow and what third party resources you’ve incorporated into that process.

Comments & Discussion

50 Comments

Comments & Discussion

50 Comments

  1. Mick says:

    Great post, useful!
    I’d like to report you a good example of bootstrap and masonry layout:
    http://openlastminute.it

  2. sudip rayy says:

    Great post but you have missed the Twitter Bootstrap tutorial from w3resource.com, which is the first one on net.
    http://www.w3resource.com/twitter-bootstrap/tutorial.php

  3. Brad says:

    What about a mention for the responsive bootstrap wordpress theme at http://strappress.com?

  4. Max says:

    Whoo, I definitely will give the WordPress Bootstrap Theme a try!

  5. Joseph says:

    For me Bootstrap rocks! I recently decided to give Bootstrap theming a try at WrapBootstrap. Check out my first item at… http://wrapbootstrap.com/theme/acacia-WB001U10E

  6. Ultimate bootstrap resources, must bookmark this article. Thanks Joshua :)

  7. Chris says:

    Thanks for the mention guys! Great roundup of all things bootstrap.

  8. Grady Kelly says:

    Thanks for mentioning ExtendingFireworks.com! From here on, you can find updates to the toolkit and more at bootstrapfireworks.co. follow @fwbootstrap to see what we are up to!

  9. Grady Kelly says:

    frikin’ typo. that should be http://www.bootstrapfireworks.com :) not .co

  10. niranjan says:

    Thanks for compiling list of Bootstrap resources.

    You might like to add BootTheme ( http://www.boottheme.com ) – Theme Generator for the Twitter Bootstrap to your list.

  11. Sergey Belov says:

    Bootstrap in terms of BEM methodology
    https://github.com/tadatuta/bootstrap-bl

  12. Brilliant! Thanks.

  13. Ary Wibowo says:

    thanks for the list… awesome :)

  14. I wrote a Bootstrap theme for jQuery Mobile. I’d love to have it included in this list:

    http://andymatthews.net/code/jQuery-Mobile-Bootstrap-Theme/

  15. Paul C says:

    Excellent list of resources for Twitter Bootstrap :0)

  16. Simon Hamp says:

    Hey guys, just wanted to say thanks for the feature! Don’t want to forget to mention as well that Built With Bootstrap is also a great place to promote your Bootstrap-based creations for free! :)

  17. I like your resources for Twitter Bootstrap. Maybe someone find my tutorial helpfull, too:
    Blank Template and Twitter Bootstrap Tutorial for Joomla!
    http://blank.vc/blog.html/19-blank-template-and-twitter-bootstrap-tutorial-for-joomla.html

  18. lovingsaten says:

    Hey,

    m a web designer,

    m plannin to work on bootstrap, but my trouble is makin it responsive, media query way to go but
    px is difficult way to manage a huge site,
    (http://www buzzle com)
    suggest me a wat out.

    should i go ahead and work it out or what

  19. Very cool! Bookmarked.

  20. Yorty says:

    Wonderful css framework. I starts developing his site: http://measures-converter.com like a sample to my friend @yoandysn who publish it. I use responsive there and i think work perfect. I’ll continue using it.

  21. Sam says:

    Hi all, does anyone have a Twitter feed for a search which they’ve added to their Bootstrap site/s? I’ve found some code online here and there but none seem to be working on my site

    Ta

  22. Dougy says:

    Straight to the bookmark!

    Great selection of resources. I would also like to add Alien Ship Bootstrap for WordPress: http://www.johnparris.com/alienship/

    All the best.

  23. Ale says:

    Wow! Im using right now at least 3 of the 20 tools mentioned! Thanks a lot!

  24. arvendomedia says:

    Hey there – you have a great collection here. since were pretty much into bootstrap too, we made something like the psd-template – just for the illustrator-user as .ai and .eps:
    http://www.arvendo-media.com/projects#c-twitter-bootstrap-design-template

  25. Adam P. says:

    While it isn’t quite a finished project yet, I have big expectations for KickStrap:

    http://ajkochanowicz.github.com/Kickstrap/

    It combines pieces of HTLM5 Boiler Plate, JQuery, Font Awesome and other resources into a Bootstrap frameowrk.

  26. Paul G. says:

    hey,

    Didn’t see the WordPress.org Twitter Bootstrap plugin on the list – it’s got a built-in LESS compiler so you can completely customize the styling.

    For more info, the homepage for the plugin is on our site: http://bit.ly/Icut1J

    Thanks!
    Paul.

  27. hermass says:

    it’s a good collection.thanks

  28. Mohamed Ali says:

    Great post ==> to bookmarks :-)

    thanks for sharing.

  29. Tony says:

    Perfect! Was looking for something like this. You can also find tons of beautyfull Bootstrap templates on ThemeForest – http://themeforest.net/browse/attributes/compatible_with/bootstrap_2.1.0

  30. We built and sell few Bootstrap template on ThemeForest. You can check ours themes here http://goo.gl/z3ZKt

  31. Max says:

    Another great Bootstrap list!

    I built an interface builder for Bootstrap that just opened up for signups called Jetstrap (http://jetstrap.com/).

    Jetstrap makes it super easy to build Bootstrap pages using drag-and-drop and exports clean HTML. I hope people find it useful :)

  32. STEVER says:

    thx fr this article I found Colorpicker for my project here

  33. pokkisam says:

    Man you’ve an ultimate design blog.

  34. logousaha says:

    very inspiring.. thanks

  35. Rod Howard says:

    I’ve just released a couple highly customized admin templates for Bootstrap which are built using Less. (http://jumpstartui.com)

  36. Didier says:

    I used jQuery UI Bootstrap on http://www.lunettessoleil.org/ . I know jQuery, but it’s the first time I use Bootstrap. Theses two libs are really working well together.

  37. Wizard-G says:

    It’s great list.
    I made PaintStrap(http://paintstrap.com/) – It can add a color to Bootstrap using Adobe kuler/COLOURlovers color scheme.
    Would you consider adding this?
    Thanks!

  38. Eric Fookes says:

    If you’re using Windows, you might like to give NoteTab a try. It’s currently the only code-based HTML editor that supports Bootstrap (v 2.1.1).

    Building a Bootstrap page with NoteTab is really easy. First open the included Bootstrap Clip library in NoteTab and then drag-and-drop Bootstrap snippets into your document. Most of these pop up a dialog box that lets you select options and fill-in fields before the completed code is pasted in your page. You’ll find more details and some screenshots here:

    http://www.notetab.com/html-editor.php#Clips

    NoteTab is available in several editions, including a free one called NoteTab Light.

    Full disclosure: we are the developers of NoteTab.

  39. Have you ever considered publishing an e-book or guest authoring
    on other blogs? I have a blog based upon on the same topics you discuss and would love to have you share some stories/information. I know my readers
    would appreciate your work. If you are even remotely
    interested, feel free to send me an email.

  40. Everything is very open with a clear explanation of the issues.

    It was definitely informative. Your website is vvery useful.
    Many tbanks for sharing!

  41. Have you ever considered about including a little bit more than just your
    articles? I mean, what you say is important and all.
    However just imagine if you added some great images or videos to give your posts more, “pop”!
    Your content is excellent but with images and videos,
    this website could certainly be one of the greatest
    in its niche. Great blog!

    Feel free to visit my blog; Lawyer Association Peoria Il

  42. It’s not that personal – a lot of the time the
    je nais sai qua you establish online doesn’t translate well in the real world.
    However, obtaining reviews for major websites is convenient as well.
    Take the initiative and suggest an exciting, but safe,
    real life meeting.

    my web-site :: online dating sites

  43. Good information. Lucky me I found your site by accident (stumbleupon).

    I’ve book-marked it for later!

    Also visit my homepagge … Stopping Ocwen foreclosure
    in Michigan [http://medication-adhd.com/cerulli]

  44. Hey There. I found your blog using msn. This is a really well written article.
    I will make sure to bookmark it and return to read more of your useful info.
    Thanks for the post. I’ll definitely comeback.

    Feel free to surf to my website; Pro Power CLeanse diets

  45. Hey this is somewhat of off topic but I was wanting to know if blogs use WYSIWYG editors or if you have to manually code with HTML.
    I’m starting a blog soon but have no coding experience so I wanted to
    get advice from someone with experience. Any help would be greatly appreciated!

    Look at my homepage; Attorneys Vs Attornies In Peoria Il

  46. Hello very nice blog!! Man .. Excellent .. Wonderful ..

    I will bookmark your website and take the feeds also?
    I am glad to search out so many helpful info here in
    the post, we want develop extra techniques in this regard, thanks for sharing.
    . . . . .

Leave a Comment

Subscribe
Membership
About the Author