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.
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
