Utility Classes

Print
Related Pages

Overview

The Template Package offers a variety of utility classes which either extend Bootstrap 4 Utilities, or are unique to the Template. To better understand what these classes are and how they can best be used, become familiar with the Bootstrap 4 Utilities first.

Many of the examples in this document have information on how the class names are formatted. A basic class name format will be structured {property}-{viewport}-{size} or simply {property}-{size} if responsive behavior isn’t needed.

Classes by Type

Spacing

Margin and Padding utility classes which are a responsive extension to the Bootstrap 4 Spacing classes. They follow the same naming rules, and class names are formatted as follows: {property}{side}-{viewport(sm,xxl)}-{size(0,5)}

Spacing Classes
Class Type Class Format Example
Margin Margin Bottom .mb-{viewport}-{0-5} .mb-md-1
Margin Margin Left .ml-{viewport}-{0-5} .ml-sm-0
Margin Margin Right .mr-{viewport}-{0-5} .mr-lg-3
Margin Margin Top .mt-{viewport}-{0-5} .mt-xl-4
Padding Padding Bottom .pb-{viewport}-{0-5} .pb-md-1
Padding Padding Left .pl-{viewport}-{0-5} .pl-sm-0
Padding Padding Right .pr-{viewport}-{0-5} .pr-lg-3
Padding Padding Top .pt-{viewport}-{0-5} .pt-xl-4

Clears

Use these classes to clear floated content:

  • Clear Both:  .cb or .clear
  • Clear Left:  .cl
  • Clear Right:  .cr
  • Clear Float (container class):  .cf

Sizing

Sizing classes which are a responsive extension to the Bootstrap 4 Sizing classes, providing additional options for setting heights, widths as well as their min and max variants. They follow the same naming rules, and class names are formatted as: {property}-{viewport(sm,xxl)}-{size}

You can also set non-responsive sizes using the viewport units vh and vw, which are formatted slightly differently: {property}{vpsize(5,100)}

Where property is one of the following:

  • h – for classes that set height
  • w – for classes that set width
  • maxh – for classes that set max-height
  • maxw – for classes that set max-width
  • minh – for classes that set min-height
  • minw – for classes that set min-width
  • vh – for classes that set viewport height
  • vw – for classes that set viewport width

Where viewport is one of the following:

  • sm – for classes set in the Small viewport
  • md – for classes set in the Medium viewport
  • lg – for classes set in the Large viewport
  • xl – for classes set in the Extra-Large viewport
  • xxl – for classes set in the Extra-Extra-Large viewport
  • blank – for classes that set sizing for all viewports

Where size is one of the following:

  • 1 – for classes that set the size to 1rem
  • 2 – for classes that set the size to 2rem
  • 3 – for classes that set the size to 3rem
  • 4 – for classes that set the size to 4rem
  • 6 – for classes that set the size to 6rem
  • 8 – for classes that set the size to 8rem
  • 10 – for classes that set the size to 10rem
  • 12 – for classes that set the size to 12rem
  • 14 – for classes that set the size to 14rem
  • 20 – for classes that set the size to 20rem
  • 30 – for classes that set the size to 30rem
  • 40 – for classes that set the size to 40rem
  • 25 – for classes that set the size to 25%
  • 33 – for classes that set the size to 33%
  • 50 – for classes that set the size to 50%
  • 66 – for classes that set the size to 66%
  • 75 – for classes that set the size to 75%
  • 100 – for classes that set the size to 100%

Or where vpsize is one of 5 through 100

  • Note: Each vpsize is equal to the viewport value. For example: .vw50 is equal to 50vw.

Examples

  • .w-xl-25 is equal to setting the width of an element to 25% of its parent container in the Extra-Large viewport.
  • .maxh-4 is equal to setting the height of an element to 4rem in all viewports.
  • .vw35 is equal to setting the viewport width of an element to 35vw in all viewports.

Borders

This section covers border styles, radiuses, and drop-shadows that can be applied to a variety of elements, such as images and buttons. Class names are formatted as follows: {property}-{style|side|viewport(sm,xxl)}-{size(0,5)}.

Border widths are set using PX values, ranging from 0(none) to 5 and border radiuses are set using REM values of 0, 0.25, 0.5, 0.75 and 1.

Responsive borders are turned on or off only, using sizes of 0 or 1.
Border Styles
  • .bs-dashed
  • .bs-dotted
  • .bs-hidden
  • .bs-none
  • .bs-solid
Widths -- All Borders
  • .ba-0
  • .ba-1
  • .ba-2
  • .ba-3
  • .ba-4
  • .ba-5
Radius -- All Positions
  • .r-xsmall
  • .r-small
  • .r-medium
  • .r-large
  • .r-xlarge
  • .r-none
Dropshadow
  • .ds-0
  • .ds-5
  • .ds-8

Border Widths by Side

Border Widths -- Left
  • .bl-0
  • .bl-1
  • .bl-2
  • .bl-3
  • .bl-4
  • .bl-5
  • .bl-1g-0
  • .bl-1g-1
  • .bl-md-1
  • .bl-sm-0
  • .bl-sm-1
  • .bl-xl-0
  • .bl-xl-1
  • .bl-xxl-0
  • .bl-xxl-1
Border Widths -- Right
  • .br-0
  • .br-1
  • .br-2
  • .br-3
  • .br-4
  • .br-5
  • .br-1g-0
  • .br-1g-1
  • .br-md-1
  • .br-sm-0
  • .br-sm-1
  • .br-xl-0
  • .br-xl-1
  • .br-xxl-0
  • .br-xxl-1
Border Widths -- Bottom
  • .bb-0
  • .bb-1
  • .bb-2
  • .bb-3
  • .bb-4
  • .bb-5
  • .bb-1g-0
  • .bb-1g-1
  • .bb-md-1
  • .bb-sm-0
  • .bb-sm-1
  • .bb-xl-0
  • .bb-xl-1
  • .bb-xxl-0
  • .bb-xxl-1
Border Widths -- Top
  • .bt-0
  • .bt-1
  • .bt-2
  • .bt-3
  • .bt-4
  • .bt-5
  • .bt-1g-0
  • .bt-1g-1
  • .bt-md-1
  • .bt-sm-0
  • .bt-sm-1
  • .bt-xl-0
  • .bt-xl-1
  • .bt-xxl-0
  • .bt-xxl-1

Border Radiuses by Position

Radius -- Bottom
  • .r-bottom-0
  • .r-bottom-1
  • .r-bottom-2
  • .r-bottom-3
  • .r-bottom-4
Radius -- Top
  • .r-top-0
  • .r-top-1
  • .r-top-2
  • .r-top-3
  • .r-top-4
Radius -- Left
  • .r-left-0
  • .r-left-1
  • .r-left-2
  • .r-left-3
  • .r-left-4
Radius -- Right
  • .r-right-0
  • .r-right-1
  • .r-right-2
  • .r-right-3
  • .r-right-4
Radius -- Bottom Left
  • .r-bl-0
  • .r-bl-1
  • .r-bl-2
  • .r-bl-3
  • .r-bl-4
Radius -- Bottom Right
  • .r-br-0
  • .r-br-1
  • .r-br-2
  • .r-br-3
  • .r-br-4
Radius -- Top Left
  • .r-tl-0
  • .r-tl-1
  • .r-tl-2
  • .r-tl-3
  • .r-tl-4
Radius -- Top Right
  • .r-tr-0
  • .r-tr-1
  • .r-tr-2
  • .r-tr-3
  • .r-tr-4

Print

There are several class that developers can use to enhance their print page layouts:

.p-none — The .p-none class hides content in print that normally isn’t hidden. This class can be especially useful for interactive elements that do not make sense to print.

.page-break & .page-break-after — Use these classes to add page breaks before or after your content in order to direct the printer on how to correctly break up pages.

.col-p-1 through .col-p-12 — Web pages may have a different print layout due to inherent print styles or additional classes.  Adding a .col-p-# class to specify the width of content in columns can address some of these layout problems.

Column Count

Divide long text content into equal sized columns, which can be two, three or four columns wide. These classes follow the same naming rules, and class names are formatted as: {cc}-{viewport(sm,xxl)}-{size}

Example

.cc-sm-2 is equal to setting the column count to two in a small viewport, where as .cc-2 would set the column count to two in all viewports.

Responsive Example

<div class="cc-1 cc-sm-2 cc-md-3 cc-lg-4">
	Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
	ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augu.
	Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.
</div>

Column Order

Change the order your columns (.col) appear on your pages, using class names that are formatted as: {order}-{position(1-5)}

Standard Reordering

<div class="row">
	<div class="col order-3">1 (order-3)</div>
	<div class="col order-1">2 (order-1)</div>
	<div class="col order-5">3 (order-5)</div>
	<div class="col order-2">4 (order-2)</div>
	<div class="col order-4">5 (order-4)</div>
</div>

Responsive Reordering

<div class="row">
	<div class="col order-md-2 order-lg-1 order-xl-2 order-xxl-1">Column 1</div>
	<div class="col order-md-1 order-lg-2 order-xl-1 order-xxl-2"> Column 2</div>
</div>