{% extends "pxy_dashboard/partials/base.html" %} {% load static %} {% block title %}Grid System{% endblock title %} {% block extra_css %} {% endblock extra_css %} {% block pagetitle %} {% include "pxy_dashboard/partials/page-title.html" with pagetitle="Base UI" title="Grid System" %} {% endblock pagetitle %} {% block content %}

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
{% endblock content %} {% block extra_js %} {% endblock extra_js %}