| Base width |
Fluid (480px, 768px, 992px, 1200px) |
Fluid and fixed (724px, 940px, 1170px; below 768px are single column and vertically stacked) |
Fluid (max-width 62.5em default) |
Fluid (max-width 62.5em default) |
Fluid (max-width 100%) |
960px |
| Columns |
12 |
12 |
1-16 with customizer (12 default) |
1-16 with customizer (12 default) |
12-24 with customizer |
16 |
| Single column class syntax |
.col-xs-1
.col-sm-1
.col-md-1
.col-lg-1 |
.span1 |
.small-1.columns
.medium-1.columns
.large-1.columns |
.small-1.columns
.medium-1.columns
.large-1.columns |
.one.column |
.one.column |
| Two column class syntax |
.col-xs-2
.col-sm-2
.col-md-2
.col-lg-2 |
.span2 |
.small-2.columns
.medium-2.columns
.large-2.columns |
.small-2.columns
.medium-2.columns
.large-2.columns |
.two.columns |
.two.columns |
| Container syntax |
<div class="container"> |
<div class="container">
or
<div class="container-fluid"> |
Not available |
Not available |
<div class="container"> |
<div class="container"> |
| Row syntax |
<div class="row">
<div class="col-xs-2 col-sm-8 col-md-6 col-lg-5">...</div>
<div class="col-xs-10 col-sm-4 col-md-6 col-lg-7">...</div>
</div> |
<div class="row">
<div class="span4">...</div>
<div class="span8">...</div>
</div> |
<div class="row">
<div class="small-8 medium-6 large-4 columns">...</div>
<div class="small-4 medium-6 large-8 columns">...</div>
</div> |
<div class="row">
<div class="small-8 medium-6 large-4 columns">...</div>
<div class="small-4 medium-6 large-8 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> |
| Gutter-free row syntax |
Not available |
Not available |
<div class="row collapse"> |
<div class="row collapse"> |
<div class="row collapse"> |
Not available |
| Nested column syntax |
<div class="row">
<div class="col-md-6">
<div class="row">
<!-- nested columns add up to 12 -->
<div class="col-md-2">...</div>
<div class="col-md-4">...</div>
</div>
</div>
</div> |
<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="small-6 columns">
<div class="row">
<!-- nested columns add up to 12 -->
<div class="small-6 columns">...</div>
<div class="small-6 columns">...</div>
</div>
</div>
</div> |
<div class="row">
<div class="small-6 columns">
<div class="row">
<!-- nested columns add up to 12 -->
<div class="small-6 columns">...</div>
<div class="small-6 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="col-lg-4">...</div>
<div class="col-lg-4 col-lg-offset-4">...</div>
</div> |
<div class="row">
<div class="span4">...</div>
<div class="span4 offset4">...</div>
</div> |
<div class="row">
<div class="large-1 columns">1</div>
<div class="large-8 large-offset-3 columns">8, offset 3</div>
</div> |
<div class="row">
<div class="large-1 columns">1</div>
<div class="large-8 large-offset-3 columns">8, offset 3</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 |
Not available |
<div class="row">
<div class="small-3 small-centered columns">3 centered</div>
</div> |
<div class="row">
<div class="small-3 small-centered columns">3 centered</div>
</div> |
<div class="row">
<div class="three columns centered">...</div>
</div> |
Not available |
| Ordering syntax |
<div class="row">
<div class="col-lg-9 col-lg-push-3">...</div>
<div class="col-lg-3 col-lg-pull-9">...</div>
</div> |
Not available |
<div class="row">
<div class="small-2 push-10 columns">first in mobile/last in desktop</div>
<div class="small-10 pull-2 columns">first in desktop/last in mobile</div>
</div> |
<div class="row">
<div class="small-2 push-10 columns">first in mobile/last in desktop</div>
<div class="small-10 pull-2 columns">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 |
<div class="row">
<div class="col-xs-3">...</div>
<div class="col-xs-9">...</div>
</div> |
Not available |
<!-- Now done through small- column prefixes: -->
<div class="row">
<div class="small-3 columns">...</div>
<div class="small-9 columns">...</div>
</div> |
<!-- Now done through small- column prefixes: -->
<div class="row">
<div class="small-3 columns">...</div>
<div class="small-9 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 |
Not available |
<!-- Using only the small-block-grid -->
<ul class="small-block-grid-2">
<li>...</li>
<li>...</li>
</ul>
<!-- Using only the large-block-grid -->
<ul class="large-block-grid-4">
<li>...</li>
<li>...</li>
</ul>
<!-- Using both block grids together for different layouts -->
<ul class="small-block-grid-2 large-block-grid-4">
<li>...</li>
<li>...</li>
</ul> |
<!-- Using only the small-block-grid -->
<ul class="small-block-grid-2">
<li>...</li>
<li>...</li>
</ul>
<!-- Using only the large-block-grid -->
<ul class="large-block-grid-4">
<li>...</li>
<li>...</li>
</ul>
<!-- Using both block grids together for different layouts -->
<ul class="small-block-grid-2 large-block-grid-4">
<li>...</li>
<li>...</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 |
Screen size based:
.visible-xs
.visible-sm
.visible-md
.visible-lg
.hidden-xs
.hidden-sm
.hidden-md
.hidden-lg
Can be combined with block,
inline-block, and inline, ex:
.visible-xs-block
.visible-xs-inline-block
.visible-xs-inline
Print based:
.visible-print
.hidden-print |
Device based:
.visible-desktop
.visible-tablet
.visible-phone
.hidden-desktop
.hidden-tablet
.hidden-phone |
Screen size based:
.show-for-small
.show-for-medium-down
.show-for-medium
.show-for-medium-up
.show-for-large-down
.show-for-large
.show-for-large-up
.hide-for-small
.hide-for-medium-down
.hide-for-medium
.hide-for-medium-up
.hide-for-large-down
.hide-for-large
.hide-for-large-up
Orientation based:
.show-for-landscape
.show-for-portrait
.hide-for-landscape
.hide-for-portrait
Device based:
.show-for-touch
.hide-for-touch |
Screen size based:
.show-for-small
.show-for-medium-down
.show-for-medium
.show-for-medium-up
.show-for-large-down
.show-for-large
.show-for-large-up
.hide-for-small
.hide-for-medium-down
.hide-for-medium
.hide-for-medium-up
.hide-for-large-down
.hide-for-large
.hide-for-large-up
Orientation based:
.show-for-landscape
.show-for-portrait
.hide-for-landscape
.hide-for-portrait
Device based:
.show-for-touch
.hide-for-touch |
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 |
/* Small devices - Tablets (>768px) */
@media (min-width: 768px)
@media screen and (min-width: 768px)
@media (min-width: 768px) and (max-width: 991px)
/* Medium devices - Desktops (>992px) */
@media (min-width: 992px)
/* Large devices - Desktops (>1200px) */
@media (min-width: 1200px) |
/* 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) { ... } |
// Small screens
@media only screen { } /* Define mobile styles */
@media only screen and (max-width: 40em) { } /* max-width 640px, mobile-only styles, use when QAing mobile issues */
// Medium screens
@media only screen and (min-width: 40.063em) { } /* min-width 641px, medium screens */
@media only screen and (min-width: 40.063em) and (max-width: 64em) { } /* min-width 641px and max-width 1024px, use when QAing tablet-only issues */
// Large screens
@media only screen and (min-width: 64.063em) { } /* min-width 1025px, large screens */
@media only screen and (min-width: 64.063em) and (max-width: 90em) { } /* min-width 1025px and max-width 1440px, use when QAing large screen-only issues */
// XLarge screens
@media only screen and (min-width: 90.063em) { } /* min-width 1441px, xlarge screens */
@media only screen and (min-width: 90.063em) and (max-width: 120em) { } /* min-width 1441px and max-width 1920px, use when QAing xlarge screen-only issues */
// XXLarge screens
@media only screen and (min-width: 120.063em) { } /* min-width 1921px, xxlarge screens */ |
/* Styles for screens that are at least 768px; */
@media only screen and (min-width: 48em) { ... }
/* Medium Displays: 768px - 1279px */
@media only screen and (min-width: 48em) { ... }
/* Large Displays: 1280px - 1440px */
@media only screen and (min-width: 80em) { ... }
/* X-Large Displays: 1400px and up */
@media only screen and (min-width: 90em) { ... }
/* Orientation: landscape */
@media screen and (orientation: landscape) { ... }
/* Orientation: portrait */
@media screen and (orientation: portrait) { ... }
/* Foundation Block Grids for above small breakpoint */
@media only screen and (min-width: 48em) { ... }
/* Top bar */
@media only screen and (min-width: 58.75em) { ... } |
/* 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) { ... } |
