WHY SMARTY?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Ut enim massa, sodales tempor convallis et, iaculis ac massa.

RECENTLY VISITED
CONTACT INFO
  • Address: PO Box 21132, Here Weare St,
    Melbourne, Vivas 2355 Australia
  • Phone: 1-800-565-2390
  • Email: support@yourname.com

RESPONSIVE

  1. Home
  2. Shortcodes
  3. Responsive

Resize your browser

For faster mobile-friendly development, use these utility classes for showing and hiding content by device via media query. Also included are utility classes for toggling content when printed.

Show Code 
<i class="fs-200 fa fa-desktop text-muted hidden-lg-down"></i>
<i class="fs-200 fa fa-laptop text-info hidden-sm-down hidden-lg-up"></i>
<i class="fs-200 fa fa-tablet text-success hidden-md-up hidden-xs-down"></i>
<i class="fs-200 fa fa-mobile text-warning hidden-sm-up"></i>

Available classes

Use a single or combination of the available classes for toggling content across viewport breakpoints.

Extra small devices Portrait phones (<544px) Small devices Landscape phones (≥544px - <768px) Medium devices Tablets (≥768px - <992px) Large devices Desktops (≥992px - <1200px) Extra large devices Desktops (≥1200px)
.hidden-xs-down Visible Visible Visible Visible
.hidden-sm-down Visible Visible Visible
.hidden-md-down Visible Visible
.hidden-lg-down Visible
.hidden-xl-down
.hidden-xs-up
.hidden-sm-up Visible
.hidden-md-up Visible Visible
.hidden-lg-up Visible Visible Visible
.hidden-xl-up Visible Visible Visible Visible

Print classes

Similar to the regular responsive classes, use these for toggling content for print.

Class Browser Print
.visible-print-block Visible
(as display: block)
.visible-print-inline Visible
(as display: inline)
.visible-print-inline-block Visible
(as display: inline-block)
.hidden-print Visible

Similar to the regular responsive classes, use these for toggling content for print.