The University of Scranton (white text)

Grid

Breakpoints

We use 4 breakpoints

col-xs-{column}

col-sm-{column}

col-md-{column}

col-lg-{column}

Each {column} is a number from 1 - 12

Main Breakpoints

$full: 1200px;
$large: 992px;
$tablet: 768px;

Only XS Breakpoints

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

Small Breakpoints with full width on XS breakpoint

12/12 Columns
1/12
11/12 Columns
2/12
10/12 Columns
3/12
9/12 Columns
4/12 Columns
8/12 Columns
5/12 Columns
7/12 Columns
6/12 Columns
6/12 Columns
7/12 Columns
6/12 Columns
8/12 Columns
4/12 Columns
9/12 Columns
3/12
10/12 Columns
2/12
11/12 Columns
1/12

Medium Layout - Small breakpoint is half columns and XS is full width

12/12 Columns
1/12
11/12 Columns
2/12
10/12 Columns
3/12
9/12 Columns
4/12 Columns
8/12 Columns
5/12 Columns
7/12 Columns
6/12 Columns
6/12 Columns
7/12 Columns
6/12 Columns
8/12 Columns
4/12 Columns
9/12 Columns
3/12
10/12 Columns
2/12
11/12 Columns
1/12

Offsets, Pulls, Pushes

Offset by 6 Columns
Offset by 3 Columns
col-xs-6
Pulled by 3 Columns
Pushed by 3 Columns

© 2024 University of Scranton

Scroll to Top