Bootstrap Utility Classes

Built on Bootstrap 5

Canvas is a multipurpose HTML template built on top of Bootstrap 5. Every Bootstrap 5 grid class, utility, and component is available out of the box, and Canvas layers its own utility classes and shortcodes on top. If you know Bootstrap, you already know most of Canvas.

The compiled style.css bundles Bootstrap 5, so you do not need to load Bootstrap separately.

The Grid

Use the standard Bootstrap container, row, and column classes:

<div class="container">
  <div class="row">
    <div class="col-md-6 col-lg-4">Column one</div>
    <div class="col-md-6 col-lg-4">Column two</div>
    <div class="col-md-12 col-lg-4">Column three</div>
  </div>
</div>

Container variants: .container, .container-fluid, and the responsive .container-sm, .container-md, .container-lg, .container-xl, .container-xxl.

Breakpoints

Canvas uses the Bootstrap 5 breakpoint scale. These infixes appear across responsive utilities (grid, spacing, display, heights, and more):

Infix	Min width
xs (none)	< 576px
sm	576px
md	768px
lg	992px
xl	1200px
xxl	1400px

Utilities and components

All Bootstrap utility families work: display (.d-flex, .d-none, .d-md-block), flex (.justify-content-center, .align-items-center), spacing (.m-*, .p-*), text, colors, borders, and so on. Bootstrap components such as accordions, modals, dropdowns, and navs are themed by Canvas via CSS custom properties (--bs-* and --cnvs-*).

<div class="d-flex justify-content-between align-items-center p-3">
  <span class="fw-semibold">Left</span>
  <button class="button button-rounded">Right</button>
</div>

Canvas adds its own extensions on top of Bootstrap, documented in the other utility pages: contrast colors, hover utilities (.h-*), viewport heights, gradients, transforms, and more.