Mockup: iPhone 5s Wire Mockup (PSD)
Mockup: Isometric iPad Air Perspective Mockup (PSD)

Elements Design: Bootstrap responsive grid - Mobile, Tablet, Website (PSD)


In graphic design, a grid is a structure (usually two-dimensional) made up of a series of intersecting straight (vertical, horizontal, and angular) or curved guide lines used to structure content. The grid serves as an armature on which a designer can organize graphic elements (images, glyphs, paragraphs) in a rational, easy to absorb manner. A grid can be use to organize graphic elements in relation to a page, in relation to other graphic elements on the page, or relation to other parts of the same graphic element or shape. - from wikipedia

Responsive Web design (RWD) is a Web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from mobile phones to desktop computer monitors). - from wikipedia

Resource: Bootstrap responsive grid - Mobile, Tablet, Website (PSD)

A site designed with RWD adapts the layout to the viewing environment by using fluid, proportion-based grids, flexible images, and CSS3 media queries, an extension of the @media rule. - from wikipedia
  • The fluid grid concept calls for page element sizing to be in relative units like percentages, rather than absolute units like pixels or points.
  • Flexible images are also sized in relative units, so as to prevent them from displaying outside their containing element.
  • Media queries allow the page to use different CSS style rules based on characteristics of the device the site is being displayed on, most commonly the width of the browser.
  • Server-side components (RESS) in conjunction with client-side ones such as media queries can produce faster-loading sites for access over cellular networks and also deliver richer functionality/usability avoiding some of the pitfalls of device-side-only solutions.

These grid PSDs are based on the "basic" Twitter Bootstrap column/gutter responsive behaviour.


grid mobile: 320px width - 10px columns - 10px gutter
Resource: Bootstrap responsive grid - Mobile, Tablet, Website (PSD)

grid tablet: 1024px width - 60px columns - 20px gutter
Resource: Bootstrap responsive grid - Mobile, Tablet, Website (PSD)

grid website: 1280px width - 70px columns - 30px gutter
Resource: Bootstrap responsive grid - Mobile, Tablet, Website (PSD)

Created by michael henning

We would appreciate it if you credit our resources and help us to spread this work and name.


Tags: bootstrap, responsive, grid, layout, psd, tablet, mobile, website, desktop, pixels, columns, gutter, design, web design

Leave a Comment

No Comment

© Creative3x Ltd.