mixin GridOptionsDescription
  p&attributes(attributes) While Bootstrap uses
    code .col-
    | ,
    code .col-sm-
    | ,
    code .col-md-
    | ,
    code .col-lg-
    |  and
    code .col-xl-
    | , we introduced a new breakpoint,
    code .col-xxl-
    |  for the massive screen size.

mixin GridTable
  .table-responsive
    table.table.table-bordered.table-striped.mb-0
      thead
        tr
          th
          th.text-center
            | Extra small
            br
            small <576px
          th.text-center
            | Small
            br
            small ≥576px
          th.text-center
            | Medium
            br
            small ≥768px
          th.text-center
            | Large
            br
            small ≥992px
          th.text-center
            | Extra large
            br
            small ≥1200px
          th.text-center
            | Massive
            br
            small ≥1400px
      tbody
        tr
          th.text-nowrap(scope='row') Max container width
          td None (auto)
          td 540px
          td 720px
          td 960px
          td 1140px
          td 1320px
        tr
          th.text-nowrap(scope='row') Class prefix
          td
            code .col-
          td
            code .col-sm-
          td
            code .col-md-
          td
            code .col-lg-
          td
            code .col-xl-
          td
            code .col-xxl-
        tr
          th.text-nowrap(scope='row') # of columns
          td(colspan='6') 12
        tr
          th.text-nowrap(scope='row') Gutter width
          td(colspan='6') 30px (15px on each side of a column)
        tr
          th.text-nowrap(scope='row') Nestable
          td(colspan='6') Yes
        tr
          th.text-nowrap(scope='row') Column ordering
          td(colspan='6') Yes