Bootstrap Grid System UTMB Web Style Guide
At the heart of responsive design is the grid. The responsive grid allows for multi-column page layout design for larger screens and more appropriate stacked layouts for smaller screens.
The Mobile-First responsive grid system makes
it easy to create powerful multi-device layouts quickly and easily. If you're familiar with grid systems, you'll feel right at home. If not, no worries, you'll adapt quickly. And if you're using the UTMB Sitefinity CMS, we've already baked-in the grid system using drag and drop layout widgets, making creative, responsive design a piece of cake.
The Bootstrap grid is quite extensive and customizable. For a full explanation of the Bootstrap 12 column grid system, please review the official documentation at http://getbootstrap.com/css/#grid.
Example: Medium Grid
.col-md-4
.col-md-4
.col-md-4
For best results, when using the grid inside of the main article (body) region of the UTMB templates, wrap your grid in a <div> and give it the .container-fluid. class, like so:
<div class="container-fluid">
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
</div>
Grid Options
There are four (4) grid column sizes:
extra small (.col-xs-)
small (.col-sm-)
medium (.col-md-)
large (.col-lg-)
|
Extra small devices
Phones (<768px)
|
Small devices
Tablets (≥768px)
|
Medium devices
Desktops (≥992px)
|
Large devices
Desktops (≥1200px)
|
| Grid behavior |
Horizontal at all times |
Collapsed to start, horizontal above breakpoints |
| Container width |
None (auto) |
750px |
970px |
1170px |
| Class prefix |
.col-xs- |
.col-sm- |
.col-md- |
.col-lg- |
| # of columns |
12 |
| Column width |
Auto |
~62px |
~81px |
~97px |
| Gutter width |
30px (15px on each side of a column) |
| Nestable |
Yes |
| Offsets |
Yes |
| Column ordering |
Yes |
Media Queries
CSS media queries are used to determine what size screen the user is current viewing on. Bootstrap has several media
query breakpoints established out of the box. This breakpoints reflow the grid system.
/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) { ... }
/* Medium devices
(desktops, 992px and up) */
@media (min-width: 992px) { ... }
/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { ... }
More Information
For a more information on Bootstrap's Mobile-First responsive grid system, see the official online documentation at http://getbootstrap.com/css/#grid and be sure to
check out these brief, yet informative videos.