The Grid

The Grid

Base Grid System
12 Columns with a Responsive Touch

In order to help get designs looking responsive, DigitizeThis® uses a the popular beautiful Boilerplate for Responsive, Mobile-Friendly development.  It's called BootStrap 4 and is a powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, five default responsive tiers, Sass variables and mixins, and dozens of predefined classes. DigitizeThis® now uses BootStrap 4 over the previously used Skeleton.

This is because BootStrap's grid system uses a series of containers, rows, and columns to layout and align content. It’s built with flexbox and is fully responsive.

The Grid

BootStrap uses a powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, five default responsive tiers, Sass variables and mixins, and dozens of predefined classes.

Bootstrap’s grid system uses a series of containers, rows, and columns to layout and align content. It’s built with flexbox and is fully responsive. Below is an example and an in-depth look at how the grid comes together.

 Extra small
<576px		Small
≥576px		Medium
≥768px		Large
≥992px		Extra large
≥1200px
Max container width None (auto) 540px 720px 960px 1140px
Class prefix .col- .col-sm- .col-md- .col-lg- .col-xl-
# of columns 12
Gutter width 30px (15px on each side of a column)
Nestable Yes
Column ordering Yes

PERCENTS, NOT PIXELS

BootStrap's fluid grid system uses percents for column widths instead of fixed pixels. It also has the same responsive variations as our fixed grid system, ensuring proper proportions for key screen resolutions and devices.

FLUID CONTAINERS

Make any container fluid simply by changing .container to .container-fluid. The columns stay the exact same, making it super straightforward to flip between fixed and fluid layouts.

MARKUP

  • <div class="row">
  • <div class="col-xs-12 col-md-4">...</div>
  • <div class="col-xs-12 col-md-8">...</div>
  • </div>

FAST TO START

BootStrap 4 is a tool for rapid development.

It's fast with CSS best practices, a well-structured grid that makes mobile consideration easy, an organized file structure and super basic UI elements like lightly styled forms, buttons, tabs and more.

IMPORTANT GLOBALS

Bootstrap employs a handful of important global styles and settings that you’ll need to be aware of when using it, all of which are almost exclusively geared towards the normalization of cross browser styles.

Looking to quickly add Bootstrap to your project?

Copy-paste the stylesheet <link> into your <head> before all other stylesheets to load our CSS.

RESPONSIVE META TAG

Bootstrap is developed mobile first, a strategy in which it optimizes code for mobile devices first and then scales up components as necessary using CSS media queries. To ensure proper rendering and touch zooming for all devices, we add the responsive viewport meta tag to your <head>.

RESPONSIVE DESIGN

MEDIA QUERIES FOR VARIOUS DEVICES AND RESOLUTIONS

Responsive devices

What they do

Media queries allow for custom CSS based on a number of conditions—ratios, widths, display type, etc—but usually focuses around min-width and max-width.

  • Modify the width of column in our grid
  • Stack elements instead of float wherever necessary
  • Resize headings and text to be more appropriate for devices

DigitizeThis uses media queries responsibly and only as a start for your mobile audiences. For larger projects, I can consider dedicated code bases and not layers of media queries.

Using the media queries

BootStrap uses a lot of media queries to serve the scalable grid, but also for the convenience of styling your site on different size screens. BootStrap's media queries are almost exclusively targeted at max and min widths rather than device sizes or orientations. The advantage of this is browsers and future mobile devices that don't map to exact set dimensions will still benefit from the styles. That being said, all of the queries were written to be optimal on Apple iOS devices. The built in media queries include:

  • Extra large >= 1200: Max container width larger than 1140px
  • Larger than 992: Larger than the standard base grid
  • Smaller than 992: Smaller than the standard base grid
  • Tablet Portrait: Between 768px and 992px
  • All Mobile Sizes: Less than 768px
  • Just Mobile Landscape: Between 576px and 768px
  • Just Mobile Portrait: Less than 576px

Support for BootStrap 4

BootStrap has been tested across as many devices and browsers:

  • Latest Chrome (Mac/PC)
  • Firefox 4.0, 3.6, 3.5, 3.0 (Mac/PC)
  • Latest Safari
  • IE9, IE8, IE7
  • iPhone (Retina)
  • Droid (Charge/Original)
  • iPad

Bootstrap supports the latest, stable releases of all major browsers and platforms. On Windows, we support Internet Explorer 10-11 / Microsoft Edge.

Notes on IE: We all know sometimes IE doesn't behave, so through the genius of conditional CSS we add a class of "ie" to all versions of the browser, as well as specific targets for each (i.e. "ie6", "ie7", "ie8"). It's not a perfect world, but hopefully this will help make naughty IE behave.

With BootStrap 4, Internet Explorer 10+ is supported; IE9 and down is not. Please be aware that some CSS3 properties and HTML5 elements are not fully supported in IE10, or require prefixed properties for full functionality. Visit Can I use… for details on browser support of CSS3 and HTML5 features. If you require IE8-9 support, use Bootstrap 3.

Courtesy of ©BootStrap - Get BootStrap website

Back to top