Layout Utilities

Table of contents

1. Spacing
2. Horizontal Alignment
3. Vertical Alignment
4. Display
5. Basic Grid
6. Enhanced Grid
7. Image Cards

Spacing

These spacers are available to use for margins and padding with responsive utility classes. Combine these prefixes with a screen size and spacing scale to use them responsively.

Spacing values are based on a 1rem = 16px spacing scale, broken down into these units:

Use mx-auto to horizontally center elements.

Examples

In Markdown, use the {: } wrapper to apply custom classes:

This paragraph will have a margin bottom of 1rem/16px at large screens.
{: .mb-lg-4 }

This paragraph will have 2rem/32px of padding on the right and left at all screen sizes.
{: .px-6 }

Horizontal Alignment

Note: any of the flex- classes must be used on a parent element that has d-flex applied to it.

Vertical Alignment

Display

Display classes aid in adapting the layout of the elements on a page:

Use these classes in conjunction with the responsive modifiers.

Examples

In Markdown, use the {: } wrapper to apply custom classes:

This button will be hidden until medium screen sizes:

[ A button ](#url)
{: .d-none .d-md-inline-block }

These headings will be `inline-block`:

### heading 3
{: .d-inline-block }

### heading 3
{: .d-inline-block }

Basic Grid

When grid structures are needed, the provided grid utility classes – in conjunction with some basic HTML wrapper elements – can be used to build responsive grid layouts.

To create a grid, an outer <div> element is added to the page, containing a .basic-grid class assignment. Additional classes may be added to specify the number of columns shown on desktop, and/or if a divider should be shown between stacked elements in the grid.

Note: the default Basic Grid layout displays with 1 column on mobile, and 2 columns on desktop. Class modifiers may be added to increase the number of columns.

Example

Here is a sample Basic Grid layout, where content will be arranged in a 3 column responsive grid on desktop:

<div class="basic-grid three-column">

<div markdown="1">
## Grid element heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
</div>
<div markdown="1">
## Grid element heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
</div>
<div markdown="1">
## Grid element heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
</div>

</div><!-- end grid -->

⚠️Important: in order to use markdown within the grid elements, the markdown="1" attribute must be added to the child elements in the grid. Also, to render out the markdown correctly, be sure there is no space/tab to the left of the content in each of the grid elements.

Enhanced Grid

When more complex grid structures are needed, the ‘row/col’ grid utility classes may be used – in conjunction with some basic HTML wrapper elements – instead of the Basic Grid system.

The Enhanced Grid system is based on a 12 column layout, where classes are used to indicate how many of the 12 columns should be filled by the child element at a particular breakpoint. For example, col-sm-6 means that at the sm breakpoint (and up), the element should fill 6 of the 12 ‘base’ columns (ie should fill half of the space of the parent row).

Example

Here is a sample grid layout, where each child element within the grid row will fill the full screen width at the smallest (xs) browser sizes (12 of 12 columns), and then will switch to half screen width (6 of 12 columns) when the ‘small’ (sm) screen breakpoint is hit:

<div class="row">

<div class="col-xs-12 col-sm-6">
<!-- This content will take up 6/12 (or 1/2) of the container at the `sm` breakpoint -->
</div>
<div class="col-xs-12 col-sm-6">
<!-- This content will take up 6/12 (or 1/2) of the container at the `sm` breakpoint -->
</div>

</div><!-- end grid -->

⚠️Important: as with the Basic Grid configuration, if you would like to use markdown within the grid elements, a markdown="1" attribute must be added to the child elements in the grid. Also, to render out the markdown correctly, be sure there is no space/tab to the left of the content in each of the grid elements.

The grid system is based on the Flexbox Grid project. More information, including details on alignment, offsets, and nesting, can be found here.

Image Cards

Pre-configured ‘Image Cards’ may be used to display a linkable image with text label. These can be combined with grid layouts to create a matrix of image links.

Image Cards make use of an include file, where properties of the card are passed in as attributes.

Examples

Here is a sample Image Card include:

{% include image-card.html 
    image="https://via.placeholder.com/500"
    link="http://example.com/"
    label="Label for our image"
%}

And here is a sample of the Image Card include used within a Basic Grid:

<div class="basic-grid three-column">

<div markdown="1">
{% include image-card.html 
    image="https://via.placeholder.com/500"
    link="http://example.com/"
    label="Label for our image"
%}
</div>
<div markdown="1">
{% include image-card.html 
    image="https://via.placeholder.com/500"
    link="http://example.com/"
    label="Label for our image"
%}
</div>
<div markdown="1">
{% include image-card.html 
    image="https://via.placeholder.com/500"
    link="http://example.com/"
    label="Label for our image"
%}
</div>

</div><!-- end grid -->

Renders as: