Utility Classes

Backgrounds

Utilities for controlling an element’s background color.

Class	Description
`.bg-white`	Set the background color of an element to white.
`.bg-black`	Set the background color of an element to black.
`.bg-gray`	Set the background color of an element to gray.
`.bg-red`	Set the background color of an element to red.
`.bg-blue`	Set the background color of an element to blue.

Where to customize this?

Background color utilities are auto generated, you can modify and add or remove colors in $colors map inside src/sass/_settings.scss file.

Display

Utilities for controlling the display box type of an element.

Class	Description
`.block`	Set the box type of the element to block.
`.table`	Set the box type of the element to table.
`.table-row`	Set the box type of the element to table-row.
`.table-cell`	Set the box type of the element to table-cell.
`.hidden`	Set the box type of the element to none.

Display classes are responsive

Bojler uses an intuitive - (-sm) suffix that makes it easy to notice responsive classes in your markup while keeping the original class name recognizable and intact. For example, if you want to apply .block on small screens only you’ll use this class: .block-sm.

Spacing

Utilities for controlling an element’s padding and margin.

Control an element’s padding and margin using the .p- and .m- utilities.

For example, .pt-1 would add 10px of padding to the top of the element, .mx-0 would make the horizontal margin zero.

These keywords are available by default:

Class Side (Optional) Width

Class	Side (Optional)	Width
Paddings `.p-` Margins `.m-`	Paddings only `t` — Top `r` — Right `b` — Bottom `l` — Left `y` — Vertical Paddings and Margins `x` — Horizontal	Paddings only `0` — 0px `1` — 10px Margins only `auto` — auto

Paddings

.p-

Margins

.m-

Paddings only

t — Top
r — Right
b — Bottom
l — Left
y — Vertical

Paddings and Margins

x — Horizontal

Paddings only

0 — 0px
1 — 10px

Margins only

auto — auto

Spacing classes are responsive

Bojler uses an intuitive - (-sm) suffix that makes it easy to notice responsive classes in your markup while keeping the original class name recognisable and intact. For example, if you want to apply .pt-1 on small screens only you’ll use this class: .pt-1-sm.

Where to customize this?

Spacing utilities are auto generated, you can modify and add or remove sizes and sides in $spacers and $spacing-sides maps inside src/sass/_settings.scss file.

Typography

Headings

We redefined all of our basic heading styles against utility classes so as to allow for double stranded heading hierarchy, e.g. we semantically need an H2, but we want it to be sized like an H1.

Class	Description
`.h1`	Add `<h1>` element styles to other element.
`.h2`	Add `<h2>` element styles to other element.
`.h3`	Add `<h3>` element styles to other element.
`.h4`	Add `<h4>` element styles to other element.
`.h5`	Add `<h5>` element styles to other element.
`.h6`	Add `<h6>` element styles to other element.

Text color

Utilities for controlling the text color of an element.

Class	Description
`.text-white`	Set the text color of an element to white.
`.text-black`	Set the text color of an element to black.
`.text-gray`	Set the text color of an element to gray.
`.text-red`	Set the text color of an element to red.
`.text-blue`	Set the text color of an element to blue.

Where to customize this?

Text color utilities are auto generated, you can modify and add or remove colors in $colors map inside src/sass/_settings.scss file.

Font weight

Utilities for controlling the font weight of an element.

Class	Description
`.font-normal`	Set the font weight of an element to normal.
`.font-bold`	Set the font weight of an element to bold.

Text alignment

Utilities for controlling the alignment of text.

Class	Description
`.text-left`	Align text to the left.
`.text-right`	Align text to the right.
`.text-center`	Align text to the center.

Text alignment classes are responsive

Bojler uses an intuitive - (-sm) suffix that makes it easy to notice responsive classes in your markup while keeping the original class name recognisable and intact. For example, if you want to apply .text-center on small screens only you’ll use this class: .text-center-sm.

Style and decoration

Utilities for controlling the style of text.

Class	Description
`.italic`	Italicises the text within an element.
`.roman`	Sets the text to roman (disables italics) within an element.
`.uppercase`	Makes all text uppercase within an element.