13 Resources to Design for Bootstrap

Twitter’s Bootstrap has rapidly grown into one of the most popular frameworks for web designers and developers. Bootstrap aims to make web development faster and easier, and a growing number of designers and developers are working with Bootstrap.

There are a lot of benefits to using a framework like Bootstrap, most of them focusing on the increased efficiency for building modern and responsive websites. If you’re a Bootstrap user, or if you are interested in giving it a shot, there are several resources that can help with the visual design aspect of working with Bootstrap, and we’ll look at them in this article. There are far more resources that useful for working with Bootstrap in one way or another, but in this collection we are focusing on those resources that help with creating a visual design.

Bootstrap 2.0 Photoshop Template
This free PSD file includes loads of elements that can be used to create your own Bootstrap-based designs in Photoshop. It come with things like buttons, form elements, typography, navigation elements, tables, and much more. It’s also available for Fireworks.

Bootstrap 2.0 Photoshop Template

Twitter Bootstrap Responsive Grid Photoshop Templates
This is a simple PSD file that will help with designing and layout out sites to be coded on Bootstrap.

Twitter Bootstrap Responsive Grid Photoshop Templates

Bootstrap Grid Templates
This set of grids (available for Photoshop and Illustrator) can help for laying out your designs to work well with Bootstraps grid. To get the download you need to pay with a tweet.


Bootstrap Grid Templates

Grid Displayer
If you prefer to design in the brower this bookmarklet will allow you to view Bootstrap’s grids visually right from within your browser.

Grid Displayer

Flat UI
This free UI set from DesignModo in PSD and HTML formats and it was created to be used with Bootstrap. It includes a variety of elements with a flat design style that will help to make your site beautiful.

Flat UI

Twitter Bootstrap Button Generator
This awesome free tool helps you to create your own Bootstrap buttons. You can choose button text, size, color, type, icon, and more.

Twitter Bootstrap Button Generator

Font Awesome
Font Awesome is a free icon font design to be compatible with Bootstrap. You can use Font Awesome in the design of your own sites built on Bootstrap.

Font Awesome

Bootstrap Theme Roller
With Bootstrap Theme Roller you can quickly create and customize your own theme of style. You can then download your theme and put it to work in your design.

Bootstrap Theme Roller

Bootply
Bootply is a playground for Twitter Bootstrap. Use Bootply to design, prototype, extend, or test the Bootstrap framework.

Bootply

Divshot
Divshot is a drag-and-drop editor that allows you to build responsive sites on Bootstrap (as well as Foundation) without the coding. Currently it is in beta and free to use.

Divshot

Jetstrap
Like Divshot, Jetstrap is a web app for quickly building sites on Bootstrap. You can drag-and-drop the Bootstrap components to create your own design.

Jetstrap

Beautiful Buttons for Twitter Bootstrappers
This free tool will allow you to customize your own buttons for use with Bootstrap. You simply use the sliders to customize the button and then copy the CSS.

Beautiful Buttons for Twitter Bootstrappers

StyleBootstrap.info
With this free tool you can stylize and customize some of the common Bootstrap elements like a navigation menu, typography, buttons, forms, and more.

StyleBootstrap.info

Looking for hosting? WPEngine offers secure managed WordPress hosting. You’ll get expert WordPress support, automatic backups, and caching for fast page loads.

10 Responses

Comments are now closed on this post.

  • Love Bootstrap, June 12, 2013

    This is a great round up. Thanks for putting together, Steven. Especially useful for people new to Bootstrap who may not know about many of these tools.

    As time goes by we’re seeing more and more companies, developers and design shops turning to Bootstrap. This adoption is sure to explode once Bootstrap 3 is released, which promises a mobile-first approach + more. Exciting times ahead.

    Many sites of big names and big brands are also running on Bootstrap – Blondie, David Beckham, Delicious, Discovery Channel…the list goes on…

    We run a Bootstrap Showcase site over at where we feature only great sites that use the Bootstrap framework.

    If you need some Bootstrap inspiration, pop over and browse through some very tasty Bootstrap eye-candy at http://lovebootstrap.com

    ♥ B

  • Tim, June 12, 2013

    Why do all grid layouts have such wide margins between the columns?

  • Jess-- Monkey Writer, June 12, 2013

    Woah! This is a pretty sweet blog post. Lovin’ all the inspiration/resources!

  • PLAVEB, June 13, 2013

    The way dominance of web is increasing worldwide in business, its the crucial time and decision to try-out these frameworks. This kinda frameworks gonna set the new trends.

  • Yulaf kepeği, June 16, 2013

    Harika bir site ben çok beğendim sitenizi her gün mutlaka gireceğim bu siteye teşekkürler size…

  • Laaki, June 16, 2013

    Another good resource for bootstrap lovers would be the excellent http://bootswatch.com/ free theme generator.

  • anyanyelvi angol, July 7, 2013

    “Why do all grid layouts have such wide margins between the columns?”

    that’s the trend now. and imho it’s cool.

  • Jose Tovar, July 17, 2013

    Thank you for sharing this resources, I’m a web developer and to be honest I was waiting for something like bootstrap to make better websites.

  • Rajesh, August 6, 2013

    Thanks for posting these resources, I’ve used Font Awesome, it’s really useful because we can integrate icons with ease. Going to check other resources.

  • David Miller, September 2, 2013

    Another great resource that is up to date for Bootstrap 3 is http://startbootstrap.com, free HTML starter templates for Bootstrap.