Responsive Utilities

Canvas is fully responsive and follows the Bootstrap 5 breakpoint system. Most utilities accept a breakpoint infix so you can change layout, spacing, sizing, and visibility per screen size.

Breakpoints

Infix	Applies from	Typical device
`xs` (no infix)	0px	Phones
`sm`	576px	Large phones
`md`	768px	Tablets
`lg`	992px	Small laptops
`xl`	1200px	Desktops
`xxl`	1400px	Large desktops

A responsive class applies at its breakpoint and up. For example .d-md-block takes effect at 768px and wider.

Display (show and hide)

Control visibility per breakpoint with .d-{bp}-{value}:

<!-- hidden on phones, shown from md up -->
<div class="d-none d-md-block">Desktop and tablet only</div>

<!-- shown on phones, hidden from md up -->
<div class="d-block d-md-none">Mobile only</div>

Values include none, block, flex, inline, inline-block, grid.

Responsive families in Canvas

Most utilities documented on the other pages take a breakpoint infix:

Grid columns: .col-md-6, .col-lg-4
Spacing: .mt-md-4, .px-lg-5, .py-xl-6
Heights: .h-lg-100, .h-md-auto
Viewport heights: .min-vh-md-75, .max-vh-lg-50, .max-vh-sm-none
Gutters: .g-md, .gx-lg, .gy-xl
Text alignment: .text-md-center, .text-lg-start
Position: .position-lg, .sticky-md
Flex: .flex-md-row, .justify-content-lg-between

Usage

A layout that stacks on mobile and sits side by side on desktop, with tighter spacing on small screens:

<div class="row g-3 g-lg-5">
  <div class="col-12 col-lg-8">
    <div class="p-3 p-lg-4 bg-contrast-100">Main content</div>
  </div>
  <div class="col-12 col-lg-4">
    <aside class="p-3 p-lg-4 bg-contrast-100 sticky-lg" style="top: 90px;">
      Sidebar, sticky only on large screens
    </aside>
  </div>
</div>

Types of Responsive Classes

1
Device Classes
- .device-xxl - Class for Devices more than >=1400px
- .device-up-xxl - Class for Devices more than >=1400px
- .device-down-xxl - Class for Devices less than <1400px
- .device-xl - Class for Devices from >=1200px to 1399.98px
- .device-up-xl - Class for Devices more than >=1200px
- .device-down-xl - Class for Devices <1200px
- .device-lg - Class for Devices from >=992px to 1199.98px
- .device-up-lg - Class for Devices more than >=992px
- .device-down-lg - Class for Devices <992px
- .device-md - Class for Devices from >=768px to 991.98px
- .device-up-md - Class for Devices more than >=768px
- .device-down-md - Class for Devices <768px
- .device-sm - Class for Devices from >=576px to 767.98px
- .device-up-sm - Class for Devices more than >=576px
- .device-down-sm - Class for Devices <576px
- .device-xs - Class for Devices from 0px to 575.98px
- .device-up-xs - Class for Devices more than 0px
```
.device-down-lg .background-position-class { background-position: left center !important; }

.device-up-lg .background-position-class { background-position: center bottom !important; }
```
Note: Device Classes are applied to the <body> tag.
2
Touch Devices
Define your Custom Styles specifically on Touch Devices using the .device-touch Class.
```
.device-touch #page-title {
	display: none;
}
```
Note: Touch Classes are applied to the <body> tag.

Extras

Responsive Absolute Heights

When an element needs a fixed pixel height that changes per breakpoint, add the data-height-* attributes. The dataheights.js module reads the value for the current device breakpoint and sets the element's height inline, re-applying on resize.

<div class="my-section"
     data-height-xs="300"
     data-height-md="450"
     data-height-lg="600">
    ...
</div>

Notes:

Breakpoints, smallest to largest: data-height-xs, data-height-sm, data-height-md, data-height-lg, data-height-xl, data-height-xxl.
Values cascade upward: if sm is missing it inherits xs, md inherits sm, and so on. So you only set the breakpoints where the height changes.
A bare number is treated as pixels (data-height-md="450" becomes height:450px). You can also pass a CSS value like data-height-lg="75vh".
Default when nothing matches is auto.
Heights recompute automatically on window resize (debounced), so orientation changes are handled.

Responsive Classes

Canvas is built on Bootstrap 5, so its responsive display and layout utilities are available everywhere. Use them to show, hide, or restructure content per breakpoint without custom CSS.

<!-- Visible only on large screens and up -->
<div class="d-none d-lg-block">Desktop banner</div>

<!-- Hidden on large screens and up (mobile/tablet only) -->
<div class="d-lg-none">Mobile-only note</div>

<!-- Switch flex direction by breakpoint -->
<div class="d-flex flex-column flex-md-row justify-content-center">
    <span>Left</span>
    <span>Right</span>
</div>

<!-- Responsive grid columns -->
<div class="row row-cols-2 row-cols-md-3 row-cols-lg-4">
    <div class="col">...</div>
</div>

Breakpoint infixes: sm (>=576px), md (>=768px), lg (>=992px), xl (>=1200px), xxl (>=1400px). No infix means all sizes.

Common patterns used across Canvas demos:

d-none d-lg-block / d-lg-none to swap desktop and mobile blocks.
text-center text-md-start to change alignment.
flex-column flex-md-row for stacked-to-inline layouts.
Spacing utilities accept the same infixes: mt-2 mt-md-0, px-4 px-xl-5.

Canvas also adds device body classes (device-xs through device-xxl, plus device-up-lg, device-touch) that its own modules read; you rarely need to target them directly but they are handy for custom CSS hooks.

Was this page helpful?

Responsive Utilities