- 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