Bootstrap 3 Adobe Illustrator Template – Easy to Use for Large Devices Desktops, Medium Devices Laptops and Small Devices Tablets

 

Bootstrap-3-Adobe-Illustrator-Template-Large-Medium-Small-devices
Explanation of Bootstrap 3 Div sizing

I’ve made an Adobe Illustrator Template that should help you understand how the Columns Work in Bootstrap 3 across the different responsive sizes. I created this illustrator template to share with a designer that couldn’t quite grasp how the Bootstrap resizes a column based on the media query.

What are the sizes for Bootstrap 3 Columns?

Large Devices
Width: 1170px wide
Columns: @97px
Left and Right Gutter: 15px each

Medium Devices
Width: 970px wide
Columns: @ 81px
Left and Right Gutter 15px each

Small Devices Tablet
Width: 750px wide
Columns: @ 62px
Left and Right Gutter: 15px each

In all of the above sizes, Bootstrap uses 12 columns.

Bootstrap-3-Large-Device-Columns
Large Device
Bootstrap-3-Medium-Device-Columns
Medium Device
Bootstrap-3-Small-Device-Columns
Small Device

 

The column widths are approximations used to help you design. This is because the actual math is based on percentage.

Keep in mind that the column height is automatically adjusted by the content within the div.
So these samples would most likely be much taller.
DOWNLOAD –> bootstrap-3-illustrator-template.ai

 

Leave a Reply

Your email address will not be published. Required fields are marked *