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 4 UI Kit (Sketch)
Bootstrap Grid Template (Sketch)
Bootsketch – Bootstrap 3 Wireframing Theme (HTML)
Twitter Bootstrap 2.0 (PSD)
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 UI Mockup Templates (Keynote, PowerPoint & OpenOffice)
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 UI (Omnigraffle)
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)
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.
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)
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)
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.
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.
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)
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.