- var theme_customizer      = true;
- var tooltip               = true;

doctype html
html(lang='en')
    include ../../components/header-files
    body
        include ../../components/loader
        // page-wrapper Start
        #pageWrapper.page-wrapper.compact-wrapper
            include ../../components/header
            // Page Body Start
            .page-body-wrapper.sidebar-icon
                include ../../components/sidebar
                .page-body
                    .container-fluid
                        .page-header
                            .row
                                .col-lg-6
                                    h3
                                      | Grid
                                    ol.breadcrumb
                                      li.breadcrumb-item
                                        a(href='index.html')
                                         i(data-feather="home")
                                      li.breadcrumb-item Ui Kits
                                      li.breadcrumb-item.active Grid
                                .col-lg-6
                                  include ../../components/bookmark
                    // Container-fluid starts
                    .container-fluid
                      .row
                        .col-sm-12
                          .card
                            .card-header
                              h5 Grid Options
                              span Bootstrap grid allows building an equal height flexbile blocks easily
                            .card-body
                              p
                                | While Bootstrap uses 
                                code em 
                                | or 
                                code rem 
                                | for defining most sizes, 
                                code px
                                |  are used for grid breakpoints and container widths. This is because the viewport width is in pixels and does not change with the 
                                a(href='#') font size
                                | .
                              .table-responsive
                                table.table.table-bordered.table-striped
                                  thead
                                    tr
                                      th
                                      th.text-center
                                        | Extra small
                                        br
                                        small.digits &lt;576px
                                      th.text-center
                                        | Small
                                        br
                                        small.digits ≥576px
                                      th.text-center
                                        | Medium
                                        br
                                        small.digits ≥768px
                                      th.text-center
                                        | Large
                                        br
                                        small.digits ≥992px
                                      th.text-center
                                        | Extra large
                                        br
                                        small.digits ≥1200px
                                  tbody
                                    tr
                                      th.text-nowrap(scope='row') Grid behavior
                                      td Horizontal at all times
                                      td(colspan='4') Collapsed to start, horizontal above breakpoints
                                    tr
                                      th.text-nowrap(scope='row') Max container width
                                      td None (auto)
                                      td.digits 540px
                                      td.digits 720px
                                      td.digits 960px
                                      td.digits 1140px
                                    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-
                                    tr
                                      th.text-nowrap(scope='row') # of columns
                                      td(colspan='5') 12
                                    tr
                                      th.text-nowrap(scope='row') Gutter width
                                      td(colspan='5') 30px (15px on each side of a column)
                                    tr
                                      th.text-nowrap(scope='row') Nestable
                                      td(colspan='5') Yes
                                    tr
                                      th.text-nowrap(scope='row') Offsets
                                      td(colspan='5') Yes
                                    tr
                                      th.text-nowrap(scope='row') Column ordering
                                      td(colspan='5') Yes
                        .col-sm-12
                          .card
                            .card-header
                              h5 Grid Column
                            .card-body.grid-showcase
                              p
                                | Using a single set of 
                                code .col-md-*
                                |  grid classes, you can create a basic grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices. Place grid columns within any 
                                code .row
                                | .
                              .row
                                .col-md-1.text-center
                                  span col-md-1
                                .col-md-2.text-center
                                  span col-md-2
                                .col-md-2.text-center
                                  span col-md-2
                                .col-md-3.text-center
                                  span col-md-3
                                .col-md-4.text-center
                                  span col-md-4
                                .col-md-5.text-center
                                  span col-md-5
                                .col-md-7.text-center
                                  span col-md-7
                                .col-md-6.text-center
                                  span col-md-6
                                .col-md-6.text-center
                                  span col-md-6
                                .col-md-8.text-center
                                  span col-md-8
                                .col-md-4.text-center
                                  span col-md-4
                                .col-md-9.text-center
                                  span col-md-9
                                .col-md-3.text-center
                                  span col-md-3
                                .col-md-10.text-center
                                  span col-md-10
                                .col-md-2.text-center
                                  span col-md-2
                                .col-md-12.text-center
                                  span col-md-12
                        .col-sm-12
                          .card
                            .card-header
                              h5 Setting one column width
                            .card-body.grid-showcase
                              p
                                | Auto-layout for flexbox grid columns also means you can set the width of one column and have the sibling columns automatically resize around it. You may use predefined grid classes (as shown below), grid mixins, or inline widths. Note that the other columns will resize no matter the width of the center column.
                              .row
                                .col
                                  span 1 of 3
                                .col-6
                                  span 2 of 3 (wider)
                                .col
                                  span  3 of 3
                              .row
                                .col
                                  span 1 of 3
                                .col-5
                                  span  2 of 3 (wider)
                                .col
                                  span 3 of 3
                        .col-sm-12
                          .card
                            .card-header
                              h5 Vertical alignment
                            .card-body.grid-showcase.grid-align
                              p Use flexbox alignment utilities to vertically and horizontally align columns.
                              .row
                                .col.align-self-start
                                  span One of three columns
                                .col.align-self-center
                                  span One of three columns
                                .col.align-self-end
                                  span One of three columns
                              .row.align-items-start
                                .col
                                  span One of three columns
                                .col
                                  span One of three columns
                                .col
                                  span One of three columns
                              .row.align-items-center
                                .col
                                  span One of three columns
                                .col
                                  span One of three columns
                                .col
                                  span One of three columns
                              .row.align-items-end
                                .col
                                  span One of three columns
                                .col
                                  span One of three columns
                                .col
                                  span One of three columns
                        .col-sm-12
                          .card
                            .card-header
                              h5 Horizontal alignment
                            .card-body.grid-showcase.grid-align
                              p Use flexbox alignment utilities to vertically and horizontally align columns.
                              .row.justify-content-start
                                .col-4
                                  span One of two columns
                                .col-4
                                  span One of two columns
                              .row.justify-content-center
                                .col-4
                                  span One of two columns
                                .col-4
                                  span One of two columns
                              .row.justify-content-end
                                .col-4
                                  span One of two columns
                                .col-4
                                  span One of two columns
                              .row.justify-content-around
                                .col-4
                                  span One of two columns
                                .col-4
                                  span One of two columns
                              .row.justify-content-between
                                .col-4
                                  span One of two columns
                                .col-4
                                  span One of two columns
                        .col-sm-12
                          .card
                            .card-header
                              h5 Nesting Column
                            .card-body.grid-showcase
                              p Use flexbox alignment utilities to vertically and horizontally align columns.
                              .row
                                .col-sm-9
                                  span Level 1: .col-sm-9
                                  .row
                                    .col-8.col-sm-6
                                      span Level 2: .col-8 .col-sm-6
                                    .col-4.col-sm-6
                                      span Level 2: .col-4 .col-sm-6
                        .col-sm-12
                          .card
                            .card-header
                              h5 Order
                            .card-body.grid-showcase
                              p
                                | Use 
                                code .order-
                                |  classes for controlling the 
                                strong visual order
                                |  of your content. These classes are responsive, so you can set the 
                                code order
                                |  by breakpoint (e.g., 
                                code .order-1.order-md-2
                                | ). Includes support for 
                                code 1
                                |  through 
                                code 12
                                |  across all five grid tiers.
                              .row
                                .col
                                  span First, but unordered
                                .col.order-12
                                  span Second, but last
                                .col.order-1
                                  span Third, but first
                              .row
                                .col.order-last
                                  span First, but last
                                .col
                                  span Second, but unordered
                                .col.order-first
                                  span Third, but first
                        .col-sm-12
                          .card
                            .card-header
                              h5 Offset
                            .card-body.grid-showcase
                              p
                                | Move columns to the right using 
                                code .offset-md-*
                                |  classes. These classes increase the left margin of a column by 
                                code *
                                |  columns. For example, 
                                code .offset-md-4
                                |  moves 
                                code .col-md-4
                                |  over four columns.
                              .row
                                .col-md-4
                                  span .col-md-4
                                .col-md-4.offset-md-4
                                  span .col-md-4 .offset-md-4
                              .row
                                .col-md-3.offset-md-3
                                  span .col-md-3 .offset-md-3
                                .col-md-3.offset-md-3
                                  span .col-md-3 .offset-md-3
                              .row
                                .col-md-6.offset-md-3
                                  span .col-md-6 .offset-md-3
                              .row
                                .col-sm-5.col-md-6
                                  span .col-sm-5 .col-md-6
                                .col-sm-5.offset-sm-2.col-md-6.offset-md-0
                                  span .col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0
                              .row
                                .col-sm-6.col-md-5.col-lg-6
                                  span .col-sm-6 .col-md-5 .col-lg-6
                                .col-sm-6.col-md-5.offset-md-2.col-lg-6.offset-lg-0
                                  span .col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0
                    // Container-fluid Ends
                include ../../components/footer
        include ../../components/footer-files
