# Utilities

In addition to the default set of Bootstrap Utility Classes, Jumpstart includes a range of utility classes to make creating new components easier.

###

Arrows

Arrow on top
Arrow on bottom

Add an arrow to the top or bottom of an element to indicate a connection between two elements.

`.arrow-top`

  Adds a small arrow on top of an element

`.arrow-bottom`

  Adds a small arrow on the bottom of an element

###

Background Colors

These classes are in addition to the Bootstrap Color Utilities

`.bg-primary`

  Apply to element to adjust background color

`.bg-primary-2`

  Apply to element to adjust background color

`.bg-primary-3`

  Apply to element to adjust background color

`.bg-primary-alt`

  Apply to element to adjust to a lightened background color

`.bg-primary-2-alt`

  Apply to element to adjust to a lightened background color

`.bg-primary-3-alt`

  Apply to element to adjust to a lightened background color

`.bg-body-color`

  Apply to element to give background the same value as `$body-color` variable.

`.bg-gradient`

  Apply to element to adjust to a lightened background color

###

Borders

I have a thick border

These classes are in addition to the Bootstrap Color Utilities

`.border-thick`

  Adds a border of thickness equivalent to `4 x $border-width` variable. Default: `4px`

###

Dropdowns

When using Jumpstart's Dropdown Grid functionality, `dropdown-grid-menu` class is used to provide the background, border, padding and general appearance of the dropdown menu element as a child of a `[dropdown-grid-content]` element.

`.dropdown-grid-menu`

  Add to a `<div>` inside `[data-dropdown-content]` when using Dropdown Grid functionality. Provides styling to dropdown menu.

###

Hover Effects

Hover fade out
Hover box shadow

`.hover-fade-out`

  Slightly decreases opacity of an element upon hover

`.hover-box-shadow`

  Applies a shadow to an element upon hover

###

Highlight Animation

This is a some text with highighted emphasis in it.

In conjunction with the Animate On Scroll plugin, this class will animate the `<mark>` tag when the element scrolls into view.

`data-aos="highlight-text"`

  Apply to a `<mark>` element to animate the mark's width when scrolled into view

###

Height

I occupy 30% of the viewport height.

`.min-vh-(10 - 100)`

  Apply in increments of 10 to an element adjust to set its height to a fraction of the viewport's height. eg: `.min-vh-30` will occupy 30% of the viewport's height.

###

Width

I occupy 30% of the viewport height.

`.w-lg-100`

  Set's the element's `width: 100%` at large screen sizes.

###

Link Color

This is white textAccompanied by a white link

`.links-white`

  Changes all links within the element to a white color. Useful when combining with white text where the default link color would look out of place.

###

Opacity

opacity-10
opacity-20
opacity-30
opacity-40
opacity-50
opacity-60
opacity-70
opacity-80
opacity-90
opacity-100

`.opacity-(0 - 100)`

  Apply to element to set its `opacity` value to the value indicated by the numerator. eg: `.opacity-20` would set the element's `opacity` to .2

###

Positioning

`.top`

  Positions the element at top of parent. Equivalent to CSS `top: 0; bottom: auto;`

`.bottom`

  Positions the element at bottom of parent. Equivalent to CSS `bottom: 0; top: auto;`

`.left`

  Positions the element at left of parent. Equivalent to CSS `left: 0; right: auto`

`.right`

  Positions the element at right of parent. Equivalent to CSS `right: 0; left: auto;`

###

Text

These classes are in addition to the Bootstrap Text Utilities

`.text-small`

  Changes font size to the size set in `$font-size-small` variable. Default: `.875rem (14px)`.

###

Tooltip Circle

?

    <div class="ml-2 tooltip-circle bg-dark text-white" data-original-title="Here's a tooltip to help explain this feature" data-toggle="tooltip" title="">?</div>

`.tooltip-circle`

  Apply class `tooltip-circle` to a `<div>` to position the tooltip and affect the text size.

###

Transforms

##### I am flipped on the x-axis

##### I am flipped on the y-axis

`.transform-flip-x`

  Flips the element on its X axis

`.transform-flip-y`

  Flips the element on its Y axis