Styles
Grid
Components
Utilities

Typography

Typeface
Hind
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
Note: It is a best practice to only using H1-H4 heading levels to maintain clear hierarchies and create more minimal layout structures.
Element - 4.4rem / 1.1 / Normal

H1

Element - 1.5rem / 1.1 / Normal

H2

Element - 1.2rem / 1.2 / Medium

H3

Element - 0.8rem / 1.1 / Medium

H4

Class
H1
Class
H2
Class
H3
Class
H4
Typeface
Hind
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
Note: The body font should be set on the root 'Body (All Pages)' tag.
Paragraph - 1rem / 1.5 / Normal

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Ordered List - 1rem / 1.5 / Normal
  1. Example Ordered List
  2. Example Ordered List
Unordered List - 1rem / 1.5 / Normal
  • Example Unordered List
  • Example Unordered List

Color

SVI Red

#e2002d

SVI Navy Blue

#060133

Gray

#333333

snow

#fff8f8

Forms

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Head Office

100 Canadian Rd
Scarborough, ON M1R 4Z5

855-833-2530
reservations@storagevaultcanada.com

Reservation Hours
Monday:
8 a.m. - 8 p.m.
Tuesday:
8 a.m. - 8 p.m.
Wednesday:
8 a.m. - 8 p.m.
Thursday:
8 a.m. - 8 p.m.
Friday:
8 a.m. - 8 p.m.
Saturday:
9 a.m. - 7 p.m.
Sunday:
9 a.m. - 6 p.m.

Getting Started

Columns need to be nested within  a "row" and a direct child of a "container".  All columns start off at equal-widths by defining the class of "col" and auto-collapse at the mobile portrait breakpoint if no responsive classes are defined. 

col
col
col
col
col
col
col
col
col
col

Remove Gutters

To remove all padding from columns, use the "no-gutters" class preceded by the initial class of "col".

 no-gutters
no-gutters
no-gutters
no-gutters

Full Width Container

Define your div with a class of "container-fluid" for full width.

col
col
col
col

Responsive Grid

Grid - Desktop

To define our 12 column grid, all classes must precede with the initial class of "col"

col-lg-1
col-lg-11
col-lg-2
col-lg-10
col-lg-3
col-lg-9
col-lg-4
col-lg-8
col-lg-5
col-lg-7
col-lg-6
col-lg-6
col-lg-12

Grid - Tablet (Breakpoint)

Defining our tablet breakpoints, all classes must precede with the class of "col" and if defined, your desktop class of "col-(1-12)"

col-md-1
col-md-11
col-md-2
col-md-10
col-md-3
col-md-9
col-md-4
col-md-8
col-md-5
col-md-7
col-md-6
col-md-6
col-md-12

Grid - Mobile Landscape (Breakpoint)

Defining our tablet breakpoints, all classes must precede with the class of "col" and if defined, your desktop and tablet classes of "col-(1-12)"

col-sm-1
col-sm-11
col-sm-2
col-sm-10
col-sm-3
col-sm-9
col-sm-4
col-sm-8
col-sm-5
col-sm-7
col-sm-6
col-sm-6
col-sm-12

Grid - Mobile Portrait (Breakpoint)

Defining our tablet breakpoints, all classes must precede with the class of "col" and if defined, your desktop, tablet and mobile landscape classes of "col-(1-12)"

col-xs-1
col-xs-11
col-xs-2
col-xs-10
col-xs-3
col-xs-9
col-xs-4
col-xs-8
col-xs-5
col-xs-7
col-xs-6
col-xs-6
col-xs-12

Column Wrapping

If responsive columns are placed within a single row and which the total result in greater then 12, they will automatically wrap onto a new line.

col-4
col-8
col-6
col-6
col-3
col-2
col-7

Vertical Alignment

Align-Start

To align columns from the top, combine a class of  "align-start" preceded by the class of "row"

align-start
align-start
align-start

Align-Center

To align columns from the center, combine a class of  "align-center" preceded by the class of "row"

align-center
align-center
align-center

Align-End

To align columns from the bottom, combine a class of  "align-end" preceded by the class of "row"

align-end
align-end
align-end

Horizontal Alignment

Justify-Start

To align columns from the left, combine a class of  "justify-start" preceded by the by class of "row"

justify-start
justify-start

Justify-Center

To align columns from the right, combine a class of  "justify-center" preceded by the class of "row"

justify-center
justify-center

Justify-End

To align columns from the right, combine a class of  "justify-end" preceded by the class of "row"

justify-end
justify-end

Justify-Between

To evenly space columns between each-other, combine a class of  "justify-between" preceded by the class of "row"

justify-between
justify-between

Justify-Around

To evenly space columns around each-other, combine a class of  "justify-around" preceded by the class of "row"

justify-around
justify-around

Self-Align Columns

To individually self-align columns, combine a class of  "self-start", "self-center", "self-end" preceded by the by class of "col"

self-start
self-center
self-end

Column Reordering

To individually reorder columns, combine a class of either "order-first", "order-last", preceded by the by class of "col"

order-last
order-first

Column Extra Padding

To add extra inner padding to columns, combine a class of either "extra-pad-left", "extra-pad-right", preceded by the by class of "col"

extra-pad-right
extra-pad-left

Manage your Access Storage account

Select your store to make a payment.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Spacing

mb-1 (margin-bottom: 12px;)
mb-2 (margin-bottom: 28px;)
mb-3 (margin-bottom: 48px;)
m-0 (margin: 0;)
mt-3 (margin-top: 48px;)
mt-2 (margin-top: 28px;)
mt-1 (margin-top: 16px;)
p-0 (padding: 0;)
pt-0 (padding-top: 0;)
pb-0 (padding-bottom: 0;)