Coding - Resources - Design - CSS - UX Design

Ultimate Guide To Bootstrap Resources

If you haven’t heard about Bootstrap, start by reading our Boostrap 101 post or visit the Bootstrap website. If you want to see what can be done with Bootstrap, visit these sites: Bootstrap Expo and Built with Bootstrap.

If you are already familiar with Bootstrap you may know that there are numerous resources out there to help you save time on your web project. But even if you know of what’s out there, here’s a list of some more handy plugins, snippets and other resources to add to your growing list!

I’ve broken these resources down into individual topics.

Bootstrap Templates and Themes

  • Bootswatch – Free themes for Bootstrap, just download the CSS file you want and replace it in Bootstrap. 
  • Designmodo – Bootstrap user interface frameworks and themes. You will get PSD (Photoshop) files with several folders, inside there are specific elements you can drag and customize to incorporate into your own design.
  • Creative Market – Offers beautiful and affordable themes (includes some free themes also!)
  • – Everything on this site is for Bootstrap, and the Themes and Templates section is pretty extensive.
  • – Great resource for free Bootstrap templates and themes. “Forever free, open source, and easy to use.”
  • – Examples – The free example templates on the official Bootstrap site are great for basic templates to build from.
  • PaintStrap – Create Bootstrap themes based on different color schemes (uses Adobe Kuler and COLOURlovers color schemes). Input the color scheme (theme or palette ID) and it gives you the CSS. You can also play around with different colors and test how the colors go together.


PaintStrap – Generate beautiful Twitter Bootstrap themes using the Adobe kuler / COLOURlovers color scheme

Bootstrap Editors

  • LayoutIt! – Drag and drop interface builder, supports Bootstrap 2 and 3.
  • Jetstrap – One of the most commonly used Bootstrap editors, starts at $16/month.
  • Bootply – A handy Bootstrap editor that helps you customize your web project by pre-populating certain elements. You can see what your customizations look like and copy the code.
  • wysihtml5 – Javascript plugin for creating a simple and elegant WYSIWYG editor with Bootstrap.


bootstrap-wysihtml5 is a javascript plugin that makes it easy to create simple, beautiful wysiwyg editors with the help of wysihtml5 and Twitter Bootstrap

Grid Builder

Grid Builder – A bootstrap grid builder that allows you to play with positioning of different elements on your page and to test how content is laid out on different devices, and then you just copy the HTML. Bootstrap is built using a “responsive, mobile first fluid grid system that scales up to 12 columns as the device or viewport size increases”.

Content Delivery Network

Bootstrap CDN – Bootstrap CDN is a free and public content delivery network (CDN). Users of Bootstrap CDN can load CSS, JavaScript and images remotely (from Bootstrap CDN’s servers). This is great because it means you don’t have to worry about hosting these files and it will save you time and space.

If your site has a lot of users, using a CDN becomes even more critical as your site’s Bootstrap’s CSS/javascript will be served by several powerful servers. As such, using a CDN can speed up and improve your website performance.  You only need the links below to add Bootstrap to your web project!

Bootstap CDN links

Bootstrap CDN links

Other Useful Resources

  • Table Strap – Basic Bootstrap table generator, input some options and get your HTML!
  • Social Buttons – Elegant social media buttons for Bootstrap 3 using Font Awesome. Supports 24 social media networks.
  • Date and Time Picker – Get the code for an existing demo time & date picker, so you can copy/paste and style.
  • Bootstrap Accessibility Plugin – From PayPal developers, this is an extension of Bootstrap that makes “many of Bootstrap’s components  accessible for keyboard and screen readers’ users.”
  • Bootsnip – A repository of different elements and snippets for Bootstrap. 

Here are some  specifically useful elements from Bootsnipp for you to bookmark:

  • Buttons – button generator
  • Forms – drag and drop form builder

What are some of the resources you use and recommend? Please let us know!

About the author

Patricia is the Founder of Upwards Content, a fledgling content creation/management business. If you like my articles, follow me on Twitter!

Share this post

1 Comment

  1. Hi, Nice post,

    You may also want to add to the list. A site, featuring a large number of free themes, templates and elements.

Leave a Comment

Subscribe To Our Newsletter