Github Repo v1.0.1

Utilities


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

Float

  • pull-right - floats an element to the right
  • pull-left - floats an element to the left
  • clearfix - clears the floats

Text Alignment

  • text-center - center aligns text
  • text-left - left aligns text
  • text-right - right aligns text

Text Transform

  • text-uppercase - text to uppercase
  • text-lowercase - text to lowercase
  • text-capitalize - capitalizes text

Height / Width

  • full-screen - makes the element 100% view height
  • full-width - make the element 100% width

Flex Alignment

  • vertical-align - vertically centers element using flex
  • horizontal-align - horizontal centers element using flex
  • center - centers element using flex
  • right - right aligns element using flex
  • left - left aligns element using flex

Position

  • fixed - fixed positioned element

Margin / Padding

  • paddingless - removes any padding
  • marginless - removes any margin

Hide

  • hidden - hides the element completely
  • hide-phone - hides the element for screens <480px
  • hide-tablet - hides the element for screens <768px

Buttons

  • button-block - set to display block

Layout / Grid

  • justify-content-md-center - center a row and change width
  • justify-content-center - usable for sm, lg, md and auto
  • justify-content-start and justify-content-end - Flex alignment start or end

Theses classes were pulled from the chota and Bootstrap and renamed for a simpler naming convention.