Hello Qompac!
Experience a simple yet powerful way to build Dashboards with Qompac UI.
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 |
|
|---|---|---|---|---|---|
| Max container width | None (auto) | 540px | 720px | 960px | 1140px |
| Class prefix |
.col-
|
.col-sm
|
.col-md
|
.col-lg
|
.col-xl
|
| # of columns | 12 | ||||
| Gutter width | 30px (15px on each side of a column) | ||||
| Nestable | Yes | ||||
| Column ordering | Yes | ||||
Equal-width
For example, here are two grid layouts that apply to every device and viewport, from
xs to
xl. Add any number of unit-less classes for each breakpoint you need and every column
will be the same
width.
Setting one column width
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.
Variable width content
Use col-{breakpoint}-auto classes to size columns based on the natural
width of their content.
Equal-width multi-row
Create equal-width columns that span multiple rows by inserting a .w-100 where
you want the columns to
break to a new line. Make the breaks responsive by mixing the .w-100 with some responsive display utilities.
Responsive classes
Bootstrap’s grid includes five tiers of predefined classes for building complex responsive layouts. Customize the size of your columns on extra small, small, medium, large, or extra large devices however you see fit.
All breakpoints
For grids that are the same from the smallest of devices to the largest, use the
.col and
.col-* classes. Specify a numbered class when you need a particularly sized column;
otherwise, feel
free to stick to .col.
Stacked to horizontal
Using a single set of .col-sm-* classes, you can create a basic grid system
that starts out stacked and
becomes horizontal at the small breakpoint (sm).
Mix and match
Don’t want your columns to simply stack in some grid tiers? Use a combination of different classes for each tier as needed. See the example below for a better idea of how it all works.
Gutters
Gutters can be responsively adjusted by breakpoint-specific padding and negative margin
utility classes. To change
the gutters in a given row, pair a negative margin utility on the .row and matching padding
utilities
on the .cols. The .container or
.container-fluid parent may need to be
adjusted too to avoid unwanted overflow, using again matching padding utility.
Here’s an example of customizing the Bootstrap grid at the large (lg)
breakpoint and above. We’ve
increased the .col padding with .px-lg-5, counteracted that with .mx-lg-n5 on
the parent .row and then adjusted the .container wrapper with .px-lg-5.
Alignment
Use flexbox alignment utilities to vertically and horizontally align columns.
Internet Explorer 10-11 do not
support vertical alignment of flex items when the flex container has a min-height as
shown
below. See Flexbugs #3 for
more
details.
Horizontal alignment
Create equal-width columns that span multiple rows by inserting a .w-100 where
you want the columns to
break to a new line. Make the breaks responsive by mixing the .w-100 with some responsive display utilities.