Learn More - Grid System | Crossroads Digital Design Kit

Learn More


The standard 12-column grid provided by Bootstrap is alive & well and empowers us to easily create mobile-first layouts with sensible defaults across many different device-sizes. Please refer to the documentation for the finer points of manipulating columns and grid sizes.

Rather than use the clunky, non-semantic grid selectors like .col-xs-*, etc. to manipulate your columns, it is preferable to encapsulate this logic in your scss files using the provided mixins.

DON’T do this…

<div class="row">
  <div class="col-md-6">...</div>
  <div class="col-md-6">...</div>

Do this, instead…



@import 'crds-styles/assets/stylesheets/bootstrap';

section {
  @include make-row;

article, aside {
  @include make-md-column(6);


The above, recommended approach decouples the presentational markup from the page structure, which allows for more flexibility across breakpoints and easier long-term maintenance. The entire list of grid-specific mixins provided by crds-styles can be viewed on Github.