Utilities

You can apply these helper classes to almost any element, in order to alter its style.

• text-primary - Primary text
• text-light - Light text
• text-white - White text
• text-dark - Dark text
• text-grey - Grey text
• text-error - Error text
• text-success - Success text
• bg-primary - primary background
• bg-light - Light background
• bg-dark - Dark background
• bg-grey - Grey background
• bg-error - Error background
• bg-success - Success background
• bd-primary - primary border
• bd-light - Light border
• bd-dark - Dark border
• bd-grey - Grey border
• bd-error - Error border
• bd-success - Success border
• pull-right - floats an element to the right
• pull-left - floats an element to the left
• text-center - center aligns text
• text-left - left aligns text
• text-right - right aligns text
• text-uppercase - text to uppercase
• text-lowercase - text to lowercase
• text-capitalize - capitalizes text
• is-full-screen - makes the element 100% view height
• is-full-width - make the element 100% width
• is-vertical-align - vertically centers element using flex
• is-horizontal-align - horizontal centers element using flex
• is-center - centers element using flex
• is-right - right aligns element using flex
• is-left - left aligns element using flex
• is-fixed - fixed positioned element
• is-paddingless - removes any padding
• is-marginless - removes any margin
• is-rounded - make the element round
• clearfix - clears the floats
• is-hidden - hides the element completely
• hide-xs - hides the element for screens <600px
• hide-sm - hides the element for screens >=600px and <900px
• hide-md - hides the element for screens >=900px and <1200px
• hide-lg - hides the element for screens >=1200px
• hide-pr - hides the element for printing

Details

You can have a <details> to defines a toggle-able block of content with a summary and additional details.

This can be coupled to a .dropdown and a couple of .button and .card classes to defines a dropdown button.