15 pravidel webové grafiky - PORTA DESIGN
1. Style guide · Logo –⁠ musí být vektorové, potřebujeme i čtvercové logo pro faviconu · Font – všechny řezy písma a zdroj (preferujeme fonty ...
Bootstrap
Mřížka pomáhá udržet vizuální řád a zároveň usnadňuje kódování grafiky. V rámci webu se nejčastěji pracuje podle <anchor>Bootstrap</anchor> (12 vertikálních sloupců, rozestupy 30px). Přípravou vhodné mřížky by měl začínat každý návrh webové grafiky. To ale neznamená, že ji nemůžete nikdy porušit. Pokud k tomu dojde, musíte pro to mít dobrý důvod.
25+ Bootstrap Grid System PSD Templates » CSS Author
25+ Bootstrap Grid System PSD Templates » CSS Author[Skip to main content](#brx-content) [Skip to footer](#brx-footer) [![](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201140%2090'%3E%3C/svg%3E)](https://1.envato.market/LnDkj)

[![css Author](//cdn.cssauthor.com/wp-content/uploads/2021/01/cssauthor.svg)](https://cssauthor.com)

#### Search

Search ...

×

- Browse







- [Resources](https://cssauthor.com/resource/)
- [Mockups](https://cssauthor.com/mockups/)
- [Development Tools](https://cssauthor.com/web-development-tools/)
- [Inspiration](https://cssauthor.com/inspiration/)
- [UI Design](https://cssauthor.com/ui-design/)
- [Templates](https://cssauthor.com/templates/)
- [Website Templates](https://cssauthor.com/website-templates/)
- [Fonts](https://cssauthor.com/free-fonts/)
- [CSS](https://cssauthor.com/css/)
- [WordPress](https://cssauthor.com/wordpress/)
- [WordPress Plugins](https://cssauthor.com/wordpress-plugins/)
- [WordPress Themes](https://cssauthor.com/wordpress-themes/)
- [Figma](https://cssauthor.com/figma/)
- [Freebies](https://cssauthor.com/freebies/)
- [CMS](https://cssauthor.com/cms/)
- [Coding](https://cssauthor.com/coding/)
- [Icons](https://cssauthor.com/icons/)

- [Resources](https://cssauthor.com/resource/)
- [Mockups](https://cssauthor.com/mockups/)
- [Development Tools](https://cssauthor.com/web-development-tools/)
- [Inspiration](https://cssauthor.com/inspiration/)
- [UI Design](https://cssauthor.com/ui-design/)
- [Templates](https://cssauthor.com/templates/)
- [Website Templates](https://cssauthor.com/website-templates/)
- [Fonts](https://cssauthor.com/free-fonts/)
- [CSS](https://cssauthor.com/css/)
- [WordPress](https://cssauthor.com/wordpress/)
- [WordPress Plugins](https://cssauthor.com/wordpress-plugins/)
- [WordPress Themes](https://cssauthor.com/wordpress-themes/)
- [Figma](https://cssauthor.com/figma/)
- [Freebies](https://cssauthor.com/freebies/)
- [CMS](https://cssauthor.com/cms/)
- [Coding](https://cssauthor.com/coding/)
- [Icons](https://cssauthor.com/icons/)

- Browse







- [Resources](https://cssauthor.com/resource/)
- [Mockups](https://cssauthor.com/mockups/)
- [Development Tools](https://cssauthor.com/web-development-tools/)
- [Inspiration](https://cssauthor.com/inspiration/)
- [UI Design](https://cssauthor.com/ui-design/)
- [Templates](https://cssauthor.com/templates/)
- [Website Templates](https://cssauthor.com/website-templates/)
- [Fonts](https://cssauthor.com/free-fonts/)
- [CSS](https://cssauthor.com/css/)
- [WordPress](https://cssauthor.com/wordpress/)
- [WordPress Plugins](https://cssauthor.com/wordpress-plugins/)
- [WordPress Themes](https://cssauthor.com/wordpress-themes/)
- [Figma](https://cssauthor.com/figma/)
- [Freebies](https://cssauthor.com/freebies/)
- [CMS](https://cssauthor.com/cms/)
- [Coding](https://cssauthor.com/coding/)
- [Icons](https://cssauthor.com/icons/)

- [Resources](https://cssauthor.com/resource/)
- [Mockups](https://cssauthor.com/mockups/)
- [Development Tools](https://cssauthor.com/web-development-tools/)
- [Inspiration](https://cssauthor.com/inspiration/)
- [UI Design](https://cssauthor.com/ui-design/)
- [Templates](https://cssauthor.com/templates/)
- [Website Templates](https://cssauthor.com/website-templates/)
- [Fonts](https://cssauthor.com/free-fonts/)
- [CSS](https://cssauthor.com/css/)
- [WordPress](https://cssauthor.com/wordpress/)
- [WordPress Plugins](https://cssauthor.com/wordpress-plugins/)
- [WordPress Themes](https://cssauthor.com/wordpress-themes/)
- [Figma](https://cssauthor.com/figma/)
- [Freebies](https://cssauthor.com/freebies/)
- [CMS](https://cssauthor.com/cms/)
- [Coding](https://cssauthor.com/coding/)
- [Icons](https://cssauthor.com/icons/)

- [Resources](https://cssauthor.com/resource/)
- [Mockups](https://cssauthor.com/mockups/)
- [Development Tools](https://cssauthor.com/web-development-tools/)
- [Inspiration](https://cssauthor.com/inspiration/)
- [UI Design](https://cssauthor.com/ui-design/)
- [Templates](https://cssauthor.com/templates/)
- [Website Templates](https://cssauthor.com/website-templates/)
- [Fonts](https://cssauthor.com/free-fonts/)
- [CSS](https://cssauthor.com/css/)
- [WordPress](https://cssauthor.com/wordpress/)
- [WordPress Plugins](https://cssauthor.com/wordpress-plugins/)
- [WordPress Themes](https://cssauthor.com/wordpress-themes/)
- [Figma](https://cssauthor.com/figma/)
- [Freebies](https://cssauthor.com/freebies/)
- [CMS](https://cssauthor.com/cms/)
- [Coding](https://cssauthor.com/coding/)
- [Icons](https://cssauthor.com/icons/)

- [![](https://cdn.cssauthor.com/wp-content/uploads/2021/01/Side-ad.png?strip=all&fit=760%2C1262&lossy=1&ssl=1)](http://1.envato.market/c/402372/298927/4662)


[Home](https://cssauthor.com)/ [Bootstrap](https://cssauthor.com/bootstrap/)/25+ Bootstrap Grid System PSD Templates

# 25+ Bootstrap Grid System PSD Templates

[Bootstrap](https://cssauthor.com/bootstrap/), [Photoshop](https://cssauthor.com/photoshop/), [Resources](https://cssauthor.com/resource/)

[![Free Poster A2 Mockup Design PSD](//cdn.cssauthor.com/wp-content/uploads/2021/01/Download-unlimitted-design-Elements.png?strip=all&lossy=1&ssl=1)](https://1.envato.market/LnDkj)

**Bootstrap** is the best and complete **front-end framework** for the web. Bootstrap is a set of pre-made elements build with HTML, **[CSS](https://cssauthor.com/css-frameworks/)** and **[javascript](https://cssauthor.com/javascript-frameworks/)**. **[Bootstrap](https://cssauthor.com/bootstrap-templates/)** provides the foundation to build complex web apps or websites and make things easier.

The best part of **[bootstrap](https://cssauthor.com/bootstrap-editors/)** is that it is made for responsive web design. You don’t bother about how your content will appear in different devices. **[bootstraps](https://cssauthor.com/bootstrap-admin-templates/)** built in **grid system** is one of the best responsive frameworks in the world. Thousands of websites are currently using bootstrap framework on their websites.

When you design for bootstrap you need to be little cautious about **bootstraps grid system**. Today in this post we have gathered a good l list of **bootstrap grid PSD designs**. These PSD grid systems are helpful when you design for bootstrap. You will get a better understanding of how to layout your design based on bootstraps grid system. A **bootstrap grid system PSD** is a must have tool if you design a lot for bootstrap. I recommend using a bootstrap grid system if you are a begginer, it’s always a good practice.

**See also :** [Best Grid Systems & Tools for Responsive Design](https://cssauthor.com/grid-systems/)

## Free Bootstrap Grid Templates for Figma

![Free Bootstrap Grid Templates for Figma](//cdn.cssauthor.com/wp-content/uploads/2020/02/Free-Bootstrap-Grid-Templates-for-Figma.jpg?strip=all&lossy=1&ssl=1)

[Download](https://dribbble.com/shots/4729681-FREE-Bootstrap-Grid-Templates-for-Figma)

## Bootstrap 4 Grid System PSD

![Bootstrap 4 Grid System PSD](//cdn.cssauthor.com/wp-content/uploads/2015/03/Bootstrap-4-Grid-System-PSD.jpg?strip=all&lossy=1&ssl=1)

[Download](https://dribbble.com/shots/4166287-Bootstrap-4-Grid-System-PSD)

## Bootstrap 4 Grid System

![Bootstrap 4 Grid System](//cdn.cssauthor.com/wp-content/uploads/2015/03/Bootstrap-4-Grid-System.jpg?strip=all&lossy=1&ssl=1)

[Download](https://dribbble.com/shots/4169597-Freebie-Bootstrap-4-Grid-System)

## Bootstrap Grid PSD for Full HD Screens

![Bootstrap Grid PSD for Full HD Screens](//cdn.cssauthor.com/wp-content/uploads/2015/03/Bootstrap-Grid-PSD-for-Full-HD-Screens.jpg?strip=all&lossy=1&ssl=1)

[Download](https://dribbble.com/shots/4163917-Freebie-Bootstrap-Grid-PSD-for-Full-HD-Screens)

## Responsive PSD and Figma Grid

![Responsive PSD and Figma Grid](//cdn.cssauthor.com/wp-content/uploads/2015/03/Responsive-PSD-and-Figma-Grid.jpg?strip=all&lossy=1&ssl=1)

[Download](https://dribbble.com/shots/4108255-Responsive-PSD-and-Figma-Grid)

## Bootstrap Grids Adobe XD

![Bootstrap Grids Adobe XD](//cdn.cssauthor.com/wp-content/uploads/2015/03/Bootstrap-Grids-Adobe-XD.jpg?strip=all&lossy=1&ssl=1)

[Download](http://xdtemplates.com/downloads/bootstrap-grids-for-adobe-xd/)

## Bootstrap Grid for Figma

![Bootstrap Grid for Figma](//cdn.cssauthor.com/wp-content/uploads/2015/03/Bootstrap-Grid-for-Figma.jpg?strip=all&lossy=1&ssl=1)

[Download](https://dribbble.com/shots/3638835-Bootstrap-Grid-for-Figma)

## Bootstrap 4 Grid \[Sketch\]

![Bootstrap 4 Grid](//cdn.cssauthor.com/wp-content/uploads/2015/03/Bootstrap-4-Grid.jpg?strip=all&lossy=1&ssl=1)

[Download](https://dribbble.com/shots/3563147-Bootstrap-4-Grid-Sketch)

### Responsive Artboard PSD for Twitter Bootstrap

![Responsive Artboard PSD for Twitter Bootstrap](//cdn.cssauthor.com/wp-content/uploads/2015/03/Responsive-Artboard-PSD-for-Twitter-Bootstrap.jpg?strip=all&lossy=1&ssl=1)

[Download](https://dribbble.com/shots/2539156-Responsive-Artboard-PSD-for-Twitter-Bootstrap)

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

![Bootstrap Grid Template for Retina, 4k, 5k (PSD + GuideGuide)](//cdn.cssauthor.com/wp-content/uploads/2015/03/Bootstrap-Grid-Template-for-Retina.jpg?strip=all&lossy=1&ssl=1)

[Download](https://dribbble.com/shots/2506038-Bootstrap-Grid-Template-for-Retina-4k-5k-PSD-GuideGuide)

### Bootstrap 4 Grid (Sketch)

![Bootstrap 4 Grid (Sketch)](//cdn.cssauthor.com/wp-content/uploads/2015/03/Bootstrap-4-Grid-Sketch.jpg?strip=all&lossy=1&ssl=1)

[Download](https://dribbble.com/shots/2441131-Bootstrap-4-Grid)

### Bootstrap 3.0 Responsive Grid System PSD

![Bootstrap 3.0 Responsive Grid System PSD](//cdn.cssauthor.com/wp-content/uploads/2015/03/Bootstrap-3-0-Responsive-Grid-System-PSD.jpg?strip=all&lossy=1&ssl=1)

[Download](https://dribbble.com/shots/2196646-Bootstrap-3-0-Responsive-Grid-System-PSD-Download-Link)

### Bootstrap 4 PSD

![Bootstrap 4 PSD](//cdn.cssauthor.com/wp-content/uploads/2015/03/Bootstrap-4-PSD.jpg?strip=all&lossy=1&ssl=1)

[Download](http://ghostlypixels.com/freebie/bootstrap-4-psd/)

### Bootstrap 12 columns grid for artboards

![Bootstrap 12 columns grid for artboards](//cdn.cssauthor.com/wp-content/uploads/2015/03/Bootstrap-12-columns-grid-for-artboards.jpg?strip=all&lossy=1&ssl=1)

[Download](https://dribbble.com/shots/2114936--PSD-Bootstrap-12-columns-grid-for-artboards)

### FREE Bootstrap Grid PSDs

![FREE Bootstrap Grid PSDs](//cdn.cssauthor.com/wp-content/uploads/2015/03/FREE-Bootstrap-Grid-PSDs.jpg?strip=all&lossy=1&ssl=1)

[Download](https://dribbble.com/shots/2051987-FREE-Bootstrap-PSDs)

### Bootstrap 3 Responsive Grid Illustratror Templates (AI)

![Bootstrap 3 Responsive Grid Illustratror Templates (AI)](//cdn.cssauthor.com/wp-content/uploads/2015/03/Bootstrap-3-Responsive-Grid-Illustratror-Templates.jpg?strip=all&lossy=1&ssl=1)

[Download](https://dribbble.com/shots/2094373-Bootstrap-3-Responsive-Grid-Illustratror-Templates-AI)

### FREE Bootstrap .SKETCH

![FREE Bootstrap .SKETCH](//cdn.cssauthor.com/wp-content/uploads/2015/03/FREE-Bootstrap-SKETCH.jpg?strip=all&lossy=1&ssl=1)

[Download](https://dribbble.com/shots/2083536-FREE-Bootstrap-SKETCH)

### Bootstrap 3 Responsive Grid Template (Sketch)

![Bootstrap 3 Responsive Grid Template](//cdn.cssauthor.com/wp-content/uploads/2015/03/Bootstrap-3-Responsive-Grid-Template.jpg?strip=all&lossy=1&ssl=1)

[Download](https://dribbble.com/shots/2005501-Default-Bootstrap-3-Responsive-Grid-Template)

## Free 12 Column Bootstrap v3.0.0 Grid Pattern PSD

![Free 12 Column Bootstrap v3.0.0 Grid Pattern PSD](//cdn.cssauthor.com/wp-content/uploads/2015/02/Free-12-Column-Bootstrap-v3.0.0-Grid-Pattern-PSD.jpg?strip=all&lossy=1&ssl=1)

[Download](https://www.behance.net/gallery/10633891/Free-12-Column-Bootstrap-v300-Grid-Pattern-PSD)

## Responsive Grid System PSDs

![Responsive Grid System PSDs](//cdn.cssauthor.com/wp-content/uploads/2015/02/Responsive-Grid-System-PSDs.jpg?strip=all&lossy=1&ssl=1)

[Download](http://ironcodestudio.com/grid-system-psd/)

## 4 Responsive Grid System PSD

![4 Responsive Grid System PSD](//cdn.cssauthor.com/wp-content/uploads/2015/02/4-Responsive-Grid-System-PSD.jpg?strip=all&lossy=1&ssl=1)

[Download](https://dribbble.com/shots/1613847-4-Responsive-Grid-System-PSD)

## Bootstrap 3 Grid – 12 Column – Free PSD

![Bootstrap 3 Grid - 12 Column - Free PSD](//cdn.cssauthor.com/wp-content/uploads/2015/02/Bootstrap-3-Grid.jpg?strip=all&lossy=1&ssl=1)

[Download](https://dribbble.com/shots/1580545-Bootstrap-3-Grid-12-Column-Free-PSD)

## Bootstrap responsive grid PSD – Mobile, Tablet, Web – Free

![Bootstrap responsive grid PSD - Mobile, Tablet, Web - Free](//cdn.cssauthor.com/wp-content/uploads/2015/02/Bootstrap-responsive-grid-PSD.jpg?strip=all&lossy=1&ssl=1)

[Download](https://dribbble.com/shots/1064433-Bootstrap-responsive-grid-PSD-Mobile-Tablet-Web-Free)

## Bootstrap Grid pack PSD

![Bootstrap Grid pack PSD](//cdn.cssauthor.com/wp-content/uploads/2015/02/Bootstrap-Grid-pack-PSD.jpg?strip=all&lossy=1&ssl=1)

[Download](http://jarederickson.com/free-mobile-to-desktop-foundation-and-bootstrap-grid-psd/)

## 12 Column Vector Grid Draft (Mobile, Tablet, Desktop)

![12 Column Vector Grid Draft (Mobile, Tablet, Desktop)](//cdn.cssauthor.com/wp-content/uploads/2015/02/12-Column-Vector-Grid-Draft.jpg?strip=all&lossy=1&ssl=1)

[Download](https://dribbble.com/shots/1711320-12-Column-Vector-Grid-Draft-Mobile-Tablet-Desktop)

## Bootstrap 3 Responsive Grid Photoshop Templates (PSD)

![Bootstrap 3 Responsive Grid Photoshop Templates (PSD)](//cdn.cssauthor.com/wp-content/uploads/2015/02/Bootstrap-3-Responsive-Grid.jpg?strip=all&lossy=1&ssl=1)

[Download](http://benstewart.net/2014/04/bootstrap3-responsive-grid-photoshop/)

## Twitter Bootstrap Responsive Grid Photoshop Templates (PSD)

![Twitter Bootstrap Responsive Grid Photoshop Templates (PSD)](//cdn.cssauthor.com/wp-content/uploads/2015/02/Twitter-Bootstrap-Responsive-Grid.jpg?strip=all&lossy=1&ssl=1)

[Download](http://benstewart.net/2012/06/bootstrap-responsive-photoshop-templates/)

## Twitter Bootstrap’s responsive grid Template PSD

![Twitter Bootstrap's responsive grid Template PSD](//cdn.cssauthor.com/wp-content/uploads/2015/02/Twitter-Bootstraps-responsive-grid-Template-PSD.jpg?strip=all&lossy=1&ssl=1)

[Download](https://deanclatworthy.com/2013/01/a-photoshop-psd-template-for-twitter-bootstraps-responsive-grid/)

## Bootstrap Grid Templates

![Bootstrap Grid Templates](//cdn.cssauthor.com/wp-content/uploads/2015/02/Bootstrap-Grid-Templates.jpg?strip=all&lossy=1&ssl=1)

[Download](https://psdwrangler.tumblr.com/post/24530125241/bootstrap-grid-templates)

## Bootstrap 3 Grid System – 1140px and Retina Ready

![Bootstrap 3 Grid System - 1140px and Retina Ready](//cdn.cssauthor.com/wp-content/uploads/2015/03/Bootstrap-3-Grid-System.jpg?strip=all&lossy=1&ssl=1)

[Download](https://dribbble.com/shots/1951548-Bootstrap-3-Grid-System-1140px-and-Retina-Ready)

- [Facebook](https://www.facebook.com/sharer.php?u=https%3A%2F%2Fcssauthor.com%2Fbootstrap-grid-system-psd-templates%2F&picture=https%3A%2F%2Fcssauthor.com%2Fwp-content%2Fuploads%2F2015%2F03%2FBootstrap-Grid-System-PSD-Templates-1.png&title=25%2B%20Bootstrap%20Grid%20System%20PSD%20Templates)
- [LinkedIn](https://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fcssauthor.com%2Fbootstrap-grid-system-psd-templates%2F&title=25%2B%20Bootstrap%20Grid%20System%20PSD%20Templates)
- [Pinterest](https://pinterest.com/pin/create/button/?url=https%3A%2F%2Fcssauthor.com%2Fbootstrap-grid-system-psd-templates%2F&media=https%3A%2F%2Fcssauthor.com%2Fwp-content%2Fuploads%2F2015%2F03%2FBootstrap-Grid-System-PSD-Templates-1.png)
- [X](https://x.com/share?text=25%2B%20Bootstrap%20Grid%20System%20PSD%20Templates&url=https%3A%2F%2Fcssauthor.com%2Fbootstrap-grid-system-psd-templates%2F)

### Related Posts

- ![50 Beautiful Collection of Digital Arts](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20320%20240'%3E%3C/svg%3E)



### [50 Beautiful Collection of Digital Arts](https://cssauthor.com/50beautiful-collection-of-digital-arts/)

- ![Learn Figma - Top Free Figma Courses 2022](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20320%20240'%3E%3C/svg%3E)



### [Learn Figma – Top Free Figma Courses 2023](https://cssauthor.com/learn-figma-top-free-figma-courses/)

- ![Best Flutter Templates for Free](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20320%20240'%3E%3C/svg%3E)



### [50+ Best Flutter Templates for Free](https://cssauthor.com/best-flutter-templates-for-free/)

- ![Latest Free Web Elements From July 2015](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20320%20240'%3E%3C/svg%3E)



### [Latest Free Web Elements From July 2015](https://cssauthor.com/latest-free-web-elements-from-july-2015/)

- ![Free Dashboard UI Design PSD](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20320%20240'%3E%3C/svg%3E)



### [Free Dashboard UI Design PSD](https://cssauthor.com/dashboard-design-psd-2/)


© 2024 CSS Author. All Rights Reserved.

[![CSS Author](//cdn.cssauthor.com/wp-content/uploads/2021/01/cssauthor.svg)](https://cssauthor.com)