@@include('./partials/html.html') @@include("./partials/title-meta.html", {"title": "Grid System"}) @@include('./partials/head-css.html')
@@include('./partials/menu.html')
@@include("./partials/page-title.html", {"subtitle":"Base UI","title":"Grid System"})

Grid options

See how aspects of the Bootstrap grid system work across multiple devices with a handy table.

Extra small
<576px
Small
≥576px
Medium
≥768px
Large
≥992px
Extra large
≥1200px
Extra large
≥1400px
Max container 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.25rem (0.625rem on each side of a column)
Custom gutters Yes
Nestable Yes
Column ordering Yes

Grid Example

col-lg-12
col-lg-11
col-lg-1
col-lg-10
col-lg-2
col-lg-9
col-lg-3
col-lg-8
col-lg-4
col-lg-7
col-lg-5
col-lg-6
col-lg-6
col-lg-5
col-lg-7
col-lg-4
col-lg-8
col-lg-3
col-lg-9
col-lg-2
col-lg-10
col-lg-1
col-lg-11
col-lg-2
col-lg-3
col-lg-4
col-lg-2
col-lg-1
@@include('./partials/footer.html')
@@include('./partials/right-sidebar.html') @@include('./partials/footer-scripts.html')