Layout

Based on Bootstrap Vue layout . es-container, es-row, and es-col are based on b-container, b-row, and b-col respectively, but support only a subset of props as documented below.

The subset of props is sufficient to cover most of our existing use cases, and allow doing a global find and replace for b-container to es-container (for example) to migrate to the V3 design system.

Responsive breakpoints

At each breakpoint above extra small (xs), the content is constrained to the max width listed below.

 
Extra small (xs)
Breakpoint
< 576px
Max container width
None
 
Small (sm)
Breakpoint
≥ 576px
Max container width
540px
 
Medium (md)
Breakpoint
≥ 768px
Max container width
720px
 
Large (lg)
Breakpoint
≥ 992px
Max container width
960px
 
Extra large (xl)
Breakpoint
≥ 1200px
Max container width
1140px
 
Extra extra large (xxl)
Breakpoint
≥ 1900px
Max container width
1440px

Grid overview

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

EsContainer

Only input is a slot

EsRow

Only input is a slot

EsCol

Name
cols
Type
string
Default
n/a
Description
Number of columns to span
Name
sm
Type
string
Default
n/a
Description
Number of columns to span in the sm breakpoint and above
Name
md
Type
string
Default
n/a
Description
Number of columns to span in the md breakpoint and above
Name
lg
Type
string
Default
n/a
Description
Number of columns to span in the lg breakpoint and above
Name
xl
Type
string
Default
n/a
Description
Number of columns to span in the xl breakpoint and above
Name
xxl
Type
string
Default
n/a
Description
Number of columns to span in the xxl breakpoint and above