Grid System:
Basics
AppStrap includes the powerful mobile-first 12 column flexbox-powered grid system from Bootstrap plus a few extras.
The grid system allows you to alyout content on your pages and alter the layout based on the screenwidth of the page/browser.
Mobile-first
Mobile-first means that you consider your default layout to be mobile/small screens and then you progressively enhance it up as the screenwidth increases. This is the approach Bootstrap adopted since version 3 although some media queries do go against this where it makes sense.
Flexbox
Since Bootstrap 4 Alplha 6 Bootstrap has Flexbox support by default which makes use of the powerful CSS flexbile box layout module opening up a whole new world of grid power!
Internet Explorer 9 (and below) does not support Flexbox at all but fortunately AppStrap provides built in fallbacks so your AppStrap based sites will look great in Internet Explorer 9 anyway.
You can also choose to "opt out" of using Flexbox with AppStrap by simply adding the following line of code after all the other CSS files are included within the
head
tags: View code example
<link href="assets/css/no-flexbox.css" rel="stylesheet">Grid Structure
Basic struction of a grid is:
.container|.container-fluid
>
.row
>
.col|col-BREAKPOINT-(1-12)|col-(1-12)
Containers
.container|.container-fluid
are wrappers that center the content on the page,
.container
has fixed pixel widths which vary with the screensize and
.container-fluid
stretches full width of the screen.
Rows
.row
applies the Flexbox properties which should be applied to the
.col|col-BREAKPOINT-(1-12)|col-(1-12)
elements within it. By default it sets them to show as "rows" aligned side by side.
Columns
.col|col-BREAKPOINT-(1-12)|col-(1-12)
elements determine the percentage width to give a column within the grid and at which "breakpoint" that width should be set from.
Grid columns without a set width will automatically layout with equal widths. For example, four instances of .col-sm will each automatically be 25% wide for small breakpoints.
Column classes indicate the number of columns you want to use out of the possible 12 per row. So, if you want three equal-width columns, you can use .col-sm-4. 12 is considered "full width".
If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.
Breakpoints
Breakpoints are the point at which the screenwidth increases or decreases from one recognised point to the next. In AppStrap there are 5 breakpoints you can work with: all breakpoints (extra small), small, medium, large, and extra large.
Breakpoints are based on minimum widths, meaning they apply to that one tier and all those above it For example:
.col-sm-4
would apply to small, medium, large, and extra large devices OR
.col-md-6
would apply to medium, large & extra large screens only.
You can also mix and match breakpoints so for example your layout might allow 1 column up to medium screens, then 2 columns for medium and 4 columns for large and above screens. ie
class="col-12 col-md-6 col-lg-3"
| Breakpoint | Shortname | Description | Media queries | Column Class Examples |
|---|---|---|---|---|
| 1. Extra Small (default) | (blank) | Extra small devices (portrait phones, less than 576px) | No media query since this is the default in Bootstrap |
.col-(1-12)
|
| 2. Small |
sm
|
Small devices (landscape phones, 576px and up) |
@media (min-width: 576px) {}
|
.col-sm-(1-12)
|
| 3. Medium |
md
|
Medium devices (tablets, 768px and up) |
up:
@media (min-width: 768px) {}
down: @media (max-width: 767px) {}
|
.col-md-(1-12)
|
| 4. Large |
lg
|
Large devices (desktops, 992px and up) |
@media (min-width: 992px) {}
|
.col-lg-(1-12)
|
| 5. Extra Large |
xl
|
Extra large devices (large desktops, 1200px and up) |
@media (min-width: 1200px) {}
|
.col-xl-(1-12)
|
Auto Column Widths
With the power of Flexbox you can simply use any number of
.col
elements within a
.row
element and every column will automatically be made the same width.
<div class="container">
<div class="row">
<div class="col">
1 of 2
</div>
<div class="col">
1 of 2
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col">
1 of 3
</div>
<div class="col">
1 of 3
</div>
</div>
</div>Setting one column width
You can even set the width of one column and Flexbox will automatically resize the other columns around it.
View code example<div class="container">
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-6">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-5">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
</div>Variable width content
Using the
col-{breakpoint}-auto
classes you can set fixed width columns on one breakpoint and then reset them to their nature width on another breakpoint.
<div class="container">
<div class="row justify-content-md-center">
<div class="col col-lg-2">
1 of 3
</div>
<div class="col-12 col-md-auto">
Variable width content
</div>
<div class="col col-lg-2">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-12 col-md-auto">
Variable width content
</div>
<div class="col col-lg-2">
3 of 3
</div>
</div>
</div>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.
<div class="container">
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="w-100"></div>
<div class="col">col</div>
<div class="col">col</div>
</div>
</div>Responsive Layouts
All breakpoints
For grid layouts that are the same from the smallest of devices to the largest, use the
.col
and
.col-*
classes.
<div class="container">
<div class="row mb-3">
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
</div>
<div class="row mb-3">
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
<div class="col-6">col-6</div>
</div>
<div class="row">
<div class="col-8">col-8</div>
<div class="col-4">col-4</div>
</div>
</div>Stacked to horizontal
Using a single set of
.col-sm-*
classes, you can create a basic grid system that starts out stacked on extra small devices before becoming horizontal on desktop (medium) devices.
<div class="container">
<div class="row">
<div class="col-sm-8">col-sm-8</div>
<div class="col-sm-4">col-sm-4</div>
</div>
<div class="row">
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
</div>
</div>Mix it up!
Combine
.col-BREAKPOINT-*
classes on the same columns to create varying layouts per breakpoint.
<div class="container">
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<div class="col col-md-8">.col .col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- 3 equal columns on mobile, 1 wide & 2 small from medium up-->
<div class="row">
<div class="col col-md-8">.col-6 .col-md-8</div>
<div class="col col-md-2">.col-6 .col-md-2</div>
<div class="col col-md-2">.col-6 .col-md-2</div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
<div class="col-6">.col-6</div>
<div class="col-6">.col-6</div>
</div>
</div>Alignment
Vertical Alignment/Tools
The following classes applied to any
.row
elements allows you to control the vertical alignment of columns in a grid.
-
.align-items-startandalign-items-BREAKPOINT-start:
aligns columns to the top ("start"). -
.align-items-endandalign-items-BREAKPOINT-end:
aligns columns to the bottom ("end"). -
.align-items-centerandalign-items-BREAKPOINT-center:
aligns columns to the middle ("center"). -
.align-items-stretchandalign-items-BREAKPOINT-stretch:
stretches column to the full height of their row container.
You can also align single columns using the
.align-self-start|end|center|stretch
and
.align-self-BREAKPOINT-start|end|center|stretch
classes directly on the column elements.
<div class="container">
<div class="row align-items-start" style="height: 10rem;">
<div class="col">
Align top
</div>
<div class="col">
Align top
</div>
</div>
<div class="row align-items-center" style="height: 10rem;">
<div class="col">
Align center
</div>
<div class="col">
Align center
</div>
</div>
<div class="row align-items-end" style="height: 10rem;">
<div class="col">
Align bottom
</div>
<div class="col">
Align bottom
</div>
</div>
<div class="row align-items-stretch" style="height: 10rem;">
<div class="col">
Stretch full height
</div>
<div class="col">
Stretch full height
</div>
</div>
<div class="row" style="height: 10rem;">
<div class="col align-self-start">
Single column top
</div>
<div class="col align-self-center">
Single column middle
</div>
<div class="col align-self-end">
Single column bottom
</div>
</div>
</div>Horizontal Alignment/Tools
The following classes applied to any
.row
elements allows you to control the horizontal alignment of columns in a grid.
-
.justify-content-startandjustify-content-BREAKPOINT-start:
aligns columns to the left ("start"). -
.justify-content-endandjustify-content-BREAKPOINT-end:
aligns columns to the right ("end"). -
.justify-content-centerandjustify-content-BREAKPOINT-center:
aligns columns to the center ("center"). -
.justify-content-aroundandjustify-content-BREAKPOINT-around:
centers columns and distributes them evenly. -
.justify-content-betweenandjustify-content-BREAKPOINT-between:
stretches columns to the full width of their row container and distributes them evenly.
<div class="container">
<div class="row justify-content-start">
<div class="col-4">
Align left
</div>
<div class="col-4">
Align left
</div>
</div>
<div class="row justify-content-center">
<div class="col-4">
Align center
</div>
<div class="col-4">
Align center
</div>
</div>
<div class="row justify-content-end">
<div class="col-4">
Align right
</div>
<div class="col-4">
Align right
</div>
</div>
<div class="row justify-content-around">
<div class="col-4">
Align even center
</div>
<div class="col-4">
Align even center
</div>
</div>
<div class="row justify-content-between">
<div class="col-4">
Align even stretch
</div>
<div class="col-4">
Align even stretch
</div>
</div>
</div>No gutters
By default columns have horizontal padding to add space or "gutters" between columns, you can remove this by adding the
.no-gutters
class to
.row
elements.
<div class="container">
<div class="row mb-3">
<div class="col">
<div class="bg-light p-2">Gutters</div>
</div>
<div class="col">
<div class="bg-light p-2">Gutters</div>
</div>
</div>
<div class="row no-gutters">
<div class="col">
<div class="bg-light p-2">No Gutters</div>
</div>
<div class="col">
<div class="bg-light p-2">No Gutters</div>
</div>
</div>
</div>Column Ordering
Flex order
If you're using Flexbox you can reorder columns without moving them in your code by using these classes:
.order-(1-12)
All classes are also responsive:
.order-BREAKPOINT-(1-12)
so you can change the order per breakpoint too.
<div class="container">
<div class="row">
<div class="col">
First, but unordered
</div>
<div class="col order-12">
Second, but last
</div>
<div class="col order-1">
Third, but first
</div>
</div>
</div>Offsetting columns
Move columns to the right using
.m(r|l)-auto
classes.
<div class="container"><div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
</div>
<div class="row">
<div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
<div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
</div>
<div class="row">
<div class="col-auto mr-auto">.col-auto .mr-auto</div>
<div class="col-auto">.col-auto</div>
</div></div>Grid Nesting
You can "nest" grids within grids by following the
.row
>
.col
structure.
<div class="container">
<!-- level 1 -->
<div class="row">
<div class="col-sm-9">
Level 1: .col-sm-9
<!-- level 2 -->
<div class="row">
<div class="col-8 col-sm-6">
Level 2: .col-8 .col-sm-6
<!-- level 3 -->
<div class="row">
<div class="col-6">
Level 3: .col-6
</div>
<div class="col-6">
Level 3: .col-6
</div>
</div>
</div>
<div class="col-4 col-sm-6">
Level 2: .col-4 .col-sm-6
</div>
</div>
</div>
</div>
</div>Grid Styles
Here are some misc. grid style classes you can use to style grids.
.grid-inner-borders-dotted
View code example<div class="row grid-inner-borders-dotted"><!-- @LINEBREAK -->
<!--Feedback 1-->
<div class="col-lg-4 d-lg-flex">
<blockquote class="d-lg-flex blockquote blockquote-bubble mb-0">
<p class="blockquote-bubble-content">Appellatio exputo facilisis. Caecus commodo fere jumentum nisl pertineo suscipit verto.</p>
<footer class="blockquote-footer">
<img src="assets/img/team/jimi.jpg" alt="Jimi Bloggs" class="img-circle mr-1">
Someone famous in
<cite title="Source Title">Source Title</cite>
</footer>
</blockquote>
</div><!-- @LINEBREAK -->
<!--Feedback 2-->
<div class="col-lg-4 d-lg-flex">
<blockquote class="d-lg-flex blockquote blockquote-bubble mb-0">
<p class="blockquote-bubble-content">Exputo illum luptatum. Iusto ullamcorper vero.</p>
<footer class="blockquote-footer">
<img src="assets/img/team/jimi.jpg" alt="Jimi Bloggs" class="img-circle mr-1">
Someone famous in
<cite title="Source Title">Source Title</cite>
</footer>
</blockquote>
</div><!-- @LINEBREAK -->
<!--Feedback 3-->
<div class="col-lg-4 d-lg-flex">
<blockquote class="d-lg-flex blockquote blockquote-bubble mb-0">
<p class="blockquote-bubble-content">Bene elit gravis typicus utrum zelus.</p>
<footer class="blockquote-footer">
<img src="assets/img/team/jimi.jpg" alt="Jimi Bloggs" class="img-circle mr-1">
Someone famous in
<cite title="Source Title">Source Title</cite>
</footer>
</blockquote>
</div><!-- @LINEBREAK -->
<!--Feedback 4-->
<div class="col-lg-4 d-lg-flex">
<blockquote class="d-lg-flex blockquote blockquote-bubble mb-0">
<p class="blockquote-bubble-content">Ea eum lobortis natu quia.</p>
<footer class="blockquote-footer">
<img src="assets/img/team/jimi.jpg" alt="Jimi Bloggs" class="img-circle mr-1">
Someone famous in
<cite title="Source Title">Source Title</cite>
</footer>
</blockquote>
</div><!-- @LINEBREAK -->
<!--Feedback 5-->
<div class="col-lg-4 d-lg-flex">
<blockquote class="d-lg-flex blockquote blockquote-bubble mb-0">
<p class="blockquote-bubble-content">Feugiat modo natu secundum sit torqueo utinam.</p>
<footer class="blockquote-footer">
<img src="assets/img/team/jimi.jpg" alt="Jimi Bloggs" class="img-circle mr-1">
Someone famous in
<cite title="Source Title">Source Title</cite>
</footer>
</blockquote>
</div><!-- @LINEBREAK -->
<!--Feedback 6-->
<div class="col-lg-4 d-lg-flex">
<blockquote class="d-lg-flex blockquote blockquote-bubble mb-0">
<p class="blockquote-bubble-content">Damnum decet defui duis ibidem melior mos sit torqueo validus.</p>
<footer class="blockquote-footer">
<img src="assets/img/team/jimi.jpg" alt="Jimi Bloggs" class="img-circle mr-1">
Someone famous in
<cite title="Source Title">Source Title</cite>
</footer>
</blockquote>
</div></div>Appellatio exputo facilisis. Caecus commodo fere jumentum nisl pertineo suscipit verto.
Exputo illum luptatum. Iusto ullamcorper vero.
Bene elit gravis typicus utrum zelus.
Ea eum lobortis natu quia.
Feugiat modo natu secundum sit torqueo utinam.
Damnum decet defui duis ibidem melior mos sit torqueo validus.
.grid-inner-borders-solid
View code example<div class="row grid-inner-borders-solid"><!-- @LINEBREAK -->
<!--Feedback 1-->
<div class="col-lg-4 d-lg-flex">
<blockquote class="d-lg-flex blockquote blockquote-bubble mb-0">
<p class="blockquote-bubble-content">Appellatio exputo facilisis. Caecus commodo fere jumentum nisl pertineo suscipit verto.</p>
<footer class="blockquote-footer">
<img src="assets/img/team/jimi.jpg" alt="Jimi Bloggs" class="img-circle mr-1">
Someone famous in
<cite title="Source Title">Source Title</cite>
</footer>
</blockquote>
</div><!-- @LINEBREAK -->
<!--Feedback 2-->
<div class="col-lg-4 d-lg-flex">
<blockquote class="d-lg-flex blockquote blockquote-bubble mb-0">
<p class="blockquote-bubble-content">Exputo illum luptatum. Iusto ullamcorper vero.</p>
<footer class="blockquote-footer">
<img src="assets/img/team/jimi.jpg" alt="Jimi Bloggs" class="img-circle mr-1">
Someone famous in
<cite title="Source Title">Source Title</cite>
</footer>
</blockquote>
</div><!-- @LINEBREAK -->
<!--Feedback 3-->
<div class="col-lg-4 d-lg-flex">
<blockquote class="d-lg-flex blockquote blockquote-bubble mb-0">
<p class="blockquote-bubble-content">Bene elit gravis typicus utrum zelus.</p>
<footer class="blockquote-footer">
<img src="assets/img/team/jimi.jpg" alt="Jimi Bloggs" class="img-circle mr-1">
Someone famous in
<cite title="Source Title">Source Title</cite>
</footer>
</blockquote>
</div><!-- @LINEBREAK -->
<!--Feedback 4-->
<div class="col-lg-4 d-lg-flex">
<blockquote class="d-lg-flex blockquote blockquote-bubble mb-0">
<p class="blockquote-bubble-content">Ea eum lobortis natu quia.</p>
<footer class="blockquote-footer">
<img src="assets/img/team/jimi.jpg" alt="Jimi Bloggs" class="img-circle mr-1">
Someone famous in
<cite title="Source Title">Source Title</cite>
</footer>
</blockquote>
</div><!-- @LINEBREAK -->
<!--Feedback 5-->
<div class="col-lg-4 d-lg-flex">
<blockquote class="d-lg-flex blockquote blockquote-bubble mb-0">
<p class="blockquote-bubble-content">Feugiat modo natu secundum sit torqueo utinam.</p>
<footer class="blockquote-footer">
<img src="assets/img/team/jimi.jpg" alt="Jimi Bloggs" class="img-circle mr-1">
Someone famous in
<cite title="Source Title">Source Title</cite>
</footer>
</blockquote>
</div><!-- @LINEBREAK -->
<!--Feedback 6-->
<div class="col-lg-4 d-lg-flex">
<blockquote class="d-lg-flex blockquote blockquote-bubble mb-0">
<p class="blockquote-bubble-content">Damnum decet defui duis ibidem melior mos sit torqueo validus.</p>
<footer class="blockquote-footer">
<img src="assets/img/team/jimi.jpg" alt="Jimi Bloggs" class="img-circle mr-1">
Someone famous in
<cite title="Source Title">Source Title</cite>
</footer>
</blockquote>
</div></div>Appellatio exputo facilisis. Caecus commodo fere jumentum nisl pertineo suscipit verto.
Exputo illum luptatum. Iusto ullamcorper vero.
Bene elit gravis typicus utrum zelus.
Ea eum lobortis natu quia.
Feugiat modo natu secundum sit torqueo utinam.
Damnum decet defui duis ibidem melior mos sit torqueo validus.