- 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 include ../../components/header // Page Body Start .page-body-wrapper.horizontal-menu include ../../components/sidebar .page-body .container-fluid .page-header .row .col-sm-6 h3 | Grid ol.breadcrumb li.breadcrumb-item a(href='index.html') | Home li.breadcrumb-item Base li.breadcrumb-item.active Grid .col-sm-6 include ../../components/bookmark // Container-fluid starts .container-fluid.grid-wrrapper .row .col-sm-12 .card .card-header.pb-0 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='javascript:void(0)') font size | . .table-responsive table.table.table-bordered.table-striped thead tr th th.text-center | Extra small br small.digits <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.pb-0 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.pb-0 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.pb-0 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.pb-0 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.pb-0 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.pb-0 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.pb-0 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