Bootstrap 4 Grid Template


A Bootstrap 4 grid template made for the vector based design application Gravit Designer. Contains a fluid and default container to get you started!

author Joey de Vries avatar

Client Work: No

Launched: Wednesday, December 11th 2019

What is Gravit designer?
Gravit Designer is a simple and fast tool to illustrate or design a vector-based logo, also it is perfect to prototype websites or make presentations.

Template Project
I work with Bootstrap since day 1 of my web development career because I wanted to learn functional stuff and not be busy with designing websites. Bootstrap was and is my way to go. I can dream it. And build quickly a decent looking website.

But in most cases, it is good to prototype your website in a sort of image. Tools for this are Photoshop, Muse, Sketch or Gravit Designer. But making that prototype with any idea where your gaps are and where the columns are of your grid makes it hard and sometimes will change the outcome from image to web tremendously. This is why I made a grid template for it.

The Template
This grid template will contain 2 Pages one for the Fluid Container ( .container-fluid ) and the other one for the normal Container ( .container ). You can select the preferred template in the pages section. The other one can be deleted.

The red section is 1 column, and the whitespace between it is the gap between each column. If you design on 2 columns the gap between the 2 columns is not applied so it is space for you to design in.

Tips: When you align rulers with the columns you have the ability to use the snap feature.

Download it NOW

Instead of making my own downloading page, I found a last-minute GumRoad to publish it on. Soon all the Free Products and Paid Products will be listed on my Store Page. For now, you can grab the template here