·

13 Resources to Design for Bootstrap

Vandelay Design may receive compensation from companies, products, and services covered on our site. For more details, please refer to our Disclosure page.

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.

UNLIMITED DOWNLOADS: 50+ Million Add-Ons & Design Assets

Envato Elements Ad - Unlimited Downloads of Creative Assets
placeholderplaceholder

Bootstrap Resources

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

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