CSS Class Reference

Avatars

.avatar

Apply to an <img> element to format it as a small, rounded avatar

.avatar-sm

Apply to a .avatar element to decrease default size

.avatar-lg

Apply to a .avatar element to increase default size

.avatar-lg

Apply to a .avatar element to increase default size

Background images

.bg-image

Apply to a <img> element to format the image as the background for the parent element

Badges

.badge-md

Apply to a .badge element to fix the font size to .875rem

Forms

.custom-checkbox-switch

Add to .custom-checkbox element to diplay as an 'on/off' style switch

.form-control-round

Add to .form-control element to round corners

.input-group-round

Add to .input-group element to round corners of child elements

Hover Effects

.hover-effect

Apply to a .card, <a> or <img> element to add a raised effect on hover

Icons

.icon

Apply to an <img> element to format as an icon and convert .svg images to inline SVG elements

.icon-sm

Apply to .icon element to reduce the default size

.icon-lg

Apply to .icon element to increase the default size

.text-*

Any Bootstrap text color utility applied to .icon will fill the SVG icon with that color

.icon-rounded

Apply to <div> element that contains an <i.materialicons> element to add a rounded border. Use any bg-* class to color the rounded icon's background

Lists

.list-social-links

Apply to a <ul> element to format as a row of social links, each with its own background and hover effect

.list-pipe-seperator

Apply to a <ul> element to place a pipe '|' character between each child <li> item

Sidebar

.sidebar

Apply to a .col-* element to adjust the 'sticking' point of any child .sticky-top element so that it sits neatly underneath the navigation bar

Sliders

.slider-highlight-selected

Apply to [data-flickity] element to highlight selected slide and fade all others

Triangle Backgrounds

.bg-triangle

Apply to <img src="assets/img/bg-triangle.svg"> element to position the triangle in the background of the section

.bg-triangle-top-left

Position the .bg-triangle element so it points to the top left-hand corner of the section

.bg-triangle-top-right

Position the .bg-triangle element so it points to the top right-hand corner of the section

.bg-triangle-bottom-left

Position the .bg-triangle element so it points to the bottom left-hand corner of the section

.bg-*

Apply to .bg-triangle element to color the triangle background using any bg- utility class

Typography

.font-alt-1

Apply to any text element to use the 'Permanent Marker' font

.text-small

Apply to any text element to fix the font size to the @font-size-sm variable

Videos

.video-cover

Apply to a <div> element that contains an <iframe>, <img.bg-image> and .video-play-icon to format as a Video Cover element

.video-play-icon

Apply to a <div> element to format it as a round video play icon

.video-play-icon-lg

Apply to a .video-play-icon element to increase its default size

Utilities - General

.o-hidden

Sets overflow attribute to hidden

.o-visible

Sets overflow attribute to visible

Utilities - Backgrounds

.bg-gradient

Sets background attribute to a linear gradient from @blue to @indigo

.bg-gradient-2

Sets background attribute to a linear gradient from @indigo to @pink

.bg-gradient-3

Sets background attribute to a linear gradient from @red to @orange

Utilities - Height

.height-(0 - 100)

Sets the height of the element to a min-height of the specified value (0 - 100) in viewport height (vh) units

Utilities - Opacity

.opacity-(0 - 100)

Sets the opacity attribute of the element to the speicified value of 0 - 1

Uitlities - Overlay

.overlay-dark

Apply to a <section> to add a dark fading overlay to the bottom of the section

.overlay-top

Apply to .overlay-dark section to position the overlay at the top of the section

Utilities - Spacing

.spacer-y-(0 - 5)

Apply to an element to add a measure of spacing to the top and bottom of the section. The value (0 - 5) refers to a multiplied measure of the base line height (1.5rem) ie. .spacer-y-2 would be equal to 3rem of padding at the top and bottom of the element.