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

  [caption id="attachment_4691" align="alignnone" width="474"] Explanation of Bootstrap 3 Div sizing[/caption] 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. [caption id="attachment_4692" align="alignnone" width="1325"] Large Device[/caption] [caption id="attachment_4693" align="alignnone" width="474"] Medium Device[/caption] [caption id="attachment_4694" align="alignnone" width="474"] Small Device[/caption]   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