| Base width |
Fluid and fixed (724px, 940px, 1170px; below 767px are single column and vertically stacked) |
Fluid (max-width 1200px) |
Fluid (max-width 100%) |
960px |
| Columns |
12 |
12 |
12-24 with customizer |
16 |
| Single column class syntax |
.span1 |
.one.columns |
.one.column |
.one.column |
| Two column class syntax |
.span2 |
.two.columns |
.two.columns |
.two.columns |
| Container syntax |
<div class="container>
or
<div class="container-fluid"> |
<div class="container"> |
Not available |
<div class="container"> |
| Row syntax |
<div class="row">
<div class="span4">...</div>
<div class="span8">...</div>
</div> |
<div class="row">
<div class="four columns">...</div>
<div class="eight columns">...</div>
</div> |
<div class="row">
<div class="four columns">...</div>
<div class="eight columns">...</div>
</div> |
<div class="row">
<div class="four columns">...</div>
<div class="eight columns">...</div>
</div> |
| Nested column syntax |
<div class="row">
<div class="span6">
<div class="row">
<!-- nested columns add up to parent total -->
<div class="span3">...</div>
<div class="span3">...</div>
</div>
</div>
</div> |
<div class="row">
<div class="six columns">
<div class="row">
<!-- nested columns add up to 12 -->
<div class="six columns">...</div>
<div class="six columns">...</div>
</div>
</div>
</div> |
<div class="row">
<div class="six columns">
<div class="row">
<!-- nested columns add up to 12 -->
<div class="six columns">...</div>
<div class="six columns">...</div>
</div>
</div>
</div> |
<div class="row">
<div class="six columns clearfix">
<!-- nested columns add up to parent total -->
<div class="three columns alpha">...</div>
<div class="three columns omega">...</div>
</div>
</div> |
| Offset column syntax |
<div class="row">
<div class="span4">...</div>
<div class="span4 offset4">...</div>
</div> |
<div class="row">
<div class="four columns">...</div>
<div class="four columns offset-by-four">...</div>
</div> |
<div class="row">
<div class="four columns">...</div>
<div class="four columns offset-by-four">...</div>
</div> |
<div class="row">
<div class="four columns">...</div>
<div class="four columns offset-by-four">...</div>
</div> |
| Centered syntax |
Not available |
<div class="row">
<div class="three columns centered">...</div>
</div> |
<div class="row">
<div class="three columns centered">...</div>
</div> |
Not available |
| Ordering syntax |
Not available |
<div class="row display">
<div class="two columns push-ten">first in mobile/last in desktop</div>
<div class="ten columns pull-two">first in desktop/last in mobile</div>
</div> |
<div class="row">
<div class="two columns push-ten">first in mobile/last in desktop</div>
<div class="ten columns pull-two">first in desktop/last in mobile</div>
</div> |
Not available |
| Four column mobile syntax |
Not available |
<div class="row display">
<div class="three phone-one columns">...</div>
<div class="nine phone-three columns">...</div>
</div> |
<div class="row display">
<div class="three mobile-one columns">...</div>
<div class="nine mobile-three columns">...</div>
</div> |
Not available |
| Block grids syntax |
Not available |
<ul class="block-grid two-up">
<li>Two-up element</li>
<li>Two-up element</li>
<li>Two-up element</li>
<li>Two-up element</li>
<li>Two-up element</li>
</ul> |
<ul class="block-grid two-up">
<li>Two-up element</li>
<li>Two-up element</li>
<li>Two-up element</li>
<li>Two-up element</li>
<li>Two-up element</li>
</ul> |
Not available |
| Visibility class syntax |
Device based:
.visible-desktop
.visible-tablet
.visible-phone
.hidden-desktop
.hidden-tablet
.hidden-phone |
Device based:
.show-on-desktops
.show-on-tablets
.show-on-phones
.hide-on-desktops
.hide-on-tablets
.hide-on-phones |
Screen size based:
.show-for-xlarge
.show-for-large
.show-for-large-up
.show-for-medium
.show-for-medium-down
.show-for-small
.hide-for-xlarge
.hide-for-large
.hide-for-large-up
.hide-for-medium
.hide-for-medium-down
.hide-for-small
Landscape based:
.show-for-landscape
.show-for-portrait
Touch based:
.show-for-touch
.hide-for-touch
Print based:
.print-only
.hide-on-print |
Not available |
| Media queries syntax |
/* Landscape phones and down */
@media (max-width: 480px) { ... }
/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }
/* Large desktop */
@media (min-width: 1200px) { ... } |
/* Mobile wide */
@media handheld, only screen and (max-width: 1023px) { ... }
/* Mobile narrow */
@media handheld, only screen and (max-width: 767px) { ... }
/* Desktop wide */
@media only screen and (max-width: 1280px) and (min-width: 768px) { ... }
/* Desktop narrow */
@media only screen and (max-width: 767px) { ... } |
/* Very large display targeting */
@media only screen and (min-width: 1441px) { ... }
/* Medium display targeting */
@media only screen and (max-width: 1279px) and (min-width: 768px) { ... }
/* Small display targeting */
@media only screen and (max-width: 767px) { ... }
/* Small display targeting */
@media only screen and (max-width: 767px) { ... }
/* Landscape orientation targeting */
@media screen and (orientation: landscape) { ... }
/* Portrait orientation targeting */
@media screen and (orientation: portrait) { ... }
/* Mobile styles */
@media only screen and (max-device-width: 1280px) { ... }
@media only screen and (max-width: 1279px) and (min-width: 768px) { ... } |
/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {}
/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {}
/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) { ... }
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) { ... }
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) { ... } |
