20 Free Wireframe, Grid and UI Templates for Bootstrap

Not since Blueprint or the 960.gs has a front-end framework hit the popularity heights that Bootstrap is currently enjoying. And rightly so. It is perhaps the most complete web framework ever. With its clear and concise documentation, all of its UI elements, its 12-column responsive grid, Javascript plugins, and all of the free templates and components created by the design community, Bootstrap is the perfect tool for rapidly kick-starting any web project.

Having said all that, you do need to know your way around code to truly appreciate the power that Bootstrap offers. So, what if you are a designer that doesn’t know how to code and your developer does want to use Bootstrap? We have the solution for you.

In this post we have collected a selection of UI and wireframe templates that have all been designed for working with Bootstrap, making it very easy to pass your designs on to the developer. They are all in various formats (psd, ai, png…) and available for all popular applications like Photoshop, Fireworks, Illustrator, Sketch and Omnigraffle.

Bootstrap Grid Template for Retina, 4k, 5k (PSD)

Bootstrap Grid Template PSD

Bootstrap 4 UI Kit (Sketch)

Bootstrap 4 UI Kit

Bootstrap 12 Column Grid for Artboards (PSD)

Bootstrap 12 Column Grid for Artboards

Bootstrap 3 Responsive Grid Templates (AI)

Bootstrap 3 Responsive Grid Templates

Default Bootstrap 3 Responsive Grid Template (Sketch)

Default Bootstrap 3 Responsive Grid Template

Bootstrap Grid Template (Sketch)

Bootstrap Grid Template

Responsive Bootstrap Grids (PSD)

Responsive Bootstrap Grids PSD

Bootsketch – Bootstrap 3 Wireframing Theme (HTML)

Bootsketch Bootstrap 3 Wireframing Theme HTML

Twitter Bootstrap 2.0 (PSD)

Twitter Bootstrap 2.0 GUI Resources

This GUI template, from Bent Design Studio, includes all of Bootstrap v2.0s major components, including: The grid, tables, typography, forms, autocomplete, buttons, icons, alert messages, progress bars and much, much more.

Twitter Bootstrap v2 Template (PSD)

Twitter Bootstrap v2 Template GUI Resources

Sparo – Free Bootstrap Web Elements (PSD)

Sparo Free Web Elements based on Bootstrap GUI Resources

Twitter Bootstrap UI Mockup Templates (Keynote, PowerPoint & OpenOffice)

Twitter Bootstrap UI Mockup Templates for Keynote, PowerPoint and OpenOffice GUI Resources

These vector UI components have been designed from scratch to work with Apple Keynote, Microsoft PowerPoint and OpenOffice Impress, and are fully editable and customizable without needing any additional design tools.

Twitter Bootstrap Widgets Library (Axure RP)

Twitter Bootstrap Widgets Library for Axure RP GUI Resources

Twitter Bootstrap UI (Omnigraffle)

Twitter Bootstrap UI for Omnigraffle GUI Resources

This is a basic set (not a complete set) of Bootstrap UI components to use when wireframing applications using Omnigraffle.

Twitter Bootstrap 1.4 Assets & Grid (Omnigraffle)

Twitter Bootstrap 1.4 Assets & Grid for Omnigraffle GUI Resources

This UI kit is based on the Bootstrap CSS Toolkit 1.4, providing a 940px grid for laying out your mockups and includes the design and layout assets.

Bootstrap Grid System for Adobe Fireworks (.png)

Bootstrap Grid System for Adobe Fireworks GUI Resources

This Bootstrap Grid System is based on its 1170px responsive grid and comes with 3, 4, 6 and 12 columns options.

Bootstrap Scaffolding Grid Templates (AI & PSD)

Bootstrap Scaffolding Grid Templates GUI Resources

Here is a set of templates, in both Photoshop and Illustrator formats, that are based on Bootstraps default responsive grids. You can use these grids to set out the guides before you start designing.

Bootstrap Grid Pack (PSD)

Bootstrap Grid Pack GUI Resources

This Photoshop grid pack, from Jared Erickson, includes a mobile template (300px one column), tablet template (724px 12 columns), desktop template (940px 12 columns) and a large screen template (1170px 12 column). These grid templates accommodate both Bootstrap and Foundation from ZURB.

Bootstrap Responsive Grid Photoshop Templates (PSD)

Bootstrap Responsive Grid Photoshop Templates GUI Resources

This download package includes three Photoshop PSD files, with each PSD layer containing the Bootstrap 2.0 table of screen/grid sizes, a layer of columns in red, and vertical grid lines at column edges. Each file is 1200px wide with the grid in the middle.

Bootstrap Illustrator Template (AI)

Bootstrap Illustrator Template GUI Resources

This Illustrator grid layout is based on the default 12 column grid released in the 2.0 version of Bootstrap.

Bootstrap Grid Layout (Balsamiq Mockups)

Bootstrap Grid Layout for Balsamiq Mockups GUI Resources

This is a set of grid layouts using the Bootstrap framework's default responsive grid. The different layouts correspond to min-width and max-width media queries for different viewport dimensions.

Free Printable Twitter Bootstrap Wireframe Template (PDF)

Free Printable Twitter Bootstrap Wireframe Template GUI Resources

(648 Posts)

Paul Andrew

Paul is the founder and editor of Speckyboy Design Magazine. He has many years experience within the web design industry and a passion for the latest web technologies and design trends. He lives in the small town of Inverness in the north of Scotland. Follow him on Twitter.

Comments

  • fusion01

    brilliant resource, thank you!!!!