In this post, we are going to share our free Bootstrap Grid PSD templates so that you can start designing your website using these PSD as a boilerplate for your project.

Our development team also use the these PSD grid templates when they convert PSD to Bootstrap HTML

Bootstrap is the most preferred and complete front-end framework for PSD to Responsive HTML conversion projects. Bootstrap is a set of pre-made designs and elements that is powered by HTML, CSS, and JS (Javascript). Bootstrap is used to build user-friendly web apps and websites, it is mainly used by developers to make or develop websites easier.

Bootstrap is also made for mobile phone, tablets and desktop PCs. In this article, we provided you with 3 bootstrap grid templates: mobile, tablet, and desktop viewports. You just need to design it under Adobe Photoshop to be able to access it.

Features:

  • Separate PSDs for .col-xs-, .col-sm-, .col-md, and .col-lg-
  • Resizable shapes for columns
  • Text-size guide for websites
  • Based on Bootstrap 4

Bootstrap Grid PSD for XS (Mobile)

You can download the Bootstrap-grid-xs-sm.psd file to design for a mobile device.

<768px for mobile devices

Small Devices Tablets/Tablet Portrait (not greater than 768 px)

Class prefix: .col-xs- and .col-sm-

Preferred Font Size for this screen: Regular Size: 16px, Secondary: 14px

This grid is optimized for mobile phones, the height of the canvas is longer than usual because you’ll use a lot of height in designing for mobile devices.

Bootstrap Grid PSD for SM (Tablet)

You can download the file Bootstrap-grid-md.psd file to start your design for Tablet

Bootstrap 960px psd grid

Small Devices Tablets/Tablet Portrait (not greater than 768 px)

Class prefix: .col-md-

Preferred Font Size for this screen: Regular Size: 16px, Secondary: 14px

This grid template is made for tablets in portrait view. 

Bootstrap Grid PSD for LG (Desktop PC)

Bootstrap Grid PSD for Large Screens
Bootstrap Grid PSD for Large Screens >1200px

Large devices Desktops (not greater than 1200 px)

You can use the following css class for larger device

Class prefix: .col-lg-

Preferred Font Size for this screen: Header Title: 34px, Secondary: 18px, Regular: 16px

This grid layout is optimized for desktop PCs with a max breakpoint of 1170px wide. The template’s width is at 1600px so you can see how your design looks on bigger screens.

We hope this will help you make your design process more efficient and easy!

Download Bootstrap Grid Template

All you need is design to get started!

Get Free Quote