In addition to the default set of Bootstrap Utility Classes, Jumpstart includes a range of utility classes to make creating new components easier.
Arrows
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
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
Slightly decreases opacity of an element upon hover
.hover-box-shadow
Applies a shadow to an element upon hover
Highlight Animation
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
.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
.w-lg-100
Set's the element's width: 100% at large screen sizes.
Link Color
.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-(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
.transform-flip-x
Flips the element on its X axis
.transform-flip-y
Flips the element on its Y axis