Grid System


Leverage our robust, mobile-first flexbox grid system to craft responsive layouts of any shape or size. Powered by a 12 column structure, six default breakpoints, SCSS variables, mixins, and a comprehensive library of utility classes, the grid offers unmatched flexibility and control across all screen sizes.

Basic

Cork's admin layout is divided into key segments that are consistent across all pages:

Column
Column
Column

Grid options

Bootstrap's grid system is fully responsive and intelligently adapts across all six default breakpoints — as well as any custom breakpoints you define. Each tier comes with its own container width, class prefix, and utility modifiers, offering precise control over your layout at every screen size.

The six default grid tiers are as follows:

xs
<576px
sm
≥576px
md
≥768px
lg
≥992px
xl
≥1200px
xxl
≥1400px
Container max-width None (auto) 540px 720px 960px 1140px 1320px
Class prefix .col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
# of columns 12
Gutter width 1.5rem (.75rem on left and right)
Custom gutters Yes
Nestable Yes
Column ordering Yes

Equal-width

1 of 2
2 of 2
1 of 3
2 of 3
3 of 3

Setting one column width

1 of 3
2 of 3 (wider)
3 of 3
1 of 3
2 of 3 (wider)
3 of 3

Variable width content

1 of 3
Variable width content
3 of 3
1 of 3
Variable width content
3 of 3