##### Loading...

Disable Preloader

## Responsive & Visibility

### Responsive utilities

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.

| Extra small devices Phones (<768px) | Small devices Tablets (≥768px) | Medium devices Desktops (≥992px) | Large devices Desktops (≥1200px)
--- | --- | --- | --- | ---
`.visible-xs-*` | Visible | Hidden | Hidden | Hidden
`.visible-sm-*` | Hidden | Visible | Hidden | Hidden
`.visible-md-*` | Hidden | Hidden | Visible | Hidden
`.visible-lg-*` | Hidden | Hidden | Hidden | Visible
`.hidden-xs` | Hidden | Visible | Visible | Visible
`.hidden-sm` | Visible | Hidden | Visible | Visible
`.hidden-md` | Visible | Visible | Hidden | Visible
`.hidden-lg` | Visible | Visible | Visible | Hidden

### Breakpoint

Group of classes | CSS `display`
--- | ---
`.visible-*-block` | `display: block;`
`.visible-*-inline` | `display: inline;`
`.visible-*-inline-block` | `display: inline-block;`

### Print classes

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

Classes | Browser | Print
--- | --- | ---
`.visible-print-block` `.visible-print-inline` `.visible-print-inline-block` | Hidden | Visible
`.hidden-print` | Visible | Hidden

### Test cases

Resize your browser or load on different devices to test the responsive utility classes

Extra small ✔ Visible on x-small
Small ✔ Visible on small
Medium ✔ Visible on medium
Large ✔ Visible on large
Extra small and small ✔ Visible on x-small and small
Medium and large ✔ Visible on medium and large
Extra small and medium ✔ Visible on x-small and medium
Small and large ✔ Visible on small and large
Extra small and large ✔ Visible on x-small and large
Small and medium ✔ Visible on small and medium

### Hidden on...

Here, green checkmarks also indicate the element is hidden in your current viewport.

Extra small ✔ Hidden on x-small
Small ✔ Hidden on small
Medium ✔ Hidden on medium
Large ✔ Hidden on large
Extra small and small ✔ Hidden on x-small and small
Medium and large ✔ Hidden on medium and large
Extra small and medium ✔ Hidden on x-small and medium
Small and large ✔ Hidden on small and large
Extra small and large ✔ Hidden on x-small and large
Small and medium ✔ Hidden on small and medium