Utilities
Utility classes are commonly used helper classes intended to reduce the need for custom styling.
Borders #
| Selector | Usage |
|---|---|
.border |
sets a light gray, #EBEBEB 1px border to all sides |
.border-b |
sets a light gray, #EBEBEB 1px border to the bottom |
.border-t |
sets a light gray, #EBEBEB 1px border to the top |
.border-l |
sets a light gray, #EBEBEB 1px border to the left |
.border-r |
sets a light gray, #EBEBEB 1px border to the right |
.border-0 |
removes borders from all sides |
.border-0-b |
removes border from the bottom |
.border-0-t |
removes border from the top |
.border-0-l |
removes border from the left |
.border-0-r |
removes border from the right |
Responsive Borders - Small (480PX)
| Selector | Usage |
|---|---|
.border-sm |
sets a light gray, #EBEBEB 1px border to all sides between 480px and 767px |
.border-sm-down |
sets a light gray, #EBEBEB 1px border to all sides at 479px and below |
.border-sm-up |
sets a light gray, #EBEBEB 1px border to all sides at 480px and above |
.border-b-sm |
sets a light gray, #EBEBEB 1px border to the bottom between 480px and 767px |
.border-b-sm-down |
sets a light gray, #EBEBEB 1px border to the bottom at 479px and below |
.border-b-sm-up |
sets a light gray, #EBEBEB 1px border to the bottom at 480px and above |
.border-t-sm |
sets a light gray, #EBEBEB 1px border to the top between 480px and 767px |
.border-t-sm-down |
sets a light gray, #EBEBEB 1px border to the top at 479px and below |
.border-t-sm-up |
sets a light gray, #EBEBEB 1px border to the top at 480px and above |
.border-l-sm |
sets a light gray, #EBEBEB 1px border to the left between 480px and 767px |
.border-l-sm-down |
sets a light gray, #EBEBEB 1px border to the left at 479px and below |
.border-l-sm-up |
sets a light gray, #EBEBEB 1px border to the left at 480px and above |
.border-r-sm |
sets a light gray, #EBEBEB 1px border to the right between 480px and 767px |
.border-r-sm-down |
sets a light gray, #EBEBEB 1px border to the right at 479px and below |
.border-r-sm-up |
sets a light gray, #EBEBEB 1px border to the right at 480px and above |
.border-0-sm |
removes borders from all sides between 480px and 767px |
.border-0-sm-down |
removes borders from all sides at 479px and below |
.border-0-sm-up |
removes borders from all sides at 480px and above |
.border-0-b-sm |
removes border from the bottom between 480px and 767px |
.border-0-b-sm-down |
removes border from the bottom at 479px and below |
.border-0-b-sm-up |
removes border from the bottom at 480px and above |
.border-0-t-sm |
removes border from the top between 480px and 767px |
.border-0-t-sm-down |
removes border from the top at 479px and below |
.border-0-t-sm-up |
removes border from the top at 480px and above |
.border-0-l-sm |
removes border from the left between 480px and 767px |
.border-0-l-sm-down |
removes border from the left at 479px and below |
.border-0-l-sm-up |
removes border from the left at 480px and above |
.border-0-r-sm |
removes border from the right between 480px and 767px |
.border-0-r-sm-down |
removes border from the right at 479px and below |
.border-0-r-sm-up |
removes border from the right at 480px and above |
Responsive Borders - Medium (768PX)
| Selector | Usage |
|---|---|
.border-md |
sets a light gray, #EBEBEB 1px border to all sides between 768px and 1023px |
.border-md-down |
sets a light gray, #EBEBEB 1px border to all sides at 767px and below |
.border-md-up |
sets a light gray, #EBEBEB 1px border to all sides at 768px and above |
.border-b-md |
sets a light gray, #EBEBEB 1px border to the bottom between 768px and 1023px |
.border-b-md-down |
sets a light gray, #EBEBEB 1px border to the bottom at 767px and below |
.border-b-md-up |
sets a light gray, #EBEBEB 1px border to the bottom at 768px and above |
.border-t-md |
sets a light gray, #EBEBEB 1px border to the top between 768px and 1023px |
.border-t-md-down |
sets a light gray, #EBEBEB 1px border to the top at 767px and below |
.border-t-md-up |
sets a light gray, #EBEBEB 1px border to the top at 768px and above |
.border-l-md |
sets a light gray, #EBEBEB 1px border to the left between 768px and 1023px |
.border-l-md-down |
sets a light gray, #EBEBEB 1px border to the left at 767px and below |
.border-l-md-up |
sets a light gray, #EBEBEB 1px border to the left at 768px and above |
.border-r-md |
sets a light gray, #EBEBEB 1px border to the right between 768px and 1023px |
.border-r-md-down |
sets a light gray, #EBEBEB 1px border to the right at 767px and below |
.border-r-md-up |
sets a light gray, #EBEBEB 1px border to the right at 768px and above |
.border-0-md |
removes borders from all sides between 768px and 1023px |
.border-0-md-down |
removes borders from all sides at 767px and below |
.border-0-md-up |
removes borders from all sides at 768px and above |
.border-0-b-md |
removes border from the bottom between 768px and 1023px |
.border-0-b-md-down |
removes border from the bottom at 767px and below |
.border-0-b-md-up |
removes border from the bottom at 768px and above |
.border-0-t-md |
removes border from the top between 768px and 1023px |
.border-0-t-md-down |
removes border from the top at 767px and below |
.border-0-t-md-up |
removes border from the top at 768px and above |
.border-0-l-md |
removes border from the left between 768px and 1023px |
.border-0-l-md-down |
removes border from the left at 767px and below |
.border-0-l-md-up |
removes border from the left at 768px and above |
.border-0-r-md |
removes border from the right between 768px and 1023px |
.border-0-r-md-down |
removes border from the right at 767px and below |
.border-0-r-md-up |
removes border from the right at 768px and above |
Responsive Borders - Large (1024PX)
| Selector | Usage |
|---|---|
.border-lg |
sets a light gray, #EBEBEB 1px border to all sides between 1024px and 1279px |
.border-lg-down |
sets a light gray, #EBEBEB 1px border to all sides at 1023px and below |
.border-lg-up |
sets a light gray, #EBEBEB 1px border to all sides at 1024px and above |
.border-b-lg |
sets a light gray, #EBEBEB 1px border to the bottom between 1024px and 1279px |
.border-b-lg-down |
sets a light gray, #EBEBEB 1px border to the bottom at 1023px and below |
.border-b-lg-up |
sets a light gray, #EBEBEB 1px border to the bottom at 1024px and above |
.border-t-lg |
sets a light gray, #EBEBEB 1px border to the top between 1024px and 1279px |
.border-t-lg-down |
sets a light gray, #EBEBEB 1px border to the top at 1023px and below |
.border-t-lg-up |
sets a light gray, #EBEBEB 1px border to the top at 1024px and above |
.border-l-lg |
sets a light gray, #EBEBEB 1px border to the left between 1024px and 1279px |
.border-l-lg-down |
sets a light gray, #EBEBEB 1px border to the left at 1023px and below |
.border-l-lg-up |
sets a light gray, #EBEBEB 1px border to the left at 1024px and above |
.border-r-lg |
sets a light gray, #EBEBEB 1px border to the right between 1024px and 1279px |
.border-r-lg-down |
sets a light gray, #EBEBEB 1px border to the right at 1023px and below |
.border-r-lg-up |
sets a light gray, #EBEBEB 1px border to the right at 1024px and above |
.border-0-lg |
removes borders from all sides between 1024px and 1279px |
.border-0-lg-down |
removes borders from all sides at 1023px and below |
.border-0-lg-up |
removes borders from all sides at 1024px and above |
.border-0-b-lg |
removes border from the bottom between 1024px and 1279px |
.border-0-b-lg-down |
removes border from the bottom at 1023px and below |
.border-0-b-lg-up |
removes border from the bottom at 1024px and above |
.border-0-t-lg |
removes border from the top between 1024px and 1279px |
.border-0-t-lg-down |
removes border from the top at 1023px and below |
.border-0-t-lg-up |
removes border from the top at 1024px and above |
.border-0-l-lg |
removes border from the left between 1024px and 1279px |
.border-0-l-lg-down |
removes border from the left at 1023px and below |
.border-0-l-lg-up |
removes border from the left at 1024px and above |
.border-0-r-lg |
removes border from the right between 1024px and 1279px |
.border-0-r-lg-down |
removes border from the right at 1023px and below |
.border-0-r-lg-up |
removes border from the right at 1024px and above |
Responsive Borders - Extra Large (1280PX)
| Selector | Usage |
|---|---|
.border-xl |
sets a light gray, #EBEBEB 1px border to all sides between 1280px and 1599px |
.border-xl-down |
sets a light gray, #EBEBEB 1px border to all sides at 1279px and below |
.border-xl-up |
sets a light gray, #EBEBEB 1px border to all sides at 1280px and above |
.border-b-xl |
sets a light gray, #EBEBEB 1px border to the bottom between 1280px and 1599px |
.border-b-xl-down |
sets a light gray, #EBEBEB 1px border to the bottom at 1279px and below |
.border-b-xl-up |
sets a light gray, #EBEBEB 1px border to the bottom at 1280px and above |
.border-t-xl |
sets a light gray, #EBEBEB 1px border to the top between 1280px and 1599px |
.border-t-xl-down |
sets a light gray, #EBEBEB 1px border to the top at 1279px and below |
.border-t-xl-up |
sets a light gray, #EBEBEB 1px border to the top at 1280px and above |
.border-l-xl |
sets a light gray, #EBEBEB 1px border to the left between 1280px and 1599px |
.border-l-xl-down |
sets a light gray, #EBEBEB 1px border to the left at 1279px and below |
.border-l-xl-up |
sets a light gray, #EBEBEB 1px border to the left at 1280px and above |
.border-r-xl |
sets a light gray, #EBEBEB 1px border to the right between 1280px and 1599px |
.border-r-xl-down |
sets a light gray, #EBEBEB 1px border to the right at 1279px and below |
.border-r-xl-up |
sets a light gray, #EBEBEB 1px border to the right at 1280px and above |
.border-0-xl |
removes borders from all sides between 1280px and 1599px |
.border-0-xl-down |
removes borders from all sides at 1279px and below |
.border-0-xl-up |
removes borders from all sides at 1280px and above |
.border-0-b-xl |
removes border from the bottom between 1280px and 1599px |
.border-0-b-xl-down |
removes border from the bottom at 1279px and below |
.border-0-b-xl-up |
removes border from the bottom at 1280px and above |
.border-0-t-xl |
removes border from the top between 1280px and 1599px |
.border-0-t-xl-down |
removes border from the top at 1279px and below |
.border-0-t-xl-up |
removes border from the top at 1280px and above |
.border-0-l-xl |
removes border from the left between 1280px and 1599px |
.border-0-l-xl-down |
removes border from the left at 1279px and below |
.border-0-l-xl-up |
removes border from the left at 1280px and above |
.border-0-r-xl |
removes border from the right between 1280px and 1599px |
.border-0-r-xl-down |
removes border from the right at 1279px and below |
.border-0-r-xl-up |
removes border from the right at 1280px and above |
Colors #
| Selector | Usage |
|---|---|
.purple |
sets text color to #752F8A |
.purple-bg |
sets background-color to #752F8A |
.purple-border |
sets border-color to #752F8A |
.light-purple-1 |
sets text color to #F9F3FA |
.light-purple-1-bg |
sets background-color to #F9F3FA |
.light-purple-1-border |
sets border-color to #F9F3FA |
.light-purple-2 |
sets text color to #E1D0E3 |
.light-purple-2-bg |
sets background-color to #E1D0E3 |
.light-purple-2-border |
sets border-color to #E1D0E3 |
.dark-purple |
sets text color to #766176 |
.dark-purple-bg |
sets background-color to #766176 |
.dark-purple-border |
sets border-color to #766176 |
.teal |
sets text color to #00818A |
.teal-bg |
sets background-color to #00818A |
.teal-border |
sets border-color to #00818A |
.light-teal |
sets text color to #F7FCFC |
.light-teal-bg |
sets background-color to #F7FCFC |
.light-teal-border |
sets border-color to #F7FCFC |
.white |
sets text color to #FFFFFF |
.white-bg |
sets background-color to #FFFFFF |
.white-border |
sets border-color to #FFFFFF |
.light-gray-1 |
sets text color to #F8F8F8 |
.light-gray-1-bg |
sets background-color to #F8F8F8 |
.light-gray-1-border |
sets border-color to #F8F8F8 |
.light-gray-2 |
sets text color to #F6F6F6 |
.light-gray-2-bg |
sets background-color to #F6F6F6 |
.light-gray-2-border |
sets border-color to #F6F6F6 |
.light-gray-3 |
sets text color to #EBEBEB |
.light-gray-3-bg |
sets background-color to #EBEBEB |
.light-gray-3-border |
sets border-color to #EBEBEB |
.dark-gray-3 |
sets text color to #525252 |
.dark-gray-3-bg |
sets background-color to #525252 |
.dark-gray-3-border |
sets border-color to #525252 |
.dark-gray-2 |
sets text color to #4B4B4B |
.dark-gray-2-bg |
sets background-color to #4B4B4B |
.dark-gray-2-border |
sets border-color to #4B4B4B |
.dark-gray-1 |
sets text color to #2A2A2A |
.dark-gray-1-bg |
sets background-color to #2A2A2A |
.dark-gray-1-border |
sets border-color to #2A2A2A |
.black |
sets text color to #000000 |
.black-bg |
sets background-color to #000000 |
.black-border |
sets border-color to #000000 |
.gold |
sets text color to #9C8954 |
.gold-bg |
sets background-color to #9C8954 |
.gold-border |
sets border-color to #9C8954 |
.light-gold |
sets text color to #AD986E |
.light-gold-bg |
sets background-color to #AD986E |
.light-gold-border |
sets border-color to #AD986E |
.transparent |
sets text color to transparent |
.transparent-bg |
sets background-color to transparent |
.transparent-border |
sets border-color to transparent |
Responsive Colors - Small (480PX)
| Selector | Usage |
|---|---|
.purple-sm |
sets text color to #752F8A between 480px and 767px |
.purple-sm-down |
sets text color to #752F8A at 479px and below |
.purple-sm-up |
sets text color to #752F8A at 480px and above |
.purple-bg-sm |
sets background-color to #752F8A between 480px and 767px |
.purple-bg-sm-down |
sets background-color to #752F8A at 479px and below |
.purple-bg-sm-up |
sets background-color to #752F8A at 480px and above |
.purple-border-sm |
sets border-color to #752F8A between 480px and 767px |
.purple-border-sm-down |
sets border-color to #752F8A at 479px and below |
.purple-border-sm-up |
sets border-color to #752F8A at 480px and above |
.light-purple-1-sm |
sets text color to #F9F3FA between 480px and 767px |
.light-purple-1-sm-down |
sets text color to #F9F3FA at 479px and below |
.light-purple-1-sm-up |
sets text color to #F9F3FA at 480px and above |
.light-purple-1-bg-sm |
sets background-color to #F9F3FA between 480px and 767px |
.light-purple-1-bg-sm-down |
sets background-color to #F9F3FA at 479px and below |
.light-purple-1-bg-sm-up |
sets background-color to #F9F3FA at 480px and above |
.light-purple-1-border-sm |
sets border-color to #F9F3FA between 480px and 767px |
.light-purple-1-border-sm-down |
sets border-color to #F9F3FA at 479px and below |
.light-purple-1-border-sm-up |
sets border-color to #F9F3FA at 480px and above |
.light-purple-2-sm |
sets text color to #E1D0E3 between 480px and 767px |
.light-purple-2-sm-down |
sets text color to #E1D0E3 at 479px and below |
.light-purple-2-sm-up |
sets text color to #E1D0E3 at 480px and above |
.light-purple-2-bg-sm |
sets background-color to #E1D0E3 between 480px and 767px |
.light-purple-2-bg-sm-down |
sets background-color to #E1D0E3 at 479px and below |
.light-purple-2-bg-sm-up |
sets background-color to #E1D0E3 at 480px and above |
.light-purple-2-border-sm |
sets border-color to #E1D0E3 between 480px and 767px |
.light-purple-2-border-sm-down |
sets border-color to #E1D0E3 at 479px and below |
.light-purple-2-border-sm-up |
sets border-color to #E1D0E3 at 480px and above |
.dark-purple-sm |
sets text color to #766176 between 480px and 767px |
.dark-purple-sm-down |
sets text color to #766176 at 479px and below |
.dark-purple-sm-up |
sets text color to #766176 at 480px and above |
.dark-purple-bg-sm |
sets background-color to #766176 between 480px and 767px |
.dark-purple-bg-sm-down |
sets background-color to #766176 at 479px and below |
.dark-purple-bg-sm-up |
sets background-color to #766176 at 480px and above |
.dark-purple-border-sm |
sets border-color to #766176 between 480px and 767px |
.dark-purple-border-sm-down |
sets border-color to #766176 at 479px and below |
.dark-purple-border-sm-up |
sets border-color to #766176 at 480px and above |
.teal-sm |
sets text color to #00818A between 480px and 767px |
.teal-sm-down |
sets text color to #00818A at 479px and below |
.teal-sm-up |
sets text color to #00818A at 480px and above |
.teal-bg-sm |
sets background-color to #00818A between 480px and 767px |
.teal-bg-sm-down |
sets background-color to #00818A at 479px and below |
.teal-bg-sm-up |
sets background-color to #00818A at 480px and above |
.teal-border-sm |
sets border-color to #00818A between 480px and 767px |
.teal-border-sm-down |
sets border-color to #00818A at 479px and below |
.teal-border-sm-up |
sets border-color to #00818A at 480px and above |
.light-teal-sm |
sets text color to #F7FCFC between 480px and 767px |
.light-teal-sm-down |
sets text color to #F7FCFC at 479px and below |
.light-teal-sm-up |
sets text color to #F7FCFC at 480px and above |
.light-teal-bg-sm |
sets background-color to #F7FCFC between 480px and 767px |
.light-teal-bg-sm-down |
sets background-color to #F7FCFC at 479px and below |
.light-teal-bg-sm-up |
sets background-color to #F7FCFC at 480px and above |
.light-teal-border-sm |
sets border-color to #F7FCFC between 480px and 767px |
.light-teal-border-sm-down |
sets border-color to #F7FCFC at 479px and below |
.light-teal-border-sm-up |
sets border-color to #F7FCFC at 480px and above |
.white-sm |
sets text color to #FFFFFF between 480px and 767px |
.white-sm-down |
sets text color to #FFFFFF at 479px and below |
.white-sm-up |
sets text color to #FFFFFF at 480px and above |
.white-bg-sm |
sets background-color to #FFFFFF between 480px and 767px |
.white-bg-sm-down |
sets background-color to #FFFFFF at 479px and below |
.white-bg-sm-up |
sets background-color to #FFFFFF at 480px and above |
.white-border-sm |
sets border-color to #FFFFFF between 480px and 767px |
.white-border-sm-down |
sets border-color to #FFFFFF at 479px and below |
.white-border-sm-up |
sets border-color to #FFFFFF at 480px and above |
.light-gray-1-sm |
sets text color to #F8F8F8 between 480px and 767px |
.light-gray-1-sm-down |
sets text color to #F8F8F8 at 479px and below |
.light-gray-1-sm-up |
sets text color to #F8F8F8 at 480px and above |
.light-gray-1-bg-sm |
sets background-color to #F8F8F8 between 480px and 767px |
.light-gray-1-bg-sm-down |
sets background-color to #F8F8F8 at 479px and below |
.light-gray-1-bg-sm-up |
sets background-color to #F8F8F8 at 480px and above |
.light-gray-1-border-sm |
sets border-color to #F8F8F8 between 480px and 767px |
.light-gray-1-border-sm-down |
sets border-color to #F8F8F8 at 479px and below |
.light-gray-1-border-sm-up |
sets border-color to #F8F8F8 at 480px and above |
.light-gray-2-sm |
sets text color to #F6F6F6 between 480px and 767px |
.light-gray-2-sm-down |
sets text color to #F6F6F6 at 479px and below |
.light-gray-2-sm-up |
sets text color to #F6F6F6 at 480px and above |
.light-gray-2-bg-sm |
sets background-color to #F6F6F6 between 480px and 767px |
.light-gray-2-bg-sm-down |
sets background-color to #F6F6F6 at 479px and below |
.light-gray-2-bg-sm-up |
sets background-color to #F6F6F6 at 480px and above |
.light-gray-2-border-sm |
sets border-color to #F6F6F6 between 480px and 767px |
.light-gray-2-border-sm-down |
sets border-color to #F6F6F6 at 479px and below |
.light-gray-2-border-sm-up |
sets border-color to #F6F6F6 at 480px and above |
.light-gray-3-sm |
sets text color to #EBEBEB between 480px and 767px |
.light-gray-3-sm-down |
sets text color to #EBEBEB at 479px and below |
.light-gray-3-sm-up |
sets text color to #EBEBEB at 480px and above |
.light-gray-3-bg-sm |
sets background-color to #EBEBEB between 480px and 767px |
.light-gray-3-bg-sm-down |
sets background-color to #EBEBEB at 479px and below |
.light-gray-3-bg-sm-up |
sets background-color to #EBEBEB at 480px and above |
.light-gray-3-border-sm |
sets border-color to #EBEBEB between 480px and 767px |
.light-gray-3-border-sm-down |
sets border-color to #EBEBEB at 479px and below |
.light-gray-3-border-sm-up |
sets border-color to #EBEBEB at 480px and above |
.dark-gray-3-sm |
sets text color to #525252 between 480px and 767px |
.dark-gray-3-sm-down |
sets text color to #525252 at 479px and below |
.dark-gray-3-sm-up |
sets text color to #525252 at 480px and above |
.dark-gray-3-bg-sm |
sets background-color to #525252 between 480px and 767px |
.dark-gray-3-bg-sm-down |
sets background-color to #525252 at 479px and below |
.dark-gray-3-bg-sm-up |
sets background-color to #525252 at 480px and above |
.dark-gray-3-border-sm |
sets border-color to #525252 between 480px and 767px |
.dark-gray-3-border-sm-down |
sets border-color to #525252 at 479px and below |
.dark-gray-3-border-sm-up |
sets border-color to #525252 at 480px and above |
.dark-gray-2-sm |
sets text color to #4B4B4B between 480px and 767px |
.dark-gray-2-sm-down |
sets text color to #4B4B4B at 479px and below |
.dark-gray-2-sm-up |
sets text color to #4B4B4B at 480px and above |
.dark-gray-2-bg-sm |
sets background-color to #4B4B4B between 480px and 767px |
.dark-gray-2-bg-sm-down |
sets background-color to #4B4B4B at 479px and below |
.dark-gray-2-bg-sm-up |
sets background-color to #4B4B4B at 480px and above |
.dark-gray-2-border-sm |
sets border-color to #4B4B4B between 480px and 767px |
.dark-gray-2-border-sm-down |
sets border-color to #4B4B4B at 479px and below |
.dark-gray-2-border-sm-up |
sets border-color to #4B4B4B at 480px and above |
.dark-gray-1-sm |
sets text color to #2A2A2A between 480px and 767px |
.dark-gray-1-sm-down |
sets text color to #2A2A2A at 479px and below |
.dark-gray-1-sm-up |
sets text color to #2A2A2A at 480px and above |
.dark-gray-1-bg-sm |
sets background-color to #2A2A2A between 480px and 767px |
.dark-gray-1-bg-sm-down |
sets background-color to #2A2A2A at 479px and below |
.dark-gray-1-bg-sm-up |
sets background-color to #2A2A2A at 480px and above |
.dark-gray-1-border-sm |
sets border-color to #2A2A2A between 480px and 767px |
.dark-gray-1-border-sm-down |
sets border-color to #2A2A2A at 479px and below |
.dark-gray-1-border-sm-up |
sets border-color to #2A2A2A at 480px and above |
.black-sm |
sets text color to #000000 between 480px and 767px |
.black-sm-down |
sets text color to #000000 at 479px and below |
.black-sm-up |
sets text color to #000000 at 480px and above |
.black-bg-sm |
sets background-color to #000000 between 480px and 767px |
.black-bg-sm-down |
sets background-color to #000000 at 479px and below |
.black-bg-sm-up |
sets background-color to #000000 at 480px and above |
.black-border-sm |
sets border-color to #000000 between 480px and 767px |
.black-border-sm-down |
sets border-color to #000000 at 479px and below |
.black-border-sm-up |
sets border-color to #000000 at 480px and above |
.gold-sm |
sets text color to #9C8954 between 480px and 767px |
.gold-sm-down |
sets text color to #9C8954 at 479px and below |
.gold-sm-up |
sets text color to #9C8954 at 480px and above |
.gold-bg-sm |
sets background-color to #9C8954 between 480px and 767px |
.gold-bg-sm-down |
sets background-color to #9C8954 at 479px and below |
.gold-bg-sm-up |
sets background-color to #9C8954 at 480px and above |
.gold-border-sm |
sets border-color to #9C8954 between 480px and 767px |
.gold-border-sm-down |
sets border-color to #9C8954 at 479px and below |
.gold-border-sm-up |
sets border-color to #9C8954 at 480px and above |
.light-gold-sm |
sets text color to #AD986E between 480px and 767px |
.light-gold-sm-down |
sets text color to #AD986E at 479px and below |
.light-gold-sm-up |
sets text color to #AD986E at 480px and above |
.light-gold-bg-sm |
sets background-color to #AD986E between 480px and 767px |
.light-gold-bg-sm-down |
sets background-color to #AD986E at 479px and below |
.light-gold-bg-sm-up |
sets background-color to #AD986E at 480px and above |
.light-gold-border-sm |
sets border-color to #AD986E between 480px and 767px |
.light-gold-border-sm-down |
sets border-color to #AD986E at 479px and below |
.light-gold-border-sm-up |
sets border-color to #AD986E at 480px and above |
.transparent-sm |
sets text color to transparent between 480px and 767px |
.transparent-sm-down |
sets text color to transparent at 479px and below |
.transparent-sm-up |
sets text color to transparent at 480px and above |
.transparent-bg-sm |
sets background-color to transparent between 480px and 767px |
.transparent-bg-sm-down |
sets background-color to transparent at 479px and below |
.transparent-bg-sm-up |
sets background-color to transparent at 480px and above |
.transparent-border-sm |
sets border-color to transparent between 480px and 767px |
.transparent-border-sm-down |
sets border-color to transparent at 479px and below |
.transparent-border-sm-up |
sets border-color to transparent at 480px and above |
Responsive Colors - Medium (768PX)
| Selector | Usage |
|---|---|
.purple-md |
sets text color to #752F8A between 768px and 1023px |
.purple-md-down |
sets text color to #752F8A at 767px and below |
.purple-md-up |
sets text color to #752F8A at 768px and above |
.purple-bg-md |
sets background-color to #752F8A between 768px and 1023px |
.purple-bg-md-down |
sets background-color to #752F8A at 767px and below |
.purple-bg-md-up |
sets background-color to #752F8A at 768px and above |
.purple-border-md |
sets border-color to #752F8A between 768px and 1023px |
.purple-border-md-down |
sets border-color to #752F8A at 767px and below |
.purple-border-md-up |
sets border-color to #752F8A at 768px and above |
.light-purple-1-md |
sets text color to #F9F3FA between 768px and 1023px |
.light-purple-1-md-down |
sets text color to #F9F3FA at 767px and below |
.light-purple-1-md-up |
sets text color to #F9F3FA at 768px and above |
.light-purple-1-bg-md |
sets background-color to #F9F3FA between 768px and 1023px |
.light-purple-1-bg-md-down |
sets background-color to #F9F3FA at 767px and below |
.light-purple-1-bg-md-up |
sets background-color to #F9F3FA at 768px and above |
.light-purple-1-border-md |
sets border-color to #F9F3FA between 768px and 1023px |
.light-purple-1-border-md-down |
sets border-color to #F9F3FA at 767px and below |
.light-purple-1-border-md-up |
sets border-color to #F9F3FA at 768px and above |
.light-purple-2-md |
sets text color to #E1D0E3 between 768px and 1023px |
.light-purple-2-md-down |
sets text color to #E1D0E3 at 767px and below |
.light-purple-2-md-up |
sets text color to #E1D0E3 at 768px and above |
.light-purple-2-bg-md |
sets background-color to #E1D0E3 between 768px and 1023px |
.light-purple-2-bg-md-down |
sets background-color to #E1D0E3 at 767px and below |
.light-purple-2-bg-md-up |
sets background-color to #E1D0E3 at 768px and above |
.light-purple-2-border-md |
sets border-color to #E1D0E3 between 768px and 1023px |
.light-purple-2-border-md-down |
sets border-color to #E1D0E3 at 767px and below |
.light-purple-2-border-md-up |
sets border-color to #E1D0E3 at 768px and above |
.dark-purple-md |
sets text color to #766176 between 768px and 1023px |
.dark-purple-md-down |
sets text color to #766176 at 767px and below |
.dark-purple-md-up |
sets text color to #766176 at 768px and above |
.dark-purple-bg-md |
sets background-color to #766176 between 768px and 1023px |
.dark-purple-bg-md-down |
sets background-color to #766176 at 767px and below |
.dark-purple-bg-md-up |
sets background-color to #766176 at 768px and above |
.dark-purple-border-md |
sets border-color to #766176 between 768px and 1023px |
.dark-purple-border-md-down |
sets border-color to #766176 at 767px and below |
.dark-purple-border-md-up |
sets border-color to #766176 at 768px and above |
.teal-md |
sets text color to #00818A between 768px and 1023px |
.teal-md-down |
sets text color to #00818A at 767px and below |
.teal-md-up |
sets text color to #00818A at 768px and above |
.teal-bg-md |
sets background-color to #00818A between 768px and 1023px |
.teal-bg-md-down |
sets background-color to #00818A at 767px and below |
.teal-bg-md-up |
sets background-color to #00818A at 768px and above |
.teal-border-md |
sets border-color to #00818A between 768px and 1023px |
.teal-border-md-down |
sets border-color to #00818A at 767px and below |
.teal-border-md-up |
sets border-color to #00818A at 768px and above |
.light-teal-md |
sets text color to #F7FCFC between 768px and 1023px |
.light-teal-md-down |
sets text color to #F7FCFC at 767px and below |
.light-teal-md-up |
sets text color to #F7FCFC at 768px and above |
.light-teal-bg-md |
sets background-color to #F7FCFC between 768px and 1023px |
.light-teal-bg-md-down |
sets background-color to #F7FCFC at 767px and below |
.light-teal-bg-md-up |
sets background-color to #F7FCFC at 768px and above |
.light-teal-border-md |
sets border-color to #F7FCFC between 768px and 1023px |
.light-teal-border-md-down |
sets border-color to #F7FCFC at 767px and below |
.light-teal-border-md-up |
sets border-color to #F7FCFC at 768px and above |
.white-md |
sets text color to #FFFFFF between 768px and 1023px |
.white-md-down |
sets text color to #FFFFFF at 767px and below |
.white-md-up |
sets text color to #FFFFFF at 768px and above |
.white-bg-md |
sets background-color to #FFFFFF between 768px and 1023px |
.white-bg-md-down |
sets background-color to #FFFFFF at 767px and below |
.white-bg-md-up |
sets background-color to #FFFFFF at 768px and above |
.white-border-md |
sets border-color to #FFFFFF between 768px and 1023px |
.white-border-md-down |
sets border-color to #FFFFFF at 767px and below |
.white-border-md-up |
sets border-color to #FFFFFF at 768px and above |
.light-gray-1-md |
sets text color to #F8F8F8 between 768px and 1023px |
.light-gray-1-md-down |
sets text color to #F8F8F8 at 767px and below |
.light-gray-1-md-up |
sets text color to #F8F8F8 at 768px and above |
.light-gray-1-bg-md |
sets background-color to #F8F8F8 between 768px and 1023px |
.light-gray-1-bg-md-down |
sets background-color to #F8F8F8 at 767px and below |
.light-gray-1-bg-md-up |
sets background-color to #F8F8F8 at 768px and above |
.light-gray-1-border-md |
sets border-color to #F8F8F8 between 768px and 1023px |
.light-gray-1-border-md-down |
sets border-color to #F8F8F8 at 767px and below |
.light-gray-1-border-md-up |
sets border-color to #F8F8F8 at 768px and above |
.light-gray-2-md |
sets text color to #F6F6F6 between 768px and 1023px |
.light-gray-2-md-down |
sets text color to #F6F6F6 at 767px and below |
.light-gray-2-md-up |
sets text color to #F6F6F6 at 768px and above |
.light-gray-2-bg-md |
sets background-color to #F6F6F6 between 768px and 1023px |
.light-gray-2-bg-md-down |
sets background-color to #F6F6F6 at 767px and below |
.light-gray-2-bg-md-up |
sets background-color to #F6F6F6 at 768px and above |
.light-gray-2-border-md |
sets border-color to #F6F6F6 between 768px and 1023px |
.light-gray-2-border-md-down |
sets border-color to #F6F6F6 at 767px and below |
.light-gray-2-border-md-up |
sets border-color to #F6F6F6 at 768px and above |
.light-gray-3-md |
sets text color to #EBEBEB between 768px and 1023px |
.light-gray-3-md-down |
sets text color to #EBEBEB at 767px and below |
.light-gray-3-md-up |
sets text color to #EBEBEB at 768px and above |
.light-gray-3-bg-md |
sets background-color to #EBEBEB between 768px and 1023px |
.light-gray-3-bg-md-down |
sets background-color to #EBEBEB at 767px and below |
.light-gray-3-bg-md-up |
sets background-color to #EBEBEB at 768px and above |
.light-gray-3-border-md |
sets border-color to #EBEBEB between 768px and 1023px |
.light-gray-3-border-md-down |
sets border-color to #EBEBEB at 767px and below |
.light-gray-3-border-md-up |
sets border-color to #EBEBEB at 768px and above |
.dark-gray-3-md |
sets text color to #525252 between 768px and 1023px |
.dark-gray-3-md-down |
sets text color to #525252 at 767px and below |
.dark-gray-3-md-up |
sets text color to #525252 at 768px and above |
.dark-gray-3-bg-md |
sets background-color to #525252 between 768px and 1023px |
.dark-gray-3-bg-md-down |
sets background-color to #525252 at 767px and below |
.dark-gray-3-bg-md-up |
sets background-color to #525252 at 768px and above |
.dark-gray-3-border-md |
sets border-color to #525252 between 768px and 1023px |
.dark-gray-3-border-md-down |
sets border-color to #525252 at 767px and below |
.dark-gray-3-border-md-up |
sets border-color to #525252 at 768px and above |
.dark-gray-2-md |
sets text color to #4B4B4B between 768px and 1023px |
.dark-gray-2-md-down |
sets text color to #4B4B4B at 767px and below |
.dark-gray-2-md-up |
sets text color to #4B4B4B at 768px and above |
.dark-gray-2-bg-md |
sets background-color to #4B4B4B between 768px and 1023px |
.dark-gray-2-bg-md-down |
sets background-color to #4B4B4B at 767px and below |
.dark-gray-2-bg-md-up |
sets background-color to #4B4B4B at 768px and above |
.dark-gray-2-border-md |
sets border-color to #4B4B4B between 768px and 1023px |
.dark-gray-2-border-md-down |
sets border-color to #4B4B4B at 767px and below |
.dark-gray-2-border-md-up |
sets border-color to #4B4B4B at 768px and above |
.dark-gray-1-md |
sets text color to #2A2A2A between 768px and 1023px |
.dark-gray-1-md-down |
sets text color to #2A2A2A at 767px and below |
.dark-gray-1-md-up |
sets text color to #2A2A2A at 768px and above |
.dark-gray-1-bg-md |
sets background-color to #2A2A2A between 768px and 1023px |
.dark-gray-1-bg-md-down |
sets background-color to #2A2A2A at 767px and below |
.dark-gray-1-bg-md-up |
sets background-color to #2A2A2A at 768px and above |
.dark-gray-1-border-md |
sets border-color to #2A2A2A between 768px and 1023px |
.dark-gray-1-border-md-down |
sets border-color to #2A2A2A at 767px and below |
.dark-gray-1-border-md-up |
sets border-color to #2A2A2A at 768px and above |
.black-md |
sets text color to #000000 between 768px and 1023px |
.black-md-down |
sets text color to #000000 at 767px and below |
.black-md-up |
sets text color to #000000 at 768px and above |
.black-bg-md |
sets background-color to #000000 between 768px and 1023px |
.black-bg-md-down |
sets background-color to #000000 at 767px and below |
.black-bg-md-up |
sets background-color to #000000 at 768px and above |
.black-border-md |
sets border-color to #000000 between 768px and 1023px |
.black-border-md-down |
sets border-color to #000000 at 767px and below |
.black-border-md-up |
sets border-color to #000000 at 768px and above |
.gold-md |
sets text color to #9C8954 between 768px and 1023px |
.gold-md-down |
sets text color to #9C8954 at 767px and below |
.gold-md-up |
sets text color to #9C8954 at 768px and above |
.gold-bg-md |
sets background-color to #9C8954 between 768px and 1023px |
.gold-bg-md-down |
sets background-color to #9C8954 at 767px and below |
.gold-bg-md-up |
sets background-color to #9C8954 at 768px and above |
.gold-border-md |
sets border-color to #9C8954 between 768px and 1023px |
.gold-border-md-down |
sets border-color to #9C8954 at 767px and below |
.gold-border-md-up |
sets border-color to #9C8954 at 768px and above |
.light-gold-md |
sets text color to #AD986E between 768px and 1023px |
.light-gold-md-down |
sets text color to #AD986E at 767px and below |
.light-gold-md-up |
sets text color to #AD986E at 768px and above |
.light-gold-bg-md |
sets background-color to #AD986E between 768px and 1023px |
.light-gold-bg-md-down |
sets background-color to #AD986E at 767px and below |
.light-gold-bg-md-up |
sets background-color to #AD986E at 768px and above |
.light-gold-border-md |
sets border-color to #AD986E between 768px and 1023px |
.light-gold-border-md-down |
sets border-color to #AD986E at 767px and below |
.light-gold-border-md-up |
sets border-color to #AD986E at 768px and above |
.transparent-md |
sets text color to transparent between 768px and 1023px |
.transparent-md-down |
sets text color to transparent at 767px and below |
.transparent-md-up |
sets text color to transparent at 768px and above |
.transparent-bg-md |
sets background-color to transparent between 768px and 1023px |
.transparent-bg-md-down |
sets background-color to transparent at 767px and below |
.transparent-bg-md-up |
sets background-color to transparent at 768px and above |
.transparent-border-md |
sets border-color to transparent between 768px and 1023px |
.transparent-border-md-down |
sets border-color to transparent at 767px and below |
.transparent-border-md-up |
sets border-color to transparent at 768px and above |
Responsive Colors - Large (1024PX)
| Selector | Usage |
|---|---|
.purple-lg |
sets text color to #752F8A between 1024px and 1279px |
.purple-lg-down |
sets text color to #752F8A at 1023px and below |
.purple-lg-up |
sets text color to #752F8A at 1024px and above |
.purple-bg-lg |
sets background-color to #752F8A between 1024px and 1279px |
.purple-bg-lg-down |
sets background-color to #752F8A at 1023px and below |
.purple-bg-lg-up |
sets background-color to #752F8A at 1024px and above |
.purple-border-lg |
sets border-color to #752F8A between 1024px and 1279px |
.purple-border-lg-down |
sets border-color to #752F8A at 1023px and below |
.purple-border-lg-up |
sets border-color to #752F8A at 1024px and above |
.light-purple-1-lg |
sets text color to #F9F3FA between 1024px and 1279px |
.light-purple-1-lg-down |
sets text color to #F9F3FA at 1023px and below |
.light-purple-1-lg-up |
sets text color to #F9F3FA at 1024px and above |
.light-purple-1-bg-lg |
sets background-color to #F9F3FA between 1024px and 1279px |
.light-purple-1-bg-lg-down |
sets background-color to #F9F3FA at 1023px and below |
.light-purple-1-bg-lg-up |
sets background-color to #F9F3FA at 1024px and above |
.light-purple-1-border-lg |
sets border-color to #F9F3FA between 1024px and 1279px |
.light-purple-1-border-lg-down |
sets border-color to #F9F3FA at 1023px and below |
.light-purple-1-border-lg-up |
sets border-color to #F9F3FA at 1024px and above |
.light-purple-2-lg |
sets text color to #E1D0E3 between 1024px and 1279px |
.light-purple-2-lg-down |
sets text color to #E1D0E3 at 1023px and below |
.light-purple-2-lg-up |
sets text color to #E1D0E3 at 1024px and above |
.light-purple-2-bg-lg |
sets background-color to #E1D0E3 between 1024px and 1279px |
.light-purple-2-bg-lg-down |
sets background-color to #E1D0E3 at 1023px and below |
.light-purple-2-bg-lg-up |
sets background-color to #E1D0E3 at 1024px and above |
.light-purple-2-border-lg |
sets border-color to #E1D0E3 between 1024px and 1279px |
.light-purple-2-border-lg-down |
sets border-color to #E1D0E3 at 1023px and below |
.light-purple-2-border-lg-up |
sets border-color to #E1D0E3 at 1024px and above |
.dark-purple-lg |
sets text color to #766176 between 1024px and 1279px |
.dark-purple-lg-down |
sets text color to #766176 at 1023px and below |
.dark-purple-lg-up |
sets text color to #766176 at 1024px and above |
.dark-purple-bg-lg |
sets background-color to #766176 between 1024px and 1279px |
.dark-purple-bg-lg-down |
sets background-color to #766176 at 1023px and below |
.dark-purple-bg-lg-up |
sets background-color to #766176 at 1024px and above |
.dark-purple-border-lg |
sets border-color to #766176 between 1024px and 1279px |
.dark-purple-border-lg-down |
sets border-color to #766176 at 1023px and below |
.dark-purple-border-lg-up |
sets border-color to #766176 at 1024px and above |
.teal-lg |
sets text color to #00818A between 1024px and 1279px |
.teal-lg-down |
sets text color to #00818A at 1023px and below |
.teal-lg-up |
sets text color to #00818A at 1024px and above |
.teal-bg-lg |
sets background-color to #00818A between 1024px and 1279px |
.teal-bg-lg-down |
sets background-color to #00818A at 1023px and below |
.teal-bg-lg-up |
sets background-color to #00818A at 1024px and above |
.teal-border-lg |
sets border-color to #00818A between 1024px and 1279px |
.teal-border-lg-down |
sets border-color to #00818A at 1023px and below |
.teal-border-lg-up |
sets border-color to #00818A at 1024px and above |
.light-teal-lg |
sets text color to #F7FCFC between 1024px and 1279px |
.light-teal-lg-down |
sets text color to #F7FCFC at 1023px and below |
.light-teal-lg-up |
sets text color to #F7FCFC at 1024px and above |
.light-teal-bg-lg |
sets background-color to #F7FCFC between 1024px and 1279px |
.light-teal-bg-lg-down |
sets background-color to #F7FCFC at 1023px and below |
.light-teal-bg-lg-up |
sets background-color to #F7FCFC at 1024px and above |
.light-teal-border-lg |
sets border-color to #F7FCFC between 1024px and 1279px |
.light-teal-border-lg-down |
sets border-color to #F7FCFC at 1023px and below |
.light-teal-border-lg-up |
sets border-color to #F7FCFC at 1024px and above |
.white-lg |
sets text color to #FFFFFF between 1024px and 1279px |
.white-lg-down |
sets text color to #FFFFFF at 1023px and below |
.white-lg-up |
sets text color to #FFFFFF at 1024px and above |
.white-bg-lg |
sets background-color to #FFFFFF between 1024px and 1279px |
.white-bg-lg-down |
sets background-color to #FFFFFF at 1023px and below |
.white-bg-lg-up |
sets background-color to #FFFFFF at 1024px and above |
.white-border-lg |
sets border-color to #FFFFFF between 1024px and 1279px |
.white-border-lg-down |
sets border-color to #FFFFFF at 1023px and below |
.white-border-lg-up |
sets border-color to #FFFFFF at 1024px and above |
.light-gray-1-lg |
sets text color to #F8F8F8 between 1024px and 1279px |
.light-gray-1-lg-down |
sets text color to #F8F8F8 at 1023px and below |
.light-gray-1-lg-up |
sets text color to #F8F8F8 at 1024px and above |
.light-gray-1-bg-lg |
sets background-color to #F8F8F8 between 1024px and 1279px |
.light-gray-1-bg-lg-down |
sets background-color to #F8F8F8 at 1023px and below |
.light-gray-1-bg-lg-up |
sets background-color to #F8F8F8 at 1024px and above |
.light-gray-1-border-lg |
sets border-color to #F8F8F8 between 1024px and 1279px |
.light-gray-1-border-lg-down |
sets border-color to #F8F8F8 at 1023px and below |
.light-gray-1-border-lg-up |
sets border-color to #F8F8F8 at 1024px and above |
.light-gray-2-lg |
sets text color to #F6F6F6 between 1024px and 1279px |
.light-gray-2-lg-down |
sets text color to #F6F6F6 at 1023px and below |
.light-gray-2-lg-up |
sets text color to #F6F6F6 at 1024px and above |
.light-gray-2-bg-lg |
sets background-color to #F6F6F6 between 1024px and 1279px |
.light-gray-2-bg-lg-down |
sets background-color to #F6F6F6 at 1023px and below |
.light-gray-2-bg-lg-up |
sets background-color to #F6F6F6 at 1024px and above |
.light-gray-2-border-lg |
sets border-color to #F6F6F6 between 1024px and 1279px |
.light-gray-2-border-lg-down |
sets border-color to #F6F6F6 at 1023px and below |
.light-gray-2-border-lg-up |
sets border-color to #F6F6F6 at 1024px and above |
.light-gray-3-lg |
sets text color to #EBEBEB between 1024px and 1279px |
.light-gray-3-lg-down |
sets text color to #EBEBEB at 1023px and below |
.light-gray-3-lg-up |
sets text color to #EBEBEB at 1024px and above |
.light-gray-3-bg-lg |
sets background-color to #EBEBEB between 1024px and 1279px |
.light-gray-3-bg-lg-down |
sets background-color to #EBEBEB at 1023px and below |
.light-gray-3-bg-lg-up |
sets background-color to #EBEBEB at 1024px and above |
.light-gray-3-border-lg |
sets border-color to #EBEBEB between 1024px and 1279px |
.light-gray-3-border-lg-down |
sets border-color to #EBEBEB at 1023px and below |
.light-gray-3-border-lg-up |
sets border-color to #EBEBEB at 1024px and above |
.dark-gray-3-lg |
sets text color to #525252 between 1024px and 1279px |
.dark-gray-3-lg-down |
sets text color to #525252 at 1023px and below |
.dark-gray-3-lg-up |
sets text color to #525252 at 1024px and above |
.dark-gray-3-bg-lg |
sets background-color to #525252 between 1024px and 1279px |
.dark-gray-3-bg-lg-down |
sets background-color to #525252 at 1023px and below |
.dark-gray-3-bg-lg-up |
sets background-color to #525252 at 1024px and above |
.dark-gray-3-border-lg |
sets border-color to #525252 between 1024px and 1279px |
.dark-gray-3-border-lg-down |
sets border-color to #525252 at 1023px and below |
.dark-gray-3-border-lg-up |
sets border-color to #525252 at 1024px and above |
.dark-gray-2-lg |
sets text color to #4B4B4B between 1024px and 1279px |
.dark-gray-2-lg-down |
sets text color to #4B4B4B at 1023px and below |
.dark-gray-2-lg-up |
sets text color to #4B4B4B at 1024px and above |
.dark-gray-2-bg-lg |
sets background-color to #4B4B4B between 1024px and 1279px |
.dark-gray-2-bg-lg-down |
sets background-color to #4B4B4B at 1023px and below |
.dark-gray-2-bg-lg-up |
sets background-color to #4B4B4B at 1024px and above |
.dark-gray-2-border-lg |
sets border-color to #4B4B4B between 1024px and 1279px |
.dark-gray-2-border-lg-down |
sets border-color to #4B4B4B at 1023px and below |
.dark-gray-2-border-lg-up |
sets border-color to #4B4B4B at 1024px and above |
.dark-gray-1-lg |
sets text color to #2A2A2A between 1024px and 1279px |
.dark-gray-1-lg-down |
sets text color to #2A2A2A at 1023px and below |
.dark-gray-1-lg-up |
sets text color to #2A2A2A at 1024px and above |
.dark-gray-1-bg-lg |
sets background-color to #2A2A2A between 1024px and 1279px |
.dark-gray-1-bg-lg-down |
sets background-color to #2A2A2A at 1023px and below |
.dark-gray-1-bg-lg-up |
sets background-color to #2A2A2A at 1024px and above |
.dark-gray-1-border-lg |
sets border-color to #2A2A2A between 1024px and 1279px |
.dark-gray-1-border-lg-down |
sets border-color to #2A2A2A at 1023px and below |
.dark-gray-1-border-lg-up |
sets border-color to #2A2A2A at 1024px and above |
.black-lg |
sets text color to #000000 between 1024px and 1279px |
.black-lg-down |
sets text color to #000000 at 1023px and below |
.black-lg-up |
sets text color to #000000 at 1024px and above |
.black-bg-lg |
sets background-color to #000000 between 1024px and 1279px |
.black-bg-lg-down |
sets background-color to #000000 at 1023px and below |
.black-bg-lg-up |
sets background-color to #000000 at 1024px and above |
.black-border-lg |
sets border-color to #000000 between 1024px and 1279px |
.black-border-lg-down |
sets border-color to #000000 at 1023px and below |
.black-border-lg-up |
sets border-color to #000000 at 1024px and above |
.gold-lg |
sets text color to #9C8954 between 1024px and 1279px |
.gold-lg-down |
sets text color to #9C8954 at 1023px and below |
.gold-lg-up |
sets text color to #9C8954 at 1024px and above |
.gold-bg-lg |
sets background-color to #9C8954 between 1024px and 1279px |
.gold-bg-lg-down |
sets background-color to #9C8954 at 1023px and below |
.gold-bg-lg-up |
sets background-color to #9C8954 at 1024px and above |
.gold-border-lg |
sets border-color to #9C8954 between 1024px and 1279px |
.gold-border-lg-down |
sets border-color to #9C8954 at 1023px and below |
.gold-border-lg-up |
sets border-color to #9C8954 at 1024px and above |
.light-gold-lg |
sets text color to #AD986E between 1024px and 1279px |
.light-gold-lg-down |
sets text color to #AD986E at 1023px and below |
.light-gold-lg-up |
sets text color to #AD986E at 1024px and above |
.light-gold-bg-lg |
sets background-color to #AD986E between 1024px and 1279px |
.light-gold-bg-lg-down |
sets background-color to #AD986E at 1023px and below |
.light-gold-bg-lg-up |
sets background-color to #AD986E at 1024px and above |
.light-gold-border-lg |
sets border-color to #AD986E between 1024px and 1279px |
.light-gold-border-lg-down |
sets border-color to #AD986E at 1023px and below |
.light-gold-border-lg-up |
sets border-color to #AD986E at 1024px and above |
.transparent-lg |
sets text color to transparent between 1024px and 1279px |
.transparent-lg-down |
sets text color to transparent at 1023px and below |
.transparent-lg-up |
sets text color to transparent at 1024px and above |
.transparent-bg-lg |
sets background-color to transparent between 1024px and 1279px |
.transparent-bg-lg-down |
sets background-color to transparent at 1023px and below |
.transparent-bg-lg-up |
sets background-color to transparent at 1024px and above |
.transparent-border-lg |
sets border-color to transparent between 1024px and 1279px |
.transparent-border-lg-down |
sets border-color to transparent at 1023px and below |
.transparent-border-lg-up |
sets border-color to transparent at 1024px and above |
Responsive Colors - Extra Large (1280PX)
| Selector | Usage |
|---|---|
.purple-xl |
sets text color to #752F8A between 1280px and 1599px |
.purple-xl-down |
sets text color to #752F8A at 1279px and below |
.purple-xl-up |
sets text color to #752F8A at 1280px and above |
.purple-bg-xl |
sets background-color to #752F8A between 1280px and 1599px |
.purple-bg-xl-down |
sets background-color to #752F8A at 1279px and below |
.purple-bg-xl-up |
sets background-color to #752F8A at 1280px and above |
.purple-border-xl |
sets border-color to #752F8A between 1280px and 1599px |
.purple-border-xl-down |
sets border-color to #752F8A at 1279px and below |
.purple-border-xl-up |
sets border-color to #752F8A at 1280px and above |
.light-purple-1-xl |
sets text color to #F9F3FA between 1280px and 1599px |
.light-purple-1-xl-down |
sets text color to #F9F3FA at 1279px and below |
.light-purple-1-xl-up |
sets text color to #F9F3FA at 1280px and above |
.light-purple-1-bg-xl |
sets background-color to #F9F3FA between 1280px and 1599px |
.light-purple-1-bg-xl-down |
sets background-color to #F9F3FA at 1279px and below |
.light-purple-1-bg-xl-up |
sets background-color to #F9F3FA at 1280px and above |
.light-purple-1-border-xl |
sets border-color to #F9F3FA between 1280px and 1599px |
.light-purple-1-border-xl-down |
sets border-color to #F9F3FA at 1279px and below |
.light-purple-1-border-xl-up |
sets border-color to #F9F3FA at 1280px and above |
.light-purple-2-xl |
sets text color to #E1D0E3 between 1280px and 1599px |
.light-purple-2-xl-down |
sets text color to #E1D0E3 at 1279px and below |
.light-purple-2-xl-up |
sets text color to #E1D0E3 at 1280px and above |
.light-purple-2-bg-xl |
sets background-color to #E1D0E3 between 1280px and 1599px |
.light-purple-2-bg-xl-down |
sets background-color to #E1D0E3 at 1279px and below |
.light-purple-2-bg-xl-up |
sets background-color to #E1D0E3 at 1280px and above |
.light-purple-2-border-xl |
sets border-color to #E1D0E3 between 1280px and 1599px |
.light-purple-2-border-xl-down |
sets border-color to #E1D0E3 at 1279px and below |
.light-purple-2-border-xl-up |
sets border-color to #E1D0E3 at 1280px and above |
.dark-purple-xl |
sets text color to #766176 between 1280px and 1599px |
.dark-purple-xl-down |
sets text color to #766176 at 1279px and below |
.dark-purple-xl-up |
sets text color to #766176 at 1280px and above |
.dark-purple-bg-xl |
sets background-color to #766176 between 1280px and 1599px |
.dark-purple-bg-xl-down |
sets background-color to #766176 at 1279px and below |
.dark-purple-bg-xl-up |
sets background-color to #766176 at 1280px and above |
.dark-purple-border-xl |
sets border-color to #766176 between 1280px and 1599px |
.dark-purple-border-xl-down |
sets border-color to #766176 at 1279px and below |
.dark-purple-border-xl-up |
sets border-color to #766176 at 1280px and above |
.teal-xl |
sets text color to #00818A between 1280px and 1599px |
.teal-xl-down |
sets text color to #00818A at 1279px and below |
.teal-xl-up |
sets text color to #00818A at 1280px and above |
.teal-bg-xl |
sets background-color to #00818A between 1280px and 1599px |
.teal-bg-xl-down |
sets background-color to #00818A at 1279px and below |
.teal-bg-xl-up |
sets background-color to #00818A at 1280px and above |
.teal-border-xl |
sets border-color to #00818A between 1280px and 1599px |
.teal-border-xl-down |
sets border-color to #00818A at 1279px and below |
.teal-border-xl-up |
sets border-color to #00818A at 1280px and above |
.light-teal-xl |
sets text color to #F7FCFC between 1280px and 1599px |
.light-teal-xl-down |
sets text color to #F7FCFC at 1279px and below |
.light-teal-xl-up |
sets text color to #F7FCFC at 1280px and above |
.light-teal-bg-xl |
sets background-color to #F7FCFC between 1280px and 1599px |
.light-teal-bg-xl-down |
sets background-color to #F7FCFC at 1279px and below |
.light-teal-bg-xl-up |
sets background-color to #F7FCFC at 1280px and above |
.light-teal-border-xl |
sets border-color to #F7FCFC between 1280px and 1599px |
.light-teal-border-xl-down |
sets border-color to #F7FCFC at 1279px and below |
.light-teal-border-xl-up |
sets border-color to #F7FCFC at 1280px and above |
.white-xl |
sets text color to #FFFFFF between 1280px and 1599px |
.white-xl-down |
sets text color to #FFFFFF at 1279px and below |
.white-xl-up |
sets text color to #FFFFFF at 1280px and above |
.white-bg-xl |
sets background-color to #FFFFFF between 1280px and 1599px |
.white-bg-xl-down |
sets background-color to #FFFFFF at 1279px and below |
.white-bg-xl-up |
sets background-color to #FFFFFF at 1280px and above |
.white-border-xl |
sets border-color to #FFFFFF between 1280px and 1599px |
.white-border-xl-down |
sets border-color to #FFFFFF at 1279px and below |
.white-border-xl-up |
sets border-color to #FFFFFF at 1280px and above |
.light-gray-1-xl |
sets text color to #F8F8F8 between 1280px and 1599px |
.light-gray-1-xl-down |
sets text color to #F8F8F8 at 1279px and below |
.light-gray-1-xl-up |
sets text color to #F8F8F8 at 1280px and above |
.light-gray-1-bg-xl |
sets background-color to #F8F8F8 between 1280px and 1599px |
.light-gray-1-bg-xl-down |
sets background-color to #F8F8F8 at 1279px and below |
.light-gray-1-bg-xl-up |
sets background-color to #F8F8F8 at 1280px and above |
.light-gray-1-border-xl |
sets border-color to #F8F8F8 between 1280px and 1599px |
.light-gray-1-border-xl-down |
sets border-color to #F8F8F8 at 1279px and below |
.light-gray-1-border-xl-up |
sets border-color to #F8F8F8 at 1280px and above |
.light-gray-2-xl |
sets text color to #F6F6F6 between 1280px and 1599px |
.light-gray-2-xl-down |
sets text color to #F6F6F6 at 1279px and below |
.light-gray-2-xl-up |
sets text color to #F6F6F6 at 1280px and above |
.light-gray-2-bg-xl |
sets background-color to #F6F6F6 between 1280px and 1599px |
.light-gray-2-bg-xl-down |
sets background-color to #F6F6F6 at 1279px and below |
.light-gray-2-bg-xl-up |
sets background-color to #F6F6F6 at 1280px and above |
.light-gray-2-border-xl |
sets border-color to #F6F6F6 between 1280px and 1599px |
.light-gray-2-border-xl-down |
sets border-color to #F6F6F6 at 1279px and below |
.light-gray-2-border-xl-up |
sets border-color to #F6F6F6 at 1280px and above |
.light-gray-3-xl |
sets text color to #EBEBEB between 1280px and 1599px |
.light-gray-3-xl-down |
sets text color to #EBEBEB at 1279px and below |
.light-gray-3-xl-up |
sets text color to #EBEBEB at 1280px and above |
.light-gray-3-bg-xl |
sets background-color to #EBEBEB between 1280px and 1599px |
.light-gray-3-bg-xl-down |
sets background-color to #EBEBEB at 1279px and below |
.light-gray-3-bg-xl-up |
sets background-color to #EBEBEB at 1280px and above |
.light-gray-3-border-xl |
sets border-color to #EBEBEB between 1280px and 1599px |
.light-gray-3-border-xl-down |
sets border-color to #EBEBEB at 1279px and below |
.light-gray-3-border-xl-up |
sets border-color to #EBEBEB at 1280px and above |
.dark-gray-3-xl |
sets text color to #525252 between 1280px and 1599px |
.dark-gray-3-xl-down |
sets text color to #525252 at 1279px and below |
.dark-gray-3-xl-up |
sets text color to #525252 at 1280px and above |
.dark-gray-3-bg-xl |
sets background-color to #525252 between 1280px and 1599px |
.dark-gray-3-bg-xl-down |
sets background-color to #525252 at 1279px and below |
.dark-gray-3-bg-xl-up |
sets background-color to #525252 at 1280px and above |
.dark-gray-3-border-xl |
sets border-color to #525252 between 1280px and 1599px |
.dark-gray-3-border-xl-down |
sets border-color to #525252 at 1279px and below |
.dark-gray-3-border-xl-up |
sets border-color to #525252 at 1280px and above |
.dark-gray-2-xl |
sets text color to #4B4B4B between 1280px and 1599px |
.dark-gray-2-xl-down |
sets text color to #4B4B4B at 1279px and below |
.dark-gray-2-xl-up |
sets text color to #4B4B4B at 1280px and above |
.dark-gray-2-bg-xl |
sets background-color to #4B4B4B between 1280px and 1599px |
.dark-gray-2-bg-xl-down |
sets background-color to #4B4B4B at 1279px and below |
.dark-gray-2-bg-xl-up |
sets background-color to #4B4B4B at 1280px and above |
.dark-gray-2-border-xl |
sets border-color to #4B4B4B between 1280px and 1599px |
.dark-gray-2-border-xl-down |
sets border-color to #4B4B4B at 1279px and below |
.dark-gray-2-border-xl-up |
sets border-color to #4B4B4B at 1280px and above |
.dark-gray-1-xl |
sets text color to #2A2A2A between 1280px and 1599px |
.dark-gray-1-xl-down |
sets text color to #2A2A2A at 1279px and below |
.dark-gray-1-xl-up |
sets text color to #2A2A2A at 1280px and above |
.dark-gray-1-bg-xl |
sets background-color to #2A2A2A between 1280px and 1599px |
.dark-gray-1-bg-xl-down |
sets background-color to #2A2A2A at 1279px and below |
.dark-gray-1-bg-xl-up |
sets background-color to #2A2A2A at 1280px and above |
.dark-gray-1-border-xl |
sets border-color to #2A2A2A between 1280px and 1599px |
.dark-gray-1-border-xl-down |
sets border-color to #2A2A2A at 1279px and below |
.dark-gray-1-border-xl-up |
sets border-color to #2A2A2A at 1280px and above |
.black-xl |
sets text color to #000000 between 1280px and 1599px |
.black-xl-down |
sets text color to #000000 at 1279px and below |
.black-xl-up |
sets text color to #000000 at 1280px and above |
.black-bg-xl |
sets background-color to #000000 between 1280px and 1599px |
.black-bg-xl-down |
sets background-color to #000000 at 1279px and below |
.black-bg-xl-up |
sets background-color to #000000 at 1280px and above |
.black-border-xl |
sets border-color to #000000 between 1280px and 1599px |
.black-border-xl-down |
sets border-color to #000000 at 1279px and below |
.black-border-xl-up |
sets border-color to #000000 at 1280px and above |
.gold-xl |
sets text color to #9C8954 between 1280px and 1599px |
.gold-xl-down |
sets text color to #9C8954 at 1279px and below |
.gold-xl-up |
sets text color to #9C8954 at 1280px and above |
.gold-bg-xl |
sets background-color to #9C8954 between 1280px and 1599px |
.gold-bg-xl-down |
sets background-color to #9C8954 at 1279px and below |
.gold-bg-xl-up |
sets background-color to #9C8954 at 1280px and above |
.gold-border-xl |
sets border-color to #9C8954 between 1280px and 1599px |
.gold-border-xl-down |
sets border-color to #9C8954 at 1279px and below |
.gold-border-xl-up |
sets border-color to #9C8954 at 1280px and above |
.light-gold-xl |
sets text color to #AD986E between 1280px and 1599px |
.light-gold-xl-down |
sets text color to #AD986E at 1279px and below |
.light-gold-xl-up |
sets text color to #AD986E at 1280px and above |
.light-gold-bg-xl |
sets background-color to #AD986E between 1280px and 1599px |
.light-gold-bg-xl-down |
sets background-color to #AD986E at 1279px and below |
.light-gold-bg-xl-up |
sets background-color to #AD986E at 1280px and above |
.light-gold-border-xl |
sets border-color to #AD986E between 1280px and 1599px |
.light-gold-border-xl-down |
sets border-color to #AD986E at 1279px and below |
.light-gold-border-xl-up |
sets border-color to #AD986E at 1280px and above |
.transparent-xl |
sets text color to transparent between 1280px and 1599px |
.transparent-xl-down |
sets text color to transparent at 1279px and below |
.transparent-xl-up |
sets text color to transparent at 1280px and above |
.transparent-bg-xl |
sets background-color to transparent between 1280px and 1599px |
.transparent-bg-xl-down |
sets background-color to transparent at 1279px and below |
.transparent-bg-xl-up |
sets background-color to transparent at 1280px and above |
.transparent-border-xl |
sets border-color to transparent between 1280px and 1599px |
.transparent-border-xl-down |
sets border-color to transparent at 1279px and below |
.transparent-border-xl-up |
sets border-color to transparent at 1280px and above |
Display #
| Selector | Usage |
|---|---|
.display-block |
show element with display block |
.display-inline-block |
shows element with display inline block |
.display-inline-flex |
shows element with display inline flex |
.display-flex |
shows element with display flex |
.display-none |
hides element with display none |
Responsive Display - Small (480PX)
| Selector | Usage |
|---|---|
.display-block-sm |
show element with display block between 480px and 767px |
.display-block-sm-down |
show element with display block at 479px and below |
.display-block-sm-up |
show element with display block at 480px and above |
.display-inline-block-sm |
shows element with display inline block between 480px and 767px |
.display-inline-block-sm-down |
shows element with display inline block at 479px and below |
.display-inline-block-sm-up |
shows element with display inline block at 480px and above |
.display-inline-flex-sm |
shows element with display inline flex between 480px and 767px |
.display-inline-flex-sm-down |
shows element with display inline flex at 479px and below |
.display-inline-flex-sm-up |
shows element with display inline flex at 480px and above |
.display-flex-sm |
shows element with display flex between 480px and 767px |
.display-flex-sm-down |
shows element with display flex at 479px and below |
.display-flex-sm-up |
shows element with display flex at 480px and above |
.display-none-sm |
hides element with display none between 480px and 767px |
.display-none-sm-down |
hides element with display none at 479px and below |
.display-none-sm-up |
hides element with display none at 480px and above |
Responsive Display - Medium (768PX)
| Selector | Usage |
|---|---|
.display-block-md |
show element with display block between 768px and 1023px |
.display-block-md-down |
show element with display block at 767px and below |
.display-block-md-up |
show element with display block at 768px and above |
.display-inline-block-md |
shows element with display inline block between 768px and 1023px |
.display-inline-block-md-down |
shows element with display inline block at 767px and below |
.display-inline-block-md-up |
shows element with display inline block at 768px and above |
.display-inline-flex-md |
shows element with display inline flex between 768px and 1023px |
.display-inline-flex-md-down |
shows element with display inline flex at 767px and below |
.display-inline-flex-md-up |
shows element with display inline flex at 768px and above |
.display-flex-md |
shows element with display flex between 768px and 1023px |
.display-flex-md-down |
shows element with display flex at 767px and below |
.display-flex-md-up |
shows element with display flex at 768px and above |
.display-none-md |
hides element with display none between 768px and 1023px |
.display-none-md-down |
hides element with display none at 767px and below |
.display-none-md-up |
hides element with display none at 768px and above |
Responsive Display - Large (1024PX)
| Selector | Usage |
|---|---|
.display-block-lg |
show element with display block between 1024px and 1279px |
.display-block-lg-down |
show element with display block at 1023px and below |
.display-block-lg-up |
show element with display block at 1024px and above |
.display-inline-block-lg |
shows element with display inline block between 1024px and 1279px |
.display-inline-block-lg-down |
shows element with display inline block at 1023px and below |
.display-inline-block-lg-up |
shows element with display inline block at 1024px and above |
.display-inline-flex-lg |
shows element with display inline flex between 1024px and 1279px |
.display-inline-flex-lg-down |
shows element with display inline flex at 1023px and below |
.display-inline-flex-lg-up |
shows element with display inline flex at 1024px and above |
.display-flex-lg |
shows element with display flex between 1024px and 1279px |
.display-flex-lg-down |
shows element with display flex at 1023px and below |
.display-flex-lg-up |
shows element with display flex at 1024px and above |
.display-none-lg |
hides element with display none between 1024px and 1279px |
.display-none-lg-down |
hides element with display none at 1023px and below |
.display-none-lg-up |
hides element with display none at 1024px and above |
Responsive Display - Extra Large (1280PX)
| Selector | Usage |
|---|---|
.display-block-xl |
show element with display block between 1280px and 1599px |
.display-block-xl-down |
show element with display block at 1279px and below |
.display-block-xl-up |
show element with display block at 1280px and above |
.display-inline-block-xl |
shows element with display inline block between 1280px and 1599px |
.display-inline-block-xl-down |
shows element with display inline block at 1279px and below |
.display-inline-block-xl-up |
shows element with display inline block at 1280px and above |
.display-inline-flex-xl |
shows element with display inline flex between 1280px and 1599px |
.display-inline-flex-xl-down |
shows element with display inline flex at 1279px and below |
.display-inline-flex-xl-up |
shows element with display inline flex at 1280px and above |
.display-flex-xl |
shows element with display flex between 1280px and 1599px |
.display-flex-xl-down |
shows element with display flex at 1279px and below |
.display-flex-xl-up |
shows element with display flex at 1280px and above |
.display-none-xl |
hides element with display none between 1280px and 1599px |
.display-none-xl-down |
hides element with display none at 1279px and below |
.display-none-xl-up |
hides element with display none at 1280px and above |
Flex #
| Selector | Usage |
|---|---|
.flex-align-items-center |
sets items centered in the cross-axis |
.flex-align-items-stretch |
sets items to stretch to fill the container |
.flex-align-items-start |
cross-start margin edge of the items is placed on the cross-start line |
.flex-align-items-end |
cross-end margin edge of the items is placed on the cross-end line |
.flex-align-items-baseline |
items are aligned such as their baselines align |
.flex-align-content-center |
lines packed to the center of the container |
.flex-align-content-stretch |
lines stretch to take up the remaining space |
.flex-align-content-start |
lines packed to the start of the container |
.flex-align-content-end |
lines packed to the end of the container |
.flex-align-content-space-around |
lines evenly distributed with equal space around each line |
.flex-align-content-space-between |
lines evenly distributed; the first line is at the start of the container while the last one is at the end |
.flex-justify-items-center |
items are packed toward the center |
.flex-justify-items-stretch |
items stretch to take up the remaining space |
.flex-justify-items-start |
items are packed from the start |
.flex-justify-items-end |
items are packed from the end |
.flex-justify-items-baseline |
items are packed along the baseline |
.flex-justify-content-center |
items are centered along the line |
.flex-justify-content-start |
items are packed toward the start line |
.flex-justify-content-end |
items are packed toward to end line |
.flex-justify-content-space-around |
items are evenly distributed in the line with equal space around them |
.flex-justify-content-space-evenly |
items are distributed so that the spacing between any two items (and the space to the edges) is equal |
.flex-justify-content-space-between |
items are evenly distributed in the line; first item is on the start line, last item on the end line |
.flex-direction-row |
sets main-axis from left to right in ltr, and right to left in rtl |
.flex-direction-column |
sets main-axis from top to bottom |
.flex-grow |
defines the ability for a flex item to grow if necessary |
.flex-shrink |
defines the ability for a flex item to shrink if necessary |
.flex-nowrap |
all flex items will be on one line |
.flex-wrap |
flex items will wrap onto multiple lines |
Responsive Flex - Small (480PX)
| Selector | Usage |
|---|---|
.flex-align-items-center-sm |
sets items centered in the cross-axis between 480px and 767px |
.flex-align-items-center-sm-down |
sets items centered in the cross-axis at 479px and below |
.flex-align-items-center-sm-up |
sets items centered in the cross-axis at 480px and above |
.flex-align-items-stretch-sm |
sets items to stretch to fill the container between 480px and 767px |
.flex-align-items-stretch-sm-down |
sets items to stretch to fill the container at 479px and below |
.flex-align-items-stretch-sm-up |
sets items to stretch to fill the container at 480px and above |
.flex-align-items-start-sm |
cross-start margin edge of the items is placed on the cross-start line between 480px and 767px |
.flex-align-items-start-sm-down |
cross-start margin edge of the items is placed on the cross-start line at 479px and below |
.flex-align-items-start-sm-up |
cross-start margin edge of the items is placed on the cross-start line at 480px and above |
.flex-align-items-end-sm |
cross-end margin edge of the items is placed on the cross-end line between 480px and 767px |
.flex-align-items-end-sm-down |
cross-end margin edge of the items is placed on the cross-end line at 479px and below |
.flex-align-items-end-sm-up |
cross-end margin edge of the items is placed on the cross-end line at 480px and above |
.flex-align-items-baseline-sm |
items are aligned such as their baselines align between 480px and 767px |
.flex-align-items-baseline-sm-down |
items are aligned such as their baselines align at 479px and below |
.flex-align-items-baseline-sm-up |
items are aligned such as their baselines align at 480px and above |
.flex-align-content-center-sm |
lines packed to the center of the container between 480px and 767px |
.flex-align-content-center-sm-down |
lines packed to the center of the container at 479px and below |
.flex-align-content-center-sm-up |
lines packed to the center of the container at 480px and above |
.flex-align-content-stretch-sm |
lines stretch to take up the remaining space between 480px and 767px |
.flex-align-content-stretch-sm-down |
lines stretch to take up the remaining space at 479px and below |
.flex-align-content-stretch-sm-up |
lines stretch to take up the remaining space at 480px and above |
.flex-align-content-start-sm |
lines packed to the start of the container between 480px and 767px |
.flex-align-content-start-sm-down |
lines packed to the start of the container at 479px and below |
.flex-align-content-start-sm-up |
lines packed to the start of the container at 480px and above |
.flex-align-content-end-sm |
lines packed to the end of the container between 480px and 767px |
.flex-align-content-end-sm-down |
lines packed to the end of the container at 479px and below |
.flex-align-content-end-sm-up |
lines packed to the end of the container at 480px and above |
.flex-align-content-space-around-sm |
lines evenly distributed with equal space around each line between 480px and 767px |
.flex-align-content-space-around-sm-down |
lines evenly distributed with equal space around each line at 479px and below |
.flex-align-content-space-around-sm-up |
lines evenly distributed with equal space around each line at 480px and above |
.flex-align-content-space-between-sm |
lines evenly distributed; the first line is at the start of the container while the last one is at the end between 480px and 767px |
.flex-align-content-space-between-sm-down |
lines evenly distributed; the first line is at the start of the container while the last one is at the end at 479px and below |
.flex-align-content-space-between-sm-up |
lines evenly distributed; the first line is at the start of the container while the last one is at the end at 480px and above |
.flex-justify-items-center-sm |
items are packed toward the center between 480px and 767px |
.flex-justify-items-center-sm-down |
items are packed toward the center at 479px and below |
.flex-justify-items-center-sm-up |
items are packed toward the center at 480px and above |
.flex-justify-items-stretch-sm |
items stretch to take up the remaining space between 480px and 767px |
.flex-justify-items-stretch-sm-down |
items stretch to take up the remaining space at 479px and below |
.flex-justify-items-stretch-sm-up |
items stretch to take up the remaining space at 480px and above |
.flex-justify-items-start-sm |
items are packed from the start between 480px and 767px |
.flex-justify-items-start-sm-down |
items are packed from the start at 479px and below |
.flex-justify-items-start-sm-up |
items are packed from the start at 480px and above |
.flex-justify-items-end-sm |
items are packed from the end between 480px and 767px |
.flex-justify-items-end-sm-down |
items are packed from the end at 479px and below |
.flex-justify-items-end-sm-up |
items are packed from the end at 480px and above |
.flex-justify-items-baseline-sm |
items are packed along the baseline between 480px and 767px |
.flex-justify-items-baseline-sm-down |
items are packed along the baseline at 479px and below |
.flex-justify-items-baseline-sm-up |
items are packed along the baseline at 480px and above |
.flex-justify-content-center-sm |
items are centered along the line between 480px and 767px |
.flex-justify-content-center-sm-down |
items are centered along the line at 479px and below |
.flex-justify-content-center-sm-up |
items are centered along the line at 480px and above |
.flex-justify-content-start-sm |
items are packed toward the start line between 480px and 767px |
.flex-justify-content-start-sm-down |
items are packed toward the start line at 479px and below |
.flex-justify-content-start-sm-up |
items are packed toward the start line at 480px and above |
.flex-justify-content-end-sm |
items are packed toward to end line between 480px and 767px |
.flex-justify-content-end-sm-down |
items are packed toward to end line at 479px and below |
.flex-justify-content-end-sm-up |
items are packed toward to end line at 480px and above |
.flex-justify-content-space-around-sm |
items are evenly distributed in the line with equal space around them between 480px and 767px |
.flex-justify-content-space-around-sm-down |
items are evenly distributed in the line with equal space around them at 479px and below |
.flex-justify-content-space-around-sm-up |
items are evenly distributed in the line with equal space around them at 480px and above |
.flex-justify-content-space-evenly-sm |
items are distributed so that the spacing between any two items (and the space to the edges) is equal between 480px and 767px |
.flex-justify-content-space-evenly-sm-down |
items are distributed so that the spacing between any two items (and the space to the edges) is equal at 479px and below |
.flex-justify-content-space-evenly-sm-up |
items are distributed so that the spacing between any two items (and the space to the edges) is equal at 480px and above |
.flex-justify-content-space-between-sm |
items are evenly distributed in the line; first item is on the start line, last item on the end line between 480px and 767px |
.flex-justify-content-space-between-sm-down |
items are evenly distributed in the line; first item is on the start line, last item on the end line at 479px and below |
.flex-justify-content-space-between-sm-up |
items are evenly distributed in the line; first item is on the start line, last item on the end line at 480px and above |
.flex-direction-row-sm |
sets main-axis from left to right in ltr, and right to left in rtl, between 480px and 767px |
.flex-direction-row-sm-down |
sets main-axis from left to right in ltr, and right to left in rtl, at 479px and below |
.flex-direction-row-sm-up |
sets main-axis from left to right in ltr, and right to left in rtl, at 480px and above |
.flex-direction-column-sm |
sets main-axis from top to bottom between 480px and 767px |
.flex-direction-column-sm-down |
sets main-axis from top to bottom at 479px and below |
.flex-direction-column-sm-up |
sets main-axis from top to bottom at 480px and above |
.flex-grow-sm |
defines the ability for a flex item to grow if necessary between 480px and 767px |
.flex-grow-sm-down |
defines the ability for a flex item to grow if necessary at 479px and below |
.flex-grow-sm-up |
defines the ability for a flex item to grow if necessary at 480px and above |
.flex-shrink-sm |
defines the ability for a flex item to shrink if necessary between 480px and 767px |
.flex-shrink-sm-down |
defines the ability for a flex item to shrink if necessary at 479px and below |
.flex-shrink-sm-up |
defines the ability for a flex item to shrink if necessary at 480px and above |
.flex-nowrap-sm |
all flex items will be on one line between 480px and 767px |
.flex-nowrap-sm-down |
all flex items will be on one line at 479px and below |
.flex-nowrap-sm-up |
all flex items will be on one line at 480px and above |
.flex-wrap-sm |
flex items will wrap onto multiple lines between 480px and 767px |
.flex-wrap-sm-down |
flex items will wrap onto multiple lines at 479px and below |
.flex-wrap-sm-up |
flex items will wrap onto multiple lines at 480px and above |
Responsive Flex - Medium (768PX)
| Selector | Usage |
|---|---|
.flex-align-items-center-md |
sets items centered in the cross-axis between 768px and 1023px |
.flex-align-items-center-md-down |
sets items centered in the cross-axis at 767px and below |
.flex-align-items-center-md-up |
sets items centered in the cross-axis at 768px and above |
.flex-align-items-stretch-md |
sets items to stretch to fill the container between 768px and 1023px |
.flex-align-items-stretch-md-down |
sets items to stretch to fill the container at 767px and below |
.flex-align-items-stretch-md-up |
sets items to stretch to fill the container at 768px and above |
.flex-align-items-start-md |
cross-start margin edge of the items is placed on the cross-start line between 768px and 1023px |
.flex-align-items-start-md-down |
cross-start margin edge of the items is placed on the cross-start line at 767px and below |
.flex-align-items-start-md-up |
cross-start margin edge of the items is placed on the cross-start line at 768px and above |
.flex-align-items-end-md |
cross-end margin edge of the items is placed on the cross-end line between 768px and 1023px |
.flex-align-items-end-md-down |
cross-end margin edge of the items is placed on the cross-end line at 767px and below |
.flex-align-items-end-md-up |
cross-end margin edge of the items is placed on the cross-end line at 768px and above |
.flex-align-items-baseline-md |
items are aligned such as their baselines align between 768px and 1023px |
.flex-align-items-baseline-md-down |
items are aligned such as their baselines align at 767px and below |
.flex-align-items-baseline-md-up |
items are aligned such as their baselines align at 768px and above |
.flex-align-content-center-md |
lines packed to the center of the container between 768px and 1023px |
.flex-align-content-center-md-down |
lines packed to the center of the container at 767px and below |
.flex-align-content-center-md-up |
lines packed to the center of the container at 768px and above |
.flex-align-content-stretch-md |
lines stretch to take up the remaining space between 768px and 1023px |
.flex-align-content-stretch-md-down |
lines stretch to take up the remaining space at 767px and below |
.flex-align-content-stretch-md-up |
lines stretch to take up the remaining space at 768px and above |
.flex-align-content-start-md |
lines packed to the start of the container between 768px and 1023px |
.flex-align-content-start-md-down |
lines packed to the start of the container at 767px and below |
.flex-align-content-start-md-up |
lines packed to the start of the container at 768px and above |
.flex-align-content-end-md |
lines packed to the end of the container between 768px and 1023px |
.flex-align-content-end-md-down |
lines packed to the end of the container at 767px and below |
.flex-align-content-end-md-up |
lines packed to the end of the container at 768px and above |
.flex-align-content-space-around-md |
lines evenly distributed with equal space around each line between 768px and 1023px |
.flex-align-content-space-around-md-down |
lines evenly distributed with equal space around each line at 767px and below |
.flex-align-content-space-around-md-up |
lines evenly distributed with equal space around each line at 768px and above |
.flex-align-content-space-between-md |
lines evenly distributed; the first line is at the start of the container while the last one is at the end between 768px and 1023px |
.flex-align-content-space-between-md-down |
lines evenly distributed; the first line is at the start of the container while the last one is at the end at 767px and below |
.flex-align-content-space-between-md-up |
lines evenly distributed; the first line is at the start of the container while the last one is at the end at 768px and above |
.flex-justify-items-center-md |
items are packed toward the center between 768px and 1023px |
.flex-justify-items-center-md-down |
items are packed toward the center at 767px and below |
.flex-justify-items-center-md-up |
items are packed toward the center at 768px and above |
.flex-justify-items-stretch-md |
items stretch to take up the remaining space between 768px and 1023px |
.flex-justify-items-stretch-md-down |
items stretch to take up the remaining space at 767px and below |
.flex-justify-items-stretch-md-up |
items stretch to take up the remaining space at 768px and above |
.flex-justify-items-start-md |
items are packed from the start between 768px and 1023px |
.flex-justify-items-start-md-down |
items are packed from the start at 767px and below |
.flex-justify-items-start-md-up |
items are packed from the start at 768px and above |
.flex-justify-items-end-md |
items are packed from the end between 768px and 1023px |
.flex-justify-items-end-md-down |
items are packed from the end at 767px and below |
.flex-justify-items-end-md-up |
items are packed from the end at 768px and above |
.flex-justify-items-baseline-md |
items are packed along the baseline between 768px and 1023px |
.flex-justify-items-baseline-md-down |
items are packed along the baseline at 767px and below |
.flex-justify-items-baseline-md-up |
items are packed along the baseline at 768px and above |
.flex-justify-content-center-md |
items are centered along the line between 768px and 1023px |
.flex-justify-content-center-md-down |
items are centered along the line at 767px and below |
.flex-justify-content-center-md-up |
items are centered along the line at 768px and above |
.flex-justify-content-start-md |
items are packed toward the start line between 768px and 1023px |
.flex-justify-content-start-md-down |
items are packed toward the start line at 767px and below |
.flex-justify-content-start-md-up |
items are packed toward the start line at 768px and above |
.flex-justify-content-end-md |
items are packed toward to end line between 768px and 1023px |
.flex-justify-content-end-md-down |
items are packed toward to end line at 767px and below |
.flex-justify-content-end-md-up |
items are packed toward to end line at 768px and above |
.flex-justify-content-space-around-md |
items are evenly distributed in the line with equal space around them between 768px and 1023px |
.flex-justify-content-space-around-md-down |
items are evenly distributed in the line with equal space around them at 767px and below |
.flex-justify-content-space-around-md-up |
items are evenly distributed in the line with equal space around them at 768px and above |
.flex-justify-content-space-evenly-md |
items are distributed so that the spacing between any two items (and the space to the edges) is equal between 768px and 1023px |
.flex-justify-content-space-evenly-md-down |
items are distributed so that the spacing between any two items (and the space to the edges) is equal at 767px and below |
.flex-justify-content-space-evenly-md-up |
items are distributed so that the spacing between any two items (and the space to the edges) is equal at 768px and above |
.flex-justify-content-space-between-md |
items are evenly distributed in the line; first item is on the start line, last item on the end line between 768px and 1023px |
.flex-justify-content-space-between-md-down |
items are evenly distributed in the line; first item is on the start line, last item on the end line at 767px and below |
.flex-justify-content-space-between-md-up |
items are evenly distributed in the line; first item is on the start line, last item on the end line at 768px and above |
.flex-direction-row-md |
sets main-axis from left to right in ltr, and right to left in rtl, between 768px and 1023px |
.flex-direction-row-md-down |
sets main-axis from left to right in ltr, and right to left in rtl, at 767px and below |
.flex-direction-row-md-up |
sets main-axis from left to right in ltr, and right to left in rtl, at 768px and above |
.flex-direction-column-md |
sets main-axis from top to bottom between 768px and 1023px |
.flex-direction-column-md-down |
sets main-axis from top to bottom at 767px and below |
.flex-direction-column-md-up |
sets main-axis from top to bottom at 768px and above |
.flex-grow-md |
defines the ability for a flex item to grow if necessary between 768px and 1023px |
.flex-grow-md-down |
defines the ability for a flex item to grow if necessary at 767px and below |
.flex-grow-md-up |
defines the ability for a flex item to grow if necessary at 768px and above |
.flex-shrink-md |
defines the ability for a flex item to shrink if necessary between 768px and 1023px |
.flex-shrink-md-down |
defines the ability for a flex item to shrink if necessary at 767px and below |
.flex-shrink-md-up |
defines the ability for a flex item to shrink if necessary at 768px and above |
.flex-nowrap-md |
all flex items will be on one line between 768px and 1023px |
.flex-nowrap-md-down |
all flex items will be on one line at 767px and below |
.flex-nowrap-md-up |
all flex items will be on one line at 768px and above |
.flex-wrap-md |
flex items will wrap onto multiple lines between 768px and 1023px |
.flex-wrap-md-down |
flex items will wrap onto multiple lines at 767px and below |
.flex-wrap-md-up |
flex items will wrap onto multiple lines at 768px and above |
Responsive Flex - Large (1024PX)
| Selector | Usage |
|---|---|
.flex-align-items-center-lg |
sets items centered in the cross-axis between 1024px and 1279px |
.flex-align-items-center-lg-down |
sets items centered in the cross-axis at 1023px and below |
.flex-align-items-center-lg-up |
sets items centered in the cross-axis at 1024px and above |
.flex-align-items-stretch-lg |
sets items to stretch to fill the container between 1024px and 1279px |
.flex-align-items-stretch-lg-down |
sets items to stretch to fill the container at 1023px and below |
.flex-align-items-stretch-lg-up |
sets items to stretch to fill the container at 1024px and above |
.flex-align-items-start-lg |
cross-start margin edge of the items is placed on the cross-start line between 1024px and 1279px |
.flex-align-items-start-lg-down |
cross-start margin edge of the items is placed on the cross-start line at 1023px and below |
.flex-align-items-start-lg-up |
cross-start margin edge of the items is placed on the cross-start line at 1024px and above |
.flex-align-items-end-lg |
cross-end margin edge of the items is placed on the cross-end line between 1024px and 1279px |
.flex-align-items-end-lg-down |
cross-end margin edge of the items is placed on the cross-end line at 1023px and below |
.flex-align-items-end-lg-up |
cross-end margin edge of the items is placed on the cross-end line at 1024px and above |
.flex-align-items-baseline-lg |
items are aligned such as their baselines align between 1024px and 1279px |
.flex-align-items-baseline-lg-down |
items are aligned such as their baselines align at 1023px and below |
.flex-align-items-baseline-lg-up |
items are aligned such as their baselines align at 1024px and above |
.flex-align-content-center-lg |
lines packed to the center of the container between 1024px and 1279px |
.flex-align-content-center-lg-down |
lines packed to the center of the container at 1023px and below |
.flex-align-content-center-lg-up |
lines packed to the center of the container at 1024px and above |
.flex-align-content-stretch-lg |
lines stretch to take up the remaining space between 1024px and 1279px |
.flex-align-content-stretch-lg-down |
lines stretch to take up the remaining space at 1023px and below |
.flex-align-content-stretch-lg-up |
lines stretch to take up the remaining space at 1024px and above |
.flex-align-content-start-lg |
lines packed to the start of the container between 1024px and 1279px |
.flex-align-content-start-lg-down |
lines packed to the start of the container at 1023px and below |
.flex-align-content-start-lg-up |
lines packed to the start of the container at 1024px and above |
.flex-align-content-end-lg |
lines packed to the end of the container between 1024px and 1279px |
.flex-align-content-end-lg-down |
lines packed to the end of the container at 1023px and below |
.flex-align-content-end-lg-up |
lines packed to the end of the container at 1024px and above |
.flex-align-content-space-around-lg |
lines evenly distributed with equal space around each line between 1024px and 1279px |
.flex-align-content-space-around-lg-down |
lines evenly distributed with equal space around each line at 1023px and below |
.flex-align-content-space-around-lg-up |
lines evenly distributed with equal space around each line at 1024px and above |
.flex-align-content-space-between-lg |
lines evenly distributed; the first line is at the start of the container while the last one is at the end between 1024px and 1279px |
.flex-align-content-space-between-lg-down |
lines evenly distributed; the first line is at the start of the container while the last one is at the end at 1023px and below |
.flex-align-content-space-between-lg-up |
lines evenly distributed; the first line is at the start of the container while the last one is at the end at 1024px and above |
.flex-justify-items-center-lg |
items are packed toward the center between 1024px and 1279px |
.flex-justify-items-center-lg-down |
items are packed toward the center at 1023px and below |
.flex-justify-items-center-lg-up |
items are packed toward the center at 1024px and above |
.flex-justify-items-stretch-lg |
items stretch to take up the remaining space between 1024px and 1279px |
.flex-justify-items-stretch-lg-down |
items stretch to take up the remaining space at 1023px and below |
.flex-justify-items-stretch-lg-up |
items stretch to take up the remaining space at 1024px and above |
.flex-justify-items-start-lg |
items are packed from the start between 1024px and 1279px |
.flex-justify-items-start-lg-down |
items are packed from the start at 1023px and below |
.flex-justify-items-start-lg-up |
items are packed from the start at 1024px and above |
.flex-justify-items-end-lg |
items are packed from the end between 1024px and 1279px |
.flex-justify-items-end-lg-down |
items are packed from the end at 1023px and below |
.flex-justify-items-end-lg-up |
items are packed from the end at 1024px and above |
.flex-justify-items-baseline-lg |
items are packed along the baseline between 1024px and 1279px |
.flex-justify-items-baseline-lg-down |
items are packed along the baseline at 1023px and below |
.flex-justify-items-baseline-lg-up |
items are packed along the baseline at 1024px and above |
.flex-justify-content-center-lg |
items are centered along the line between 1024px and 1279px |
.flex-justify-content-center-lg-down |
items are centered along the line at 1023px and below |
.flex-justify-content-center-lg-up |
items are centered along the line at 1024px and above |
.flex-justify-content-start-lg |
items are packed toward the start line between 1024px and 1279px |
.flex-justify-content-start-lg-down |
items are packed toward the start line at 1023px and below |
.flex-justify-content-start-lg-up |
items are packed toward the start line at 1024px and above |
.flex-justify-content-end-lg |
items are packed toward to end line between 1024px and 1279px |
.flex-justify-content-end-lg-down |
items are packed toward to end line at 1023px and below |
.flex-justify-content-end-lg-up |
items are packed toward to end line at 1024px and above |
.flex-justify-content-space-around-lg |
items are evenly distributed in the line with equal space around them between 1024px and 1279px |
.flex-justify-content-space-around-lg-down |
items are evenly distributed in the line with equal space around them at 1023px and below |
.flex-justify-content-space-around-lg-up |
items are evenly distributed in the line with equal space around them at 1024px and above |
.flex-justify-content-space-evenly-lg |
items are distributed so that the spacing between any two items (and the space to the edges) is equal between 1024px and 1279px |
.flex-justify-content-space-evenly-lg-down |
items are distributed so that the spacing between any two items (and the space to the edges) is equal at 1023px and below |
.flex-justify-content-space-evenly-lg-up |
items are distributed so that the spacing between any two items (and the space to the edges) is equal at 1024px and above |
.flex-justify-content-space-between-lg |
items are evenly distributed in the line; first item is on the start line, last item on the end line between 1024px and 1279px |
.flex-justify-content-space-between-lg-down |
items are evenly distributed in the line; first item is on the start line, last item on the end line at 1023px and below |
.flex-justify-content-space-between-lg-up |
items are evenly distributed in the line; first item is on the start line, last item on the end line at 1024px and above |
.flex-direction-row-lg |
sets main-axis from left to right in ltr, and right to left in rtl, between 1024px and 1279px |
.flex-direction-row-lg-down |
sets main-axis from left to right in ltr, and right to left in rtl, at 1023px and below |
.flex-direction-row-lg-up |
sets main-axis from left to right in ltr, and right to left in rtl, at 1024px and above |
.flex-direction-column-lg |
sets main-axis from top to bottom between 1024px and 1279px |
.flex-direction-column-lg-down |
sets main-axis from top to bottom at 1023px and below |
.flex-direction-column-lg-up |
sets main-axis from top to bottom at 1024px and above |
.flex-grow-lg |
defines the ability for a flex item to grow if necessary between 1024px and 1279px |
.flex-grow-lg-down |
defines the ability for a flex item to grow if necessary at 1023px and below |
.flex-grow-lg-up |
defines the ability for a flex item to grow if necessary at 1024px and above |
.flex-shrink-lg |
defines the ability for a flex item to shrink if necessary between 1024px and 1279px |
.flex-shrink-lg-down |
defines the ability for a flex item to shrink if necessary at 1023px and below |
.flex-shrink-lg-up |
defines the ability for a flex item to shrink if necessary at 1024px and above |
.flex-nowrap-lg |
all flex items will be on one line between 1024px and 1279px |
.flex-nowrap-lg-down |
all flex items will be on one line at 1023px and below |
.flex-nowrap-lg-up |
all flex items will be on one line at 1024px and above |
.flex-wrap-lg |
flex items will wrap onto multiple lines between 1024px and 1279px |
.flex-wrap-lg-down |
flex items will wrap onto multiple lines at 1023px and below |
.flex-wrap-lg-up |
flex items will wrap onto multiple lines at 1024px and above |
Responsive Flex - Extra Large (1280PX)
| Selector | Usage |
|---|---|
.flex-align-items-center-xl |
sets items centered in the cross-axis between 1280px and 1599px |
.flex-align-items-center-xl-down |
sets items centered in the cross-axis at 1279px and below |
.flex-align-items-center-xl-up |
sets items centered in the cross-axis at 1280px and above |
.flex-align-items-stretch-xl |
sets items to stretch to fill the container between 1280px and 1599px |
.flex-align-items-stretch-xl-down |
sets items to stretch to fill the container at 1279px and below |
.flex-align-items-stretch-xl-up |
sets items to stretch to fill the container at 1280px and above |
.flex-align-items-start-xl |
cross-start margin edge of the items is placed on the cross-start line between 1280px and 1599px |
.flex-align-items-start-xl-down |
cross-start margin edge of the items is placed on the cross-start line at 1279px and below |
.flex-align-items-start-xl-up |
cross-start margin edge of the items is placed on the cross-start line at 1280px and above |
.flex-align-items-end-xl |
cross-end margin edge of the items is placed on the cross-end line between 1280px and 1599px |
.flex-align-items-end-xl-down |
cross-end margin edge of the items is placed on the cross-end line at 1279px and below |
.flex-align-items-end-xl-up |
cross-end margin edge of the items is placed on the cross-end line at 1280px and above |
.flex-align-items-baseline-xl |
items are aligned such as their baselines align between 1280px and 1599px |
.flex-align-items-baseline-xl-down |
items are aligned such as their baselines align at 1279px and below |
.flex-align-items-baseline-xl-up |
items are aligned such as their baselines align at 1280px and above |
.flex-align-content-center-xl |
lines packed to the center of the container between 1280px and 1599px |
.flex-align-content-center-xl-down |
lines packed to the center of the container at 1279px and below |
.flex-align-content-center-xl-up |
lines packed to the center of the container at 1280px and above |
.flex-align-content-stretch-xl |
lines stretch to take up the remaining space between 1280px and 1599px |
.flex-align-content-stretch-xl-down |
lines stretch to take up the remaining space at 1279px and below |
.flex-align-content-stretch-xl-up |
lines stretch to take up the remaining space at 1280px and above |
.flex-align-content-start-xl |
lines packed to the start of the container between 1280px and 1599px |
.flex-align-content-start-xl-down |
lines packed to the start of the container at 1279px and below |
.flex-align-content-start-xl-up |
lines packed to the start of the container at 1280px and above |
.flex-align-content-end-xl |
lines packed to the end of the container between 1280px and 1599px |
.flex-align-content-end-xl-down |
lines packed to the end of the container at 1279px and below |
.flex-align-content-end-xl-up |
lines packed to the end of the container at 1280px and above |
.flex-align-content-space-around-xl |
lines evenly distributed with equal space around each line between 1280px and 1599px |
.flex-align-content-space-around-xl-down |
lines evenly distributed with equal space around each line at 1279px and below |
.flex-align-content-space-around-xl-up |
lines evenly distributed with equal space around each line at 1280px and above |
.flex-align-content-space-between-xl |
lines evenly distributed; the first line is at the start of the container while the last one is at the end between 1280px and 1599px |
.flex-align-content-space-between-xl-down |
lines evenly distributed; the first line is at the start of the container while the last one is at the end at 1279px and below |
.flex-align-content-space-between-xl-up |
lines evenly distributed; the first line is at the start of the container while the last one is at the end at 1280px and above |
.flex-justify-items-center-xl |
items are packed toward the center between 1280px and 1599px |
.flex-justify-items-center-xl-down |
items are packed toward the center at 1279px and below |
.flex-justify-items-center-xl-up |
items are packed toward the center at 1280px and above |
.flex-justify-items-stretch-xl |
items stretch to take up the remaining space between 1280px and 1599px |
.flex-justify-items-stretch-xl-down |
items stretch to take up the remaining space at 1279px and below |
.flex-justify-items-stretch-xl-up |
items stretch to take up the remaining space at 1280px and above |
.flex-justify-items-start-xl |
items are packed from the start between 1280px and 1599px |
.flex-justify-items-start-xl-down |
items are packed from the start at 1279px and below |
.flex-justify-items-start-xl-up |
items are packed from the start at 1280px and above |
.flex-justify-items-end-xl |
items are packed from the end between 1280px and 1599px |
.flex-justify-items-end-xl-down |
items are packed from the end at 1279px and below |
.flex-justify-items-end-xl-up |
items are packed from the end at 1280px and above |
.flex-justify-items-baseline-xl |
items are packed along the baseline between 1280px and 1599px |
.flex-justify-items-baseline-xl-down |
items are packed along the baseline at 1279px and below |
.flex-justify-items-baseline-xl-up |
items are packed along the baseline at 1280px and above |
.flex-justify-content-center-xl |
items are centered along the line between 1280px and 1599px |
.flex-justify-content-center-xl-down |
items are centered along the line at 1279px and below |
.flex-justify-content-center-xl-up |
items are centered along the line at 1280px and above |
.flex-justify-content-start-xl |
items are packed toward the start line between 1280px and 1599px |
.flex-justify-content-start-xl-down |
items are packed toward the start line at 1279px and below |
.flex-justify-content-start-xl-up |
items are packed toward the start line at 1280px and above |
.flex-justify-content-end-xl |
items are packed toward to end line between 1280px and 1599px |
.flex-justify-content-end-xl-down |
items are packed toward to end line at 1279px and below |
.flex-justify-content-end-xl-up |
items are packed toward to end line at 1280px and above |
.flex-justify-content-space-around-xl |
items are evenly distributed in the line with equal space around them between 1280px and 1599px |
.flex-justify-content-space-around-xl-down |
items are evenly distributed in the line with equal space around them at 1279px and below |
.flex-justify-content-space-around-xl-up |
items are evenly distributed in the line with equal space around them at 1280px and above |
.flex-justify-content-space-evenly-xl |
items are distributed so that the spacing between any two items (and the space to the edges) is equal between 1280px and 1599px |
.flex-justify-content-space-evenly-xl-down |
items are distributed so that the spacing between any two items (and the space to the edges) is equal at 1279px and below |
.flex-justify-content-space-evenly-xl-up |
items are distributed so that the spacing between any two items (and the space to the edges) is equal at 1280px and above |
.flex-justify-content-space-between-xl |
items are evenly distributed in the line; first item is on the start line, last item on the end line between 1280px and 1599px |
.flex-justify-content-space-between-xl-down |
items are evenly distributed in the line; first item is on the start line, last item on the end line at 1279px and below |
.flex-justify-content-space-between-xl-up |
items are evenly distributed in the line; first item is on the start line, last item on the end line at 1280px and above |
.flex-direction-row-xl |
sets main-axis from left to right in ltr, and right to left in rtl, between 1280px and 1599px |
.flex-direction-row-xl-down |
sets main-axis from left to right in ltr, and right to left in rtl, at 1279px and below |
.flex-direction-row-xl-up |
sets main-axis from left to right in ltr, and right to left in rtl, at 1280px and above |
.flex-direction-column-xl |
sets main-axis from top to bottom between 1280px and 1599px |
.flex-direction-column-xl-down |
sets main-axis from top to bottom at 1279px and below |
.flex-direction-column-xl-up |
sets main-axis from top to bottom at 1280px and above |
.flex-grow-xl |
defines the ability for a flex item to grow if necessary between 1280px and 1599px |
.flex-grow-xl-down |
defines the ability for a flex item to grow if necessary at 1279px and below |
.flex-grow-xl-up |
defines the ability for a flex item to grow if necessary at 1280px and above |
.flex-shrink-xl |
defines the ability for a flex item to shrink if necessary between 1280px and 1599px |
.flex-shrink-xl-down |
defines the ability for a flex item to shrink if necessary at 1279px and below |
.flex-shrink-xl-up |
defines the ability for a flex item to shrink if necessary at 1280px and above |
.flex-nowrap-xl |
all flex items will be on one line between 1280px and 1599px |
.flex-nowrap-xl-down |
all flex items will be on one line at 1279px and below |
.flex-nowrap-xl-up |
all flex items will be on one line at 1280px and above |
.flex-wrap-xl |
flex items will wrap onto multiple lines between 1280px and 1599px |
.flex-wrap-xl-down |
flex items will wrap onto multiple lines at 1279px and below |
.flex-wrap-xl-up |
flex items will wrap onto multiple lines at 1280px and above |
Font #
| Selector | Usage |
|---|---|
.font-weight-normal |
sets the font weight to normal |
.font-weight-bold |
sets the font weight to bold |
.font-style-normal |
sets the font style to normal |
.font-style-italic |
sets the font style to italic |
Responsive Font - Small (480PX)
| Selector | Usage |
|---|---|
.font-weight-normal-sm |
sets the font weight to normal between 480px and 767px |
.font-weight-normal-sm-down |
sets the font weight to normal at 479px and below |
.font-weight-normal-sm-up |
sets the font weight to normal at 480px and above |
.font-weight-bold-sm |
sets the font weight to bold between 480px and 767px |
.font-weight-bold-sm-down |
sets the font weight to bold at 479px and below |
.font-weight-bold-sm-up |
sets the font weight to bold at 480px and above |
.font-style-normal-sm |
sets the font style to normal between 480px and 767px |
.font-style-normal-sm-down |
sets the font style to normal at 479px and below |
.font-style-normal-sm-up |
sets the font style to normal at 480px and above |
.font-style-italic-sm |
sets the font style to italic between 480px and 767px |
.font-style-italic-sm-down |
sets the font style to italic at 479px and below |
.font-style-italic-sm-up |
sets the font style to italic at 480px and above |
Responsive Font - Medium (768PX)
| Selector | Usage |
|---|---|
.font-weight-normal-md |
sets the font weight to normal between 768px and 1023px |
.font-weight-normal-md-down |
sets the font weight to normal at 767px and below |
.font-weight-normal-md-up |
sets the font weight to normal at 768px and above |
.font-weight-bold-md |
sets the font weight to bold between 768px and 1023px |
.font-weight-bold-md-down |
sets the font weight to bold at 767px and below |
.font-weight-bold-md-up |
sets the font weight to bold at 768px and above |
.font-style-normal-md |
sets the font style to normal between 768px and 1023px |
.font-style-normal-md-down |
sets the font style to normal at 767px and below |
.font-style-normal-md-up |
sets the font style to normal at 768px and above |
.font-style-italic-md |
sets the font style to italic between 768px and 1023px |
.font-style-italic-md-down |
sets the font style to italic at 767px and below |
.font-style-italic-md-up |
sets the font style to italic at 768px and above |
Responsive Font - Large (1024PX)
| Selector | Usage |
|---|---|
.font-weight-normal-lg |
sets the font weight to normal between 1024px and 1279px |
.font-weight-normal-lg-down |
sets the font weight to normal at 1023px and below |
.font-weight-normal-lg-up |
sets the font weight to normal at 1024px and above |
.font-weight-bold-lg |
sets the font weight to bold between 1024px and 1279px |
.font-weight-bold-lg-down |
sets the font weight to bold at 1023px and below |
.font-weight-bold-lg-up |
sets the font weight to bold at 1024px and above |
.font-style-normal-lg |
sets the font style to normal between 1024px and 1279px |
.font-style-normal-lg-down |
sets the font style to normal at 1023px and below |
.font-style-normal-lg-up |
sets the font style to normal at 1024px and above |
.font-style-italic-lg |
sets the font style to italic between 1024px and 1279px |
.font-style-italic-lg-down |
sets the font style to italic at 1023px and below |
.font-style-italic-lg-up |
sets the font style to italic at 1024px and above |
Responsive Font - Extra Large (1280PX)
| Selector | Usage |
|---|---|
.font-weight-normal-xl |
sets the font weight to normal between 1280px and 1599px |
.font-weight-normal-xl-down |
sets the font weight to normal at 1279px and below |
.font-weight-normal-xl-up |
sets the font weight to normal at 1280px and above |
.font-weight-bold-xl |
sets the font weight to bold between 1280px and 1599px |
.font-weight-bold-xl-down |
sets the font weight to bold at 1279px and below |
.font-weight-bold-xl-up |
sets the font weight to bold at 1280px and above |
.font-style-normal-xl |
sets the font style to normal between 1280px and 1599px |
.font-style-normal-xl-down |
sets the font style to normal at 1279px and below |
.font-style-normal-xl-up |
sets the font style to normal at 1280px and above |
.font-style-italic-xl |
sets the font style to italic between 1280px and 1599px |
.font-style-italic-xl-down |
sets the font style to italic at 1279px and below |
.font-style-italic-xl-up |
sets the font style to italic at 1280px and above |
Margin #
| Selector | Usage |
|---|---|
.margin |
sets margin to 20px on all sides |
.margin-auto |
sets margin to auto on all sides |
.margin-b |
sets margin to 20px on bottom |
.margin-t |
sets margin to 20px on top |
.margin-l |
sets margin to 20px on left |
.margin-r |
sets margin to 20px on right |
.margin-0 |
sets margin to 0px on all sides |
.margin-0-b |
sets margin to 0px on bottom |
.margin-0-t |
sets margin to 0px on top |
.margin-0-l |
sets margin to 0px on left |
.margin-0-r |
sets margin to 0px on right |
.margin-1 |
sets margin to 10px on all sides |
.margin-1-b |
sets margin to 10px on bottom |
.margin-1-t |
sets margin to 10px on top |
.margin-1-l |
sets margin to 10px on left |
.margin-1-r |
sets margin to 10px on right |
.margin-2 |
sets margin to 20px on all sides |
.margin-2-b |
sets margin to 20px on bottom |
.margin-2-t |
sets margin to 20px on top |
.margin-2-l |
sets margin to 20px on left |
.margin-2-r |
sets margin to 20px on right |
.margin-3 |
sets margin to 30px on all sides |
.margin-3-b |
sets margin to 30px on bottom |
.margin-3-t |
sets margin to 30px on top |
.margin-3-l |
sets margin to 30px on left |
.margin-3-r |
sets margin to 30px on right |
Responsive Margin - Small (480PX)
| Selector | Usage |
|---|---|
.margin-sm |
sets margin to 20px on all sides between 480px and 767px |
.margin-sm-down |
sets margin to 20px on all sides at 479px and below |
.margin-sm-up |
sets margin to 20px on all sides at 480px and above |
.margin-auto-sm |
sets margin to auto on all sides between 480px and 767px |
.margin-auto-sm-down |
sets margin to auto on all sides at 479px and below |
.margin-auto-sm-up |
sets margin to auto on all sides at 480px and above |
.margin-b-sm |
sets margin to 20px on bottom between 480px and 767px |
.margin-b-sm-down |
sets margin to 20px on bottom at 479px and below |
.margin-b-sm-up |
sets margin to 20px on bottom at 480px and above |
.margin-t-sm |
sets margin to 20px on top between 480px and 767px |
.margin-t-sm-down |
sets margin to 20px on top at 479px and below |
.margin-t-sm-up |
sets margin to 20px on top at 480px and above |
.margin-l-sm |
sets margin to 20px on left between 480px and 767px |
.margin-l-sm-down |
sets margin to 20px on left at 479px and below |
.margin-l-sm-up |
sets margin to 20px on left at 480px and above |
.margin-r-sm |
sets margin to 20px on right between 480px and 767px |
.margin-r-sm-down |
sets margin to 20px on right at 479px and below |
.margin-r-sm-up |
sets margin to 20px on right at 480px and above |
.margin-0-sm |
sets margin to 0px on all sides between 480px and 767px |
.margin-0-sm-down |
sets margin to 0px on all sides at 479px and below |
.margin-0-sm-up |
sets margin to 0px on all sides at 480px and above |
.margin-0-b-sm |
sets margin to 0px on bottom between 480px and 767px |
.margin-0-b-sm-down |
sets margin to 0px on bottom at 479px and below |
.margin-0-b-sm-up |
sets margin to 0px on bottom at 480px and above |
.margin-0-t-sm |
sets margin to 0px on top between 480px and 767px |
.margin-0-t-sm-down |
sets margin to 0px on top at 479px and below |
.margin-0-t-sm-up |
sets margin to 0px on top at 480px and above |
.margin-0-l-sm |
sets margin to 0px on left between 480px and 767px |
.margin-0-l-sm-down |
sets margin to 0px on left at 479px and below |
.margin-0-l-sm-up |
sets margin to 0px on left at 480px and above |
.margin-0-r-sm |
sets margin to 0px on right between 480px and 767px |
.margin-0-r-sm-down |
sets margin to 0px on right at 479px and below |
.margin-0-r-sm-up |
sets margin to 0px on right at 480px and above |
.margin-1-sm |
sets margin to 10px on all sides between 480px and 767px |
.margin-1-sm-down |
sets margin to 10px on all sides at 479px and below |
.margin-1-sm-up |
sets margin to 10px on all sides at 480px and above |
.margin-1-b-sm |
sets margin to 10px on bottom between 480px and 767px |
.margin-1-b-sm-down |
sets margin to 10px on bottom at 479px and below |
.margin-1-b-sm-up |
sets margin to 10px on bottom at 480px and above |
.margin-1-t-sm |
sets margin to 10px on top between 480px and 767px |
.margin-1-t-sm-down |
sets margin to 10px on top at 479px and below |
.margin-1-t-sm-up |
sets margin to 10px on top at 480px and above |
.margin-1-l-sm |
sets margin to 10px on left between 480px and 767px |
.margin-1-l-sm-down |
sets margin to 10px on left at 479px and below |
.margin-1-l-sm-up |
sets margin to 10px on left at 480px and above |
.margin-1-r-sm |
sets margin to 10px on right between 480px and 767px |
.margin-1-r-sm-down |
sets margin to 10px on right at 479px and below |
.margin-1-r-sm-up |
sets margin to 10px on right at 480px and above |
.margin-2-sm |
sets margin to 20px on all sides between 480px and 767px |
.margin-2-sm-down |
sets margin to 20px on all sides at 479px and below |
.margin-2-sm-up |
sets margin to 20px on all sides at 480px and above |
.margin-2-b-sm |
sets margin to 20px on bottom between 480px and 767px |
.margin-2-b-sm-down |
sets margin to 20px on bottom at 479px and below |
.margin-2-b-sm-up |
sets margin to 20px on bottom at 480px and above |
.margin-2-t-sm |
sets margin to 20px on top between 480px and 767px |
.margin-2-t-sm-down |
sets margin to 20px on top at 479px and below |
.margin-2-t-sm-up |
sets margin to 20px on top at 480px and above |
.margin-2-l-sm |
sets margin to 20px on left between 480px and 767px |
.margin-2-l-sm-down |
sets margin to 20px on left at 479px and below |
.margin-2-l-sm-up |
sets margin to 20px on left at 480px and above |
.margin-2-r-sm |
sets margin to 20px on right between 480px and 767px |
.margin-2-r-sm-down |
sets margin to 20px on right at 479px and below |
.margin-2-r-sm-up |
sets margin to 20px on right at 480px and above |
.margin-3-sm |
sets margin to 30px on all sides between 480px and 767px |
.margin-3-sm-down |
sets margin to 30px on all sides at 479px and below |
.margin-3-sm-up |
sets margin to 30px on all sides at 480px and above |
.margin-3-b-sm |
sets margin to 30px on bottom between 480px and 767px |
.margin-3-b-sm-down |
sets margin to 30px on bottom at 479px and below |
.margin-3-b-sm-up |
sets margin to 30px on bottom at 480px and above |
.margin-3-t-sm |
sets margin to 30px on top between 480px and 767px |
.margin-3-t-sm-down |
sets margin to 30px on top at 479px and below |
.margin-3-t-sm-up |
sets margin to 30px on top at 480px and above |
.margin-3-l-sm |
sets margin to 30px on left between 480px and 767px |
.margin-3-l-sm-down |
sets margin to 30px on left at 479px and below |
.margin-3-l-sm-up |
sets margin to 30px on left at 480px and above |
.margin-3-r-sm |
sets margin to 30px on right between 480px and 767px |
.margin-3-r-sm-down |
sets margin to 30px on right at 479px and below |
.margin-3-r-sm-up |
sets margin to 30px on right at 480px and above |
Responsive Margin - Medium (768PX)
| Selector | Usage |
|---|---|
.margin-md |
sets margin to 20px on all sides between 768px and 1023px |
.margin-md-down |
sets margin to 20px on all sides at 767px and below |
.margin-md-up |
sets margin to 20px on all sides at 768px and above |
.margin-auto-md |
sets margin to auto on all sides between 768px and 1023px |
.margin-auto-md-down |
sets margin to auto on all sides at 767px and below |
.margin-auto-md-up |
sets margin to auto on all sides at 768px and above |
.margin-b-md |
sets margin to 20px on bottom between 768px and 1023px |
.margin-b-md-down |
sets margin to 20px on bottom at 767px and below |
.margin-b-md-up |
sets margin to 20px on bottom at 768px and above |
.margin-t-md |
sets margin to 20px on top between 768px and 1023px |
.margin-t-md-down |
sets margin to 20px on top at 767px and below |
.margin-t-md-up |
sets margin to 20px on top at 768px and above |
.margin-l-md |
sets margin to 20px on left between 768px and 1023px |
.margin-l-md-down |
sets margin to 20px on left at 767px and below |
.margin-l-md-up |
sets margin to 20px on left at 768px and above |
.margin-r-md |
sets margin to 20px on right between 768px and 1023px |
.margin-r-md-down |
sets margin to 20px on right at 767px and below |
.margin-r-md-up |
sets margin to 20px on right at 768px and above |
.margin-0-md |
sets margin to 0px on all sides between 768px and 1023px |
.margin-0-md-down |
sets margin to 0px on all sides at 767px and below |
.margin-0-md-up |
sets margin to 0px on all sides at 768px and above |
.margin-0-b-md |
sets margin to 0px on bottom between 768px and 1023px |
.margin-0-b-md-down |
sets margin to 0px on bottom at 767px and below |
.margin-0-b-md-up |
sets margin to 0px on bottom at 768px and above |
.margin-0-t-md |
sets margin to 0px on top between 768px and 1023px |
.margin-0-t-md-down |
sets margin to 0px on top at 767px and below |
.margin-0-t-md-up |
sets margin to 0px on top at 768px and above |
.margin-0-l-md |
sets margin to 0px on left between 768px and 1023px |
.margin-0-l-md-down |
sets margin to 0px on left at 767px and below |
.margin-0-l-md-up |
sets margin to 0px on left at 768px and above |
.margin-0-r-md |
sets margin to 0px on right between 768px and 1023px |
.margin-0-r-md-down |
sets margin to 0px on right at 767px and below |
.margin-0-r-md-up |
sets margin to 0px on right at 768px and above |
.margin-1-md |
sets margin to 10px on all sides between 768px and 1023px |
.margin-1-md-down |
sets margin to 10px on all sides at 767px and below |
.margin-1-md-up |
sets margin to 10px on all sides at 768px and above |
.margin-1-b-md |
sets margin to 10px on bottom between 768px and 1023px |
.margin-1-b-md-down |
sets margin to 10px on bottom at 767px and below |
.margin-1-b-md-up |
sets margin to 10px on bottom at 768px and above |
.margin-1-t-md |
sets margin to 10px on top between 768px and 1023px |
.margin-1-t-md-down |
sets margin to 10px on top at 767px and below |
.margin-1-t-md-up |
sets margin to 10px on top at 768px and above |
.margin-1-l-md |
sets margin to 10px on left between 768px and 1023px |
.margin-1-l-md-down |
sets margin to 10px on left at 767px and below |
.margin-1-l-md-up |
sets margin to 10px on left at 768px and above |
.margin-1-r-md |
sets margin to 10px on right between 768px and 1023px |
.margin-1-r-md-down |
sets margin to 10px on right at 767px and below |
.margin-1-r-md-up |
sets margin to 10px on right at 768px and above |
.margin-2-md |
sets margin to 20px on all sides between 768px and 1023px |
.margin-2-md-down |
sets margin to 20px on all sides at 767px and below |
.margin-2-md-up |
sets margin to 20px on all sides at 768px and above |
.margin-2-b-md |
sets margin to 20px on bottom between 768px and 1023px |
.margin-2-b-md-down |
sets margin to 20px on bottom at 767px and below |
.margin-2-b-md-up |
sets margin to 20px on bottom at 768px and above |
.margin-2-t-md |
sets margin to 20px on top between 768px and 1023px |
.margin-2-t-md-down |
sets margin to 20px on top at 767px and below |
.margin-2-t-md-up |
sets margin to 20px on top at 768px and above |
.margin-2-l-md |
sets margin to 20px on left between 768px and 1023px |
.margin-2-l-md-down |
sets margin to 20px on left at 767px and below |
.margin-2-l-md-up |
sets margin to 20px on left at 768px and above |
.margin-2-r-md |
sets margin to 20px on right between 768px and 1023px |
.margin-2-r-md-down |
sets margin to 20px on right at 767px and below |
.margin-2-r-md-up |
sets margin to 20px on right at 768px and above |
.margin-3-md |
sets margin to 30px on all sides between 768px and 1023px |
.margin-3-md-down |
sets margin to 30px on all sides at 767px and below |
.margin-3-md-up |
sets margin to 30px on all sides at 768px and above |
.margin-3-b-md |
sets margin to 30px on bottom between 768px and 1023px |
.margin-3-b-md-down |
sets margin to 30px on bottom at 767px and below |
.margin-3-b-md-up |
sets margin to 30px on bottom at 768px and above |
.margin-3-t-md |
sets margin to 30px on top between 768px and 1023px |
.margin-3-t-md-down |
sets margin to 30px on top at 767px and below |
.margin-3-t-md-up |
sets margin to 30px on top at 768px and above |
.margin-3-l-md |
sets margin to 30px on left between 768px and 1023px |
.margin-3-l-md-down |
sets margin to 30px on left at 767px and below |
.margin-3-l-md-up |
sets margin to 30px on left at 768px and above |
.margin-3-r-md |
sets margin to 30px on right between 768px and 1023px |
.margin-3-r-md-down |
sets margin to 30px on right at 767px and below |
.margin-3-r-md-up |
sets margin to 30px on right at 768px and above |
Responsive Margin - Large (1024PX)
| Selector | Usage |
|---|---|
.margin-lg |
sets margin to 20px on all sides between 1024px and 1279px |
.margin-lg-down |
sets margin to 20px on all sides at 1023px and below |
.margin-lg-up |
sets margin to 20px on all sides at 1024px and above |
.margin-auto-lg |
sets margin to auto on all sides between 1024px and 1279px |
.margin-auto-lg-down |
sets margin to auto on all sides at 1023px and below |
.margin-auto-lg-up |
sets margin to auto on all sides at 1024px and above |
.margin-b-lg |
sets margin to 20px on bottom between 1024px and 1279px |
.margin-b-lg-down |
sets margin to 20px on bottom at 1023px and below |
.margin-b-lg-up |
sets margin to 20px on bottom at 1024px and above |
.margin-t-lg |
sets margin to 20px on top between 1024px and 1279px |
.margin-t-lg-down |
sets margin to 20px on top at 1023px and below |
.margin-t-lg-up |
sets margin to 20px on top at 1024px and above |
.margin-l-lg |
sets margin to 20px on left between 1024px and 1279px |
.margin-l-lg-down |
sets margin to 20px on left at 1023px and below |
.margin-l-lg-up |
sets margin to 20px on left at 1024px and above |
.margin-r-lg |
sets margin to 20px on right between 1024px and 1279px |
.margin-r-lg-down |
sets margin to 20px on right at 1023px and below |
.margin-r-lg-up |
sets margin to 20px on right at 1024px and above |
.margin-0-lg |
sets margin to 0px on all sides between 1024px and 1279px |
.margin-0-lg-down |
sets margin to 0px on all sides at 1023px and below |
.margin-0-lg-up |
sets margin to 0px on all sides at 1024px and above |
.margin-0-b-lg |
sets margin to 0px on bottom between 1024px and 1279px |
.margin-0-b-lg-down |
sets margin to 0px on bottom at 1023px and below |
.margin-0-b-lg-up |
sets margin to 0px on bottom at 1024px and above |
.margin-0-t-lg |
sets margin to 0px on top between 1024px and 1279px |
.margin-0-t-lg-down |
sets margin to 0px on top at 1023px and below |
.margin-0-t-lg-up |
sets margin to 0px on top at 1024px and above |
.margin-0-l-lg |
sets margin to 0px on left between 1024px and 1279px |
.margin-0-l-lg-down |
sets margin to 0px on left at 1023px and below |
.margin-0-l-lg-up |
sets margin to 0px on left at 1024px and above |
.margin-0-r-lg |
sets margin to 0px on right between 1024px and 1279px |
.margin-0-r-lg-down |
sets margin to 0px on right at 1023px and below |
.margin-0-r-lg-up |
sets margin to 0px on right at 1024px and above |
.margin-1-lg |
sets margin to 10px on all sides between 1024px and 1279px |
.margin-1-lg-down |
sets margin to 10px on all sides at 1023px and below |
.margin-1-lg-up |
sets margin to 10px on all sides at 1024px and above |
.margin-1-b-lg |
sets margin to 10px on bottom between 1024px and 1279px |
.margin-1-b-lg-down |
sets margin to 10px on bottom at 1023px and below |
.margin-1-b-lg-up |
sets margin to 10px on bottom at 1024px and above |
.margin-1-t-lg |
sets margin to 10px on top between 1024px and 1279px |
.margin-1-t-lg-down |
sets margin to 10px on top at 1023px and below |
.margin-1-t-lg-up |
sets margin to 10px on top at 1024px and above |
.margin-1-l-lg |
sets margin to 10px on left between 1024px and 1279px |
.margin-1-l-lg-down |
sets margin to 10px on left at 1023px and below |
.margin-1-l-lg-up |
sets margin to 10px on left at 1024px and above |
.margin-1-r-lg |
sets margin to 10px on right between 1024px and 1279px |
.margin-1-r-lg-down |
sets margin to 10px on right at 1023px and below |
.margin-1-r-lg-up |
sets margin to 10px on right at 1024px and above |
.margin-2-lg |
sets margin to 20px on all sides between 1024px and 1279px |
.margin-2-lg-down |
sets margin to 20px on all sides at 1023px and below |
.margin-2-lg-up |
sets margin to 20px on all sides at 1024px and above |
.margin-2-b-lg |
sets margin to 20px on bottom between 1024px and 1279px |
.margin-2-b-lg-down |
sets margin to 20px on bottom at 1023px and below |
.margin-2-b-lg-up |
sets margin to 20px on bottom at 1024px and above |
.margin-2-t-lg |
sets margin to 20px on top between 1024px and 1279px |
.margin-2-t-lg-down |
sets margin to 20px on top at 1023px and below |
.margin-2-t-lg-up |
sets margin to 20px on top at 1024px and above |
.margin-2-l-lg |
sets margin to 20px on left between 1024px and 1279px |
.margin-2-l-lg-down |
sets margin to 20px on left at 1023px and below |
.margin-2-l-lg-up |
sets margin to 20px on left at 1024px and above |
.margin-2-r-lg |
sets margin to 20px on right between 1024px and 1279px |
.margin-2-r-lg-down |
sets margin to 20px on right at 1023px and below |
.margin-2-r-lg-up |
sets margin to 20px on right at 1024px and above |
.margin-3-lg |
sets margin to 30px on all sides between 1024px and 1279px |
.margin-3-lg-down |
sets margin to 30px on all sides at 1023px and below |
.margin-3-lg-up |
sets margin to 30px on all sides at 1024px and above |
.margin-3-b-lg |
sets margin to 30px on bottom between 1024px and 1279px |
.margin-3-b-lg-down |
sets margin to 30px on bottom at 1023px and below |
.margin-3-b-lg-up |
sets margin to 30px on bottom at 1024px and above |
.margin-3-t-lg |
sets margin to 30px on top between 1024px and 1279px |
.margin-3-t-lg-down |
sets margin to 30px on top at 1023px and below |
.margin-3-t-lg-up |
sets margin to 30px on top at 1024px and above |
.margin-3-l-lg |
sets margin to 30px on left between 1024px and 1279px |
.margin-3-l-lg-down |
sets margin to 30px on left at 1023px and below |
.margin-3-l-lg-up |
sets margin to 30px on left at 1024px and above |
.margin-3-r-lg |
sets margin to 30px on right between 1024px and 1279px |
.margin-3-r-lg-down |
sets margin to 30px on right at 1023px and below |
.margin-3-r-lg-up |
sets margin to 30px on right at 1024px and above |
Responsive Margin - Extra Large (1280PX)
| Selector | Usage |
|---|---|
.margin-xl |
sets margin to 20px on all sides between 1280px and 1599px |
.margin-xl-down |
sets margin to 20px on all sides at 1279px and below |
.margin-xl-up |
sets margin to 20px on all sides at 1280px and above |
.margin-auto-xl |
sets margin to auto on all sides between 1280px and 1599px |
.margin-auto-xl-down |
sets margin to auto on all sides at 1279px and below |
.margin-auto-xl-up |
sets margin to auto on all sides at 1280px and above |
.margin-b-xl |
sets margin to 20px on bottom between 1280px and 1599px |
.margin-b-xl-down |
sets margin to 20px on bottom at 1279px and below |
.margin-b-xl-up |
sets margin to 20px on bottom at 1280px and above |
.margin-t-xl |
sets margin to 20px on top between 1280px and 1599px |
.margin-t-xl-down |
sets margin to 20px on top at 1279px and below |
.margin-t-xl-up |
sets margin to 20px on top at 1280px and above |
.margin-l-xl |
sets margin to 20px on left between 1280px and 1599px |
.margin-l-xl-down |
sets margin to 20px on left at 1279px and below |
.margin-l-xl-up |
sets margin to 20px on left at 1280px and above |
.margin-r-xl |
sets margin to 20px on right between 1280px and 1599px |
.margin-r-xl-down |
sets margin to 20px on right at 1279px and below |
.margin-r-xl-up |
sets margin to 20px on right at 1280px and above |
.margin-0-xl |
sets margin to 0px on all sides between 1280px and 1599px |
.margin-0-xl-down |
sets margin to 0px on all sides at 1279px and below |
.margin-0-xl-up |
sets margin to 0px on all sides at 1280px and above |
.margin-0-b-xl |
sets margin to 0px on bottom between 1280px and 1599px |
.margin-0-b-xl-down |
sets margin to 0px on bottom at 1279px and below |
.margin-0-b-xl-up |
sets margin to 0px on bottom at 1280px and above |
.margin-0-t-xl |
sets margin to 0px on top between 1280px and 1599px |
.margin-0-t-xl-down |
sets margin to 0px on top at 1279px and below |
.margin-0-t-xl-up |
sets margin to 0px on top at 1280px and above |
.margin-0-l-xl |
sets margin to 0px on left between 1280px and 1599px |
.margin-0-l-xl-down |
sets margin to 0px on left at 1279px and below |
.margin-0-l-xl-up |
sets margin to 0px on left at 1280px and above |
.margin-0-r-xl |
sets margin to 0px on right between 1280px and 1599px |
.margin-0-r-xl-down |
sets margin to 0px on right at 1279px and below |
.margin-0-r-xl-up |
sets margin to 0px on right at 1280px and above |
.margin-1-xl |
sets margin to 10px on all sides between 1280px and 1599px |
.margin-1-xl-down |
sets margin to 10px on all sides at 1279px and below |
.margin-1-xl-up |
sets margin to 10px on all sides at 1280px and above |
.margin-1-b-xl |
sets margin to 10px on bottom between 1280px and 1599px |
.margin-1-b-xl-down |
sets margin to 10px on bottom at 1279px and below |
.margin-1-b-xl-up |
sets margin to 10px on bottom at 1280px and above |
.margin-1-t-xl |
sets margin to 10px on top between 1280px and 1599px |
.margin-1-t-xl-down |
sets margin to 10px on top at 1279px and below |
.margin-1-t-xl-up |
sets margin to 10px on top at 1280px and above |
.margin-1-l-xl |
sets margin to 10px on left between 1280px and 1599px |
.margin-1-l-xl-down |
sets margin to 10px on left at 1279px and below |
.margin-1-l-xl-up |
sets margin to 10px on left at 1280px and above |
.margin-1-r-xl |
sets margin to 10px on right between 1280px and 1599px |
.margin-1-r-xl-down |
sets margin to 10px on right at 1279px and below |
.margin-1-r-xl-up |
sets margin to 10px on right at 1280px and above |
.margin-2-xl |
sets margin to 20px on all sides between 1280px and 1599px |
.margin-2-xl-down |
sets margin to 20px on all sides at 1279px and below |
.margin-2-xl-up |
sets margin to 20px on all sides at 1280px and above |
.margin-2-b-xl |
sets margin to 20px on bottom between 1280px and 1599px |
.margin-2-b-xl-down |
sets margin to 20px on bottom at 1279px and below |
.margin-2-b-xl-up |
sets margin to 20px on bottom at 1280px and above |
.margin-2-t-xl |
sets margin to 20px on top between 1280px and 1599px |
.margin-2-t-xl-down |
sets margin to 20px on top at 1279px and below |
.margin-2-t-xl-up |
sets margin to 20px on top at 1280px and above |
.margin-2-l-xl |
sets margin to 20px on left between 1280px and 1599px |
.margin-2-l-xl-down |
sets margin to 20px on left at 1279px and below |
.margin-2-l-xl-up |
sets margin to 20px on left at 1280px and above |
.margin-2-r-xl |
sets margin to 20px on right between 1280px and 1599px |
.margin-2-r-xl-down |
sets margin to 20px on right at 1279px and below |
.margin-2-r-xl-up |
sets margin to 20px on right at 1280px and above |
.margin-3-xl |
sets margin to 30px on all sides between 1280px and 1599px |
.margin-3-xl-down |
sets margin to 30px on all sides at 1279px and below |
.margin-3-xl-up |
sets margin to 30px on all sides at 1280px and above |
.margin-3-b-xl |
sets margin to 30px on bottom between 1280px and 1599px |
.margin-3-b-xl-down |
sets margin to 30px on bottom at 1279px and below |
.margin-3-b-xl-up |
sets margin to 30px on bottom at 1280px and above |
.margin-3-t-xl |
sets margin to 30px on top between 1280px and 1599px |
.margin-3-t-xl-down |
sets margin to 30px on top at 1279px and below |
.margin-3-t-xl-up |
sets margin to 30px on top at 1280px and above |
.margin-3-l-xl |
sets margin to 30px on left between 1280px and 1599px |
.margin-3-l-xl-down |
sets margin to 30px on left at 1279px and below |
.margin-3-l-xl-up |
sets margin to 30px on left at 1280px and above |
.margin-3-r-xl |
sets margin to 30px on right between 1280px and 1599px |
.margin-3-r-xl-down |
sets margin to 30px on right at 1279px and below |
.margin-3-r-xl-up |
sets margin to 30px on right at 1280px and above |
Pad #
| Selector | Usage |
|---|---|
.pad |
sets padding to 20px on all sides |
.pad-b |
sets padding to 20px on bottom |
.pad-t |
sets padding to 20px on top |
.pad-l |
sets padding to 20px on left |
.pad-r |
sets padding to 20px on right |
.pad-0 |
sets padding to 0px on all sides |
.pad-0-b |
sets padding to 0px on bottom |
.pad-0-t |
sets padding to 0px on top |
.pad-0-l |
sets padding to 0px on left |
.pad-0-r |
sets padding to 0px on right |
.pad-1 |
sets padding to 10px on all sides |
.pad-1-b |
sets padding to 10px on bottom |
.pad-1-t |
sets padding to 10px on top |
.pad-1-l |
sets padding to 10px on left |
.pad-1-r |
sets padding to 10px on right |
.pad-2 |
sets padding to 20px on all sides |
.pad-2-b |
sets padding to 20px on bottom |
.pad-2-t |
sets padding to 20px on top |
.pad-2-l |
sets padding to 20px on left |
.pad-2-r |
sets padding to 20px on right |
.pad-3 |
sets padding to 30px on all sides |
.pad-3-b |
sets padding to 30px on bottom |
.pad-3-t |
sets padding to 30px on top |
.pad-3-l |
sets padding to 30px on left |
.pad-3-r |
sets padding to 30px on right |
.pad-4 |
sets padding to 40px on all sides |
.pad-4-b |
sets padding to 40px on bottom |
.pad-4-t |
sets padding to 40px on top |
.pad-4-l |
sets padding to 40px on left |
.pad-4-r |
sets padding to 40px on right |
.pad-5 |
sets padding to 50px on all sides |
.pad-5-b |
sets padding to 50px on bottom |
.pad-5-t |
sets padding to 50px on top |
.pad-5-l |
sets padding to 50px on left |
.pad-5-r |
sets padding to 50px on right |
Responsive Pad - Small (480PX)
| Selector | Usage |
|---|---|
.pad-sm |
sets padding to 20px on all sides between 480px and 767px |
.pad-sm-down |
sets padding to 20px on all sides at 479px and below |
.pad-sm-up |
sets padding to 20px on all sides at 480px and above |
.pad-b-sm |
sets padding to 20px on bottom between 480px and 767px |
.pad-b-sm-down |
sets padding to 20px on bottom at 479px and below |
.pad-b-sm-up |
sets padding to 20px on bottom at 480px and above |
.pad-t-sm |
sets padding to 20px on top between 480px and 767px |
.pad-t-sm-down |
sets padding to 20px on top at 479px and below |
.pad-t-sm-up |
sets padding to 20px on top at 480px and above |
.pad-l-sm |
sets padding to 20px on left between 480px and 767px |
.pad-l-sm-down |
sets padding to 20px on left at 479px and below |
.pad-l-sm-up |
sets padding to 20px on left at 480px and above |
.pad-r-sm |
sets padding to 20px on right between 480px and 767px |
.pad-r-sm-down |
sets padding to 20px on right at 479px and below |
.pad-r-sm-up |
sets padding to 20px on right at 480px and above |
.pad-0-sm |
sets padding to 0px on all sides between 480px and 767px |
.pad-0-sm-down |
sets padding to 0px on all sides at 479px and below |
.pad-0-sm-up |
sets padding to 0px on all sides at 480px and above |
.pad-0-b-sm |
sets padding to 0px on bottom between 480px and 767px |
.pad-0-b-sm-down |
sets padding to 0px on bottom at 479px and below |
.pad-0-b-sm-up |
sets padding to 0px on bottom at 480px and above |
.pad-0-t-sm |
sets padding to 0px on top between 480px and 767px |
.pad-0-t-sm-down |
sets padding to 0px on top at 479px and below |
.pad-0-t-sm-up |
sets padding to 0px on top at 480px and above |
.pad-0-l-sm |
sets padding to 0px on left between 480px and 767px |
.pad-0-l-sm-down |
sets padding to 0px on left at 479px and below |
.pad-0-l-sm-up |
sets padding to 0px on left at 480px and above |
.pad-0-r-sm |
sets padding to 0px on right between 480px and 767px |
.pad-0-r-sm-down |
sets padding to 0px on right at 479px and below |
.pad-0-r-sm-up |
sets padding to 0px on right at 480px and above |
.pad-1-sm |
sets padding to 10px on all sides between 480px and 767px |
.pad-1-sm-down |
sets padding to 10px on all sides at 479px and below |
.pad-1-sm-up |
sets padding to 10px on all sides at 480px and above |
.pad-1-b-sm |
sets padding to 10px on bottom between 480px and 767px |
.pad-1-b-sm-down |
sets padding to 10px on bottom at 479px and below |
.pad-1-b-sm-up |
sets padding to 10px on bottom at 480px and above |
.pad-1-t-sm |
sets padding to 10px on top between 480px and 767px |
.pad-1-t-sm-down |
sets padding to 10px on top at 479px and below |
.pad-1-t-sm-up |
sets padding to 10px on top at 480px and above |
.pad-1-l-sm |
sets padding to 10px on left between 480px and 767px |
.pad-1-l-sm-down |
sets padding to 10px on left at 479px and below |
.pad-1-l-sm-up |
sets padding to 10px on left at 480px and above |
.pad-1-r-sm |
sets padding to 10px on right between 480px and 767px |
.pad-1-r-sm-down |
sets padding to 10px on right at 479px and below |
.pad-1-r-sm-up |
sets padding to 10px on right at 480px and above |
.pad-2-sm |
sets padding to 20px on all sides between 480px and 767px |
.pad-2-sm-down |
sets padding to 20px on all sides at 479px and below |
.pad-2-sm-up |
sets padding to 20px on all sides at 480px and above |
.pad-2-b-sm |
sets padding to 20px on bottom between 480px and 767px |
.pad-2-b-sm-down |
sets padding to 20px on bottom at 479px and below |
.pad-2-b-sm-up |
sets padding to 20px on bottom at 480px and above |
.pad-2-t-sm |
sets padding to 20px on top between 480px and 767px |
.pad-2-t-sm-down |
sets padding to 20px on top at 479px and below |
.pad-2-t-sm-up |
sets padding to 20px on top at 480px and above |
.pad-2-l-sm |
sets padding to 20px on left between 480px and 767px |
.pad-2-l-sm-down |
sets padding to 20px on left at 479px and below |
.pad-2-l-sm-up |
sets padding to 20px on left at 480px and above |
.pad-2-r-sm |
sets padding to 20px on right between 480px and 767px |
.pad-2-r-sm-down |
sets padding to 20px on right at 479px and below |
.pad-2-r-sm-up |
sets padding to 20px on right at 480px and above |
.pad-3-sm |
sets padding to 30px on all sides between 480px and 767px |
.pad-3-sm-down |
sets padding to 30px on all sides at 479px and below |
.pad-3-sm-up |
sets padding to 30px on all sides at 480px and above |
.pad-3-b-sm |
sets padding to 30px on bottom between 480px and 767px |
.pad-3-b-sm-down |
sets padding to 30px on bottom at 479px and below |
.pad-3-b-sm-up |
sets padding to 30px on bottom at 480px and above |
.pad-3-t-sm |
sets padding to 30px on top between 480px and 767px |
.pad-3-t-sm-down |
sets padding to 30px on top at 479px and below |
.pad-3-t-sm-up |
sets padding to 30px on top at 480px and above |
.pad-3-l-sm |
sets padding to 30px on left between 480px and 767px |
.pad-3-l-sm-down |
sets padding to 30px on left at 479px and below |
.pad-3-l-sm-up |
sets padding to 30px on left at 480px and above |
.pad-3-r-sm |
sets padding to 30px on right between 480px and 767px |
.pad-3-r-sm-down |
sets padding to 30px on right at 479px and below |
.pad-3-r-sm-up |
sets padding to 30px on right at 480px and above |
.pad-4-sm |
sets padding to 40px on all sides between 480px and 767px |
.pad-4-sm-down |
sets padding to 40px on all sides at 479px and below |
.pad-4-sm-up |
sets padding to 40px on all sides at 480px and above |
.pad-4-b-sm |
sets padding to 40px on bottom between 480px and 767px |
.pad-4-b-sm-down |
sets padding to 40px on bottom at 479px and below |
.pad-4-b-sm-up |
sets padding to 40px on bottom at 480px and above |
.pad-4-t-sm |
sets padding to 40px on top between 480px and 767px |
.pad-4-t-sm-down |
sets padding to 40px on top at 479px and below |
.pad-4-t-sm-up |
sets padding to 40px on top at 480px and above |
.pad-4-l-sm |
sets padding to 40px on left between 480px and 767px |
.pad-4-l-sm-down |
sets padding to 40px on left at 479px and below |
.pad-4-l-sm-up |
sets padding to 40px on left at 480px and above |
.pad-4-r-sm |
sets padding to 40px on right between 480px and 767px |
.pad-4-r-sm-down |
sets padding to 40px on right at 479px and below |
.pad-4-r-sm-up |
sets padding to 40px on right at 480px and above |
.pad-5-sm |
sets padding to 50px on all sides between 480px and 767px |
.pad-5-sm-down |
sets padding to 50px on all sides at 479px and below |
.pad-5-sm-up |
sets padding to 50px on all sides at 480px and above |
.pad-5-b-sm |
sets padding to 50px on bottom between 480px and 767px |
.pad-5-b-sm-down |
sets padding to 50px on bottom at 479px and below |
.pad-5-b-sm-up |
sets padding to 50px on bottom at 480px and above |
.pad-5-t-sm |
sets padding to 50px on top between 480px and 767px |
.pad-5-t-sm-down |
sets padding to 50px on top at 479px and below |
.pad-5-t-sm-up |
sets padding to 50px on top at 480px and above |
.pad-5-l-sm |
sets padding to 50px on left between 480px and 767px |
.pad-5-l-sm-down |
sets padding to 50px on left at 479px and below |
.pad-5-l-sm-up |
sets padding to 50px on left at 480px and above |
.pad-5-r-sm |
sets padding to 50px on right between 480px and 767px |
.pad-5-r-sm-down |
sets padding to 50px on right at 479px and below |
.pad-5-r-sm-up |
sets padding to 50px on right at 480px and above |
Responsive Pad - Medium (768PX)
| Selector | Usage |
|---|---|
.pad-md |
sets padding to 20px on all sides between 768px and 1023px |
.pad-md-down |
sets padding to 20px on all sides at 767px and below |
.pad-md-up |
sets padding to 20px on all sides at 768px and above |
.pad-b-md |
sets padding to 20px on bottom between 768px and 1023px |
.pad-b-md-down |
sets padding to 20px on bottom at 767px and below |
.pad-b-md-up |
sets padding to 20px on bottom at 768px and above |
.pad-t-md |
sets padding to 20px on top between 768px and 1023px |
.pad-t-md-down |
sets padding to 20px on top at 767px and below |
.pad-t-md-up |
sets padding to 20px on top at 768px and above |
.pad-l-md |
sets padding to 20px on left between 768px and 1023px |
.pad-l-md-down |
sets padding to 20px on left at 767px and below |
.pad-l-md-up |
sets padding to 20px on left at 768px and above |
.pad-r-md |
sets padding to 20px on right between 768px and 1023px |
.pad-r-md-down |
sets padding to 20px on right at 767px and below |
.pad-r-md-up |
sets padding to 20px on right at 768px and above |
.pad-0-md |
sets padding to 0px on all sides between 768px and 1023px |
.pad-0-md-down |
sets padding to 0px on all sides at 767px and below |
.pad-0-md-up |
sets padding to 0px on all sides at 768px and above |
.pad-0-b-md |
sets padding to 0px on bottom between 768px and 1023px |
.pad-0-b-md-down |
sets padding to 0px on bottom at 767px and below |
.pad-0-b-md-up |
sets padding to 0px on bottom at 768px and above |
.pad-0-t-md |
sets padding to 0px on top between 768px and 1023px |
.pad-0-t-md-down |
sets padding to 0px on top at 767px and below |
.pad-0-t-md-up |
sets padding to 0px on top at 768px and above |
.pad-0-l-md |
sets padding to 0px on left between 768px and 1023px |
.pad-0-l-md-down |
sets padding to 0px on left at 767px and below |
.pad-0-l-md-up |
sets padding to 0px on left at 768px and above |
.pad-0-r-md |
sets padding to 0px on right between 768px and 1023px |
.pad-0-r-md-down |
sets padding to 0px on right at 767px and below |
.pad-0-r-md-up |
sets padding to 0px on right at 768px and above |
.pad-1-md |
sets padding to 10px on all sides between 768px and 1023px |
.pad-1-md-down |
sets padding to 10px on all sides at 767px and below |
.pad-1-md-up |
sets padding to 10px on all sides at 768px and above |
.pad-1-b-md |
sets padding to 10px on bottom between 768px and 1023px |
.pad-1-b-md-down |
sets padding to 10px on bottom at 767px and below |
.pad-1-b-md-up |
sets padding to 10px on bottom at 768px and above |
.pad-1-t-md |
sets padding to 10px on top between 768px and 1023px |
.pad-1-t-md-down |
sets padding to 10px on top at 767px and below |
.pad-1-t-md-up |
sets padding to 10px on top at 768px and above |
.pad-1-l-md |
sets padding to 10px on left between 768px and 1023px |
.pad-1-l-md-down |
sets padding to 10px on left at 767px and below |
.pad-1-l-md-up |
sets padding to 10px on left at 768px and above |
.pad-1-r-md |
sets padding to 10px on right between 768px and 1023px |
.pad-1-r-md-down |
sets padding to 10px on right at 767px and below |
.pad-1-r-md-up |
sets padding to 10px on right at 768px and above |
.pad-2-md |
sets padding to 20px on all sides between 768px and 1023px |
.pad-2-md-down |
sets padding to 20px on all sides at 767px and below |
.pad-2-md-up |
sets padding to 20px on all sides at 768px and above |
.pad-2-b-md |
sets padding to 20px on bottom between 768px and 1023px |
.pad-2-b-md-down |
sets padding to 20px on bottom at 767px and below |
.pad-2-b-md-up |
sets padding to 20px on bottom at 768px and above |
.pad-2-t-md |
sets padding to 20px on top between 768px and 1023px |
.pad-2-t-md-down |
sets padding to 20px on top at 767px and below |
.pad-2-t-md-up |
sets padding to 20px on top at 768px and above |
.pad-2-l-md |
sets padding to 20px on left between 768px and 1023px |
.pad-2-l-md-down |
sets padding to 20px on left at 767px and below |
.pad-2-l-md-up |
sets padding to 20px on left at 768px and above |
.pad-2-r-md |
sets padding to 20px on right between 768px and 1023px |
.pad-2-r-md-down |
sets padding to 20px on right at 767px and below |
.pad-2-r-md-up |
sets padding to 20px on right at 768px and above |
.pad-3-md |
sets padding to 30px on all sides between 768px and 1023px |
.pad-3-md-down |
sets padding to 30px on all sides at 767px and below |
.pad-3-md-up |
sets padding to 30px on all sides at 768px and above |
.pad-3-b-md |
sets padding to 30px on bottom between 768px and 1023px |
.pad-3-b-md-down |
sets padding to 30px on bottom at 767px and below |
.pad-3-b-md-up |
sets padding to 30px on bottom at 768px and above |
.pad-3-t-md |
sets padding to 30px on top between 768px and 1023px |
.pad-3-t-md-down |
sets padding to 30px on top at 767px and below |
.pad-3-t-md-up |
sets padding to 30px on top at 768px and above |
.pad-3-l-md |
sets padding to 30px on left between 768px and 1023px |
.pad-3-l-md-down |
sets padding to 30px on left at 767px and below |
.pad-3-l-md-up |
sets padding to 30px on left at 768px and above |
.pad-3-r-md |
sets padding to 30px on right between 768px and 1023px |
.pad-3-r-md-down |
sets padding to 30px on right at 767px and below |
.pad-3-r-md-up |
sets padding to 30px on right at 768px and above |
.pad-4-md |
sets padding to 40px on all sides between 768px and 1023px |
.pad-4-md-down |
sets padding to 40px on all sides at 767px and below |
.pad-4-md-up |
sets padding to 40px on all sides at 768px and above |
.pad-4-b-md |
sets padding to 40px on bottom between 768px and 1023px |
.pad-4-b-md-down |
sets padding to 40px on bottom at 767px and below |
.pad-4-b-md-up |
sets padding to 40px on bottom at 768px and above |
.pad-4-t-md |
sets padding to 40px on top between 768px and 1023px |
.pad-4-t-md-down |
sets padding to 40px on top at 767px and below |
.pad-4-t-md-up |
sets padding to 40px on top at 768px and above |
.pad-4-l-md |
sets padding to 40px on left between 768px and 1023px |
.pad-4-l-md-down |
sets padding to 40px on left at 767px and below |
.pad-4-l-md-up |
sets padding to 40px on left at 768px and above |
.pad-4-r-md |
sets padding to 40px on right between 768px and 1023px |
.pad-4-r-md-down |
sets padding to 40px on right at 767px and below |
.pad-4-r-md-up |
sets padding to 40px on right at 768px and above |
.pad-5-md |
sets padding to 50px on all sides between 768px and 1023px |
.pad-5-md-down |
sets padding to 50px on all sides at 767px and below |
.pad-5-md-up |
sets padding to 50px on all sides at 768px and above |
.pad-5-b-md |
sets padding to 50px on bottom between 768px and 1023px |
.pad-5-b-md-down |
sets padding to 50px on bottom at 767px and below |
.pad-5-b-md-up |
sets padding to 50px on bottom at 768px and above |
.pad-5-t-md |
sets padding to 50px on top between 768px and 1023px |
.pad-5-t-md-down |
sets padding to 50px on top at 767px and below |
.pad-5-t-md-up |
sets padding to 50px on top at 768px and above |
.pad-5-l-md |
sets padding to 50px on left between 768px and 1023px |
.pad-5-l-md-down |
sets padding to 50px on left at 767px and below |
.pad-5-l-md-up |
sets padding to 50px on left at 768px and above |
.pad-5-r-md |
sets padding to 50px on right between 768px and 1023px |
.pad-5-r-md-down |
sets padding to 50px on right at 767px and below |
.pad-5-r-md-up |
sets padding to 50px on right at 768px and above |
Responsive Pad - Large (1024PX)
| Selector | Usage |
|---|---|
.pad-lg |
sets padding to 20px on all sides between 1024px and 1279px |
.pad-lg-down |
sets padding to 20px on all sides at 1023px and below |
.pad-lg-up |
sets padding to 20px on all sides at 1024px and above |
.pad-b-lg |
sets padding to 20px on bottom between 1024px and 1279px |
.pad-b-lg-down |
sets padding to 20px on bottom at 1023px and below |
.pad-b-lg-up |
sets padding to 20px on bottom at 1024px and above |
.pad-t-lg |
sets padding to 20px on top between 1024px and 1279px |
.pad-t-lg-down |
sets padding to 20px on top at 1023px and below |
.pad-t-lg-up |
sets padding to 20px on top at 1024px and above |
.pad-l-lg |
sets padding to 20px on left between 1024px and 1279px |
.pad-l-lg-down |
sets padding to 20px on left at 1023px and below |
.pad-l-lg-up |
sets padding to 20px on left at 1024px and above |
.pad-r-lg |
sets padding to 20px on right between 1024px and 1279px |
.pad-r-lg-down |
sets padding to 20px on right at 1023px and below |
.pad-r-lg-up |
sets padding to 20px on right at 1024px and above |
.pad-0-lg |
sets padding to 0px on all sides between 1024px and 1279px |
.pad-0-lg-down |
sets padding to 0px on all sides at 1023px and below |
.pad-0-lg-up |
sets padding to 0px on all sides at 1024px and above |
.pad-0-b-lg |
sets padding to 0px on bottom between 1024px and 1279px |
.pad-0-b-lg-down |
sets padding to 0px on bottom at 1023px and below |
.pad-0-b-lg-up |
sets padding to 0px on bottom at 1024px and above |
.pad-0-t-lg |
sets padding to 0px on top between 1024px and 1279px |
.pad-0-t-lg-down |
sets padding to 0px on top at 1023px and below |
.pad-0-t-lg-up |
sets padding to 0px on top at 1024px and above |
.pad-0-l-lg |
sets padding to 0px on left between 1024px and 1279px |
.pad-0-l-lg-down |
sets padding to 0px on left at 1023px and below |
.pad-0-l-lg-up |
sets padding to 0px on left at 1024px and above |
.pad-0-r-lg |
sets padding to 0px on right between 1024px and 1279px |
.pad-0-r-lg-down |
sets padding to 0px on right at 1023px and below |
.pad-0-r-lg-up |
sets padding to 0px on right at 1024px and above |
.pad-1-lg |
sets padding to 10px on all sides between 1024px and 1279px |
.pad-1-lg-down |
sets padding to 10px on all sides at 1023px and below |
.pad-1-lg-up |
sets padding to 10px on all sides at 1024px and above |
.pad-1-b-lg |
sets padding to 10px on bottom between 1024px and 1279px |
.pad-1-b-lg-down |
sets padding to 10px on bottom at 1023px and below |
.pad-1-b-lg-up |
sets padding to 10px on bottom at 1024px and above |
.pad-1-t-lg |
sets padding to 10px on top between 1024px and 1279px |
.pad-1-t-lg-down |
sets padding to 10px on top at 1023px and below |
.pad-1-t-lg-up |
sets padding to 10px on top at 1024px and above |
.pad-1-l-lg |
sets padding to 10px on left between 1024px and 1279px |
.pad-1-l-lg-down |
sets padding to 10px on left at 1023px and below |
.pad-1-l-lg-up |
sets padding to 10px on left at 1024px and above |
.pad-1-r-lg |
sets padding to 10px on right between 1024px and 1279px |
.pad-1-r-lg-down |
sets padding to 10px on right at 1023px and below |
.pad-1-r-lg-up |
sets padding to 10px on right at 1024px and above |
.pad-2-lg |
sets padding to 20px on all sides between 1024px and 1279px |
.pad-2-lg-down |
sets padding to 20px on all sides at 1023px and below |
.pad-2-lg-up |
sets padding to 20px on all sides at 1024px and above |
.pad-2-b-lg |
sets padding to 20px on bottom between 1024px and 1279px |
.pad-2-b-lg-down |
sets padding to 20px on bottom at 1023px and below |
.pad-2-b-lg-up |
sets padding to 20px on bottom at 1024px and above |
.pad-2-t-lg |
sets padding to 20px on top between 1024px and 1279px |
.pad-2-t-lg-down |
sets padding to 20px on top at 1023px and below |
.pad-2-t-lg-up |
sets padding to 20px on top at 1024px and above |
.pad-2-l-lg |
sets padding to 20px on left between 1024px and 1279px |
.pad-2-l-lg-down |
sets padding to 20px on left at 1023px and below |
.pad-2-l-lg-up |
sets padding to 20px on left at 1024px and above |
.pad-2-r-lg |
sets padding to 20px on right between 1024px and 1279px |
.pad-2-r-lg-down |
sets padding to 20px on right at 1023px and below |
.pad-2-r-lg-up |
sets padding to 20px on right at 1024px and above |
.pad-3-lg |
sets padding to 30px on all sides between 1024px and 1279px |
.pad-3-lg-down |
sets padding to 30px on all sides at 1023px and below |
.pad-3-lg-up |
sets padding to 30px on all sides at 1024px and above |
.pad-3-b-lg |
sets padding to 30px on bottom between 1024px and 1279px |
.pad-3-b-lg-down |
sets padding to 30px on bottom at 1023px and below |
.pad-3-b-lg-up |
sets padding to 30px on bottom at 1024px and above |
.pad-3-t-lg |
sets padding to 30px on top between 1024px and 1279px |
.pad-3-t-lg-down |
sets padding to 30px on top at 1023px and below |
.pad-3-t-lg-up |
sets padding to 30px on top at 1024px and above |
.pad-3-l-lg |
sets padding to 30px on left between 1024px and 1279px |
.pad-3-l-lg-down |
sets padding to 30px on left at 1023px and below |
.pad-3-l-lg-up |
sets padding to 30px on left at 1024px and above |
.pad-3-r-lg |
sets padding to 30px on right between 1024px and 1279px |
.pad-3-r-lg-down |
sets padding to 30px on right at 1023px and below |
.pad-3-r-lg-up |
sets padding to 30px on right at 1024px and above |
.pad-4-lg |
sets padding to 40px on all sides between 1024px and 1279px |
.pad-4-lg-down |
sets padding to 40px on all sides at 1023px and below |
.pad-4-lg-up |
sets padding to 40px on all sides at 1024px and above |
.pad-4-b-lg |
sets padding to 40px on bottom between 1024px and 1279px |
.pad-4-b-lg-down |
sets padding to 40px on bottom at 1023px and below |
.pad-4-b-lg-up |
sets padding to 40px on bottom at 1024px and above |
.pad-4-t-lg |
sets padding to 40px on top between 1024px and 1279px |
.pad-4-t-lg-down |
sets padding to 40px on top at 1023px and below |
.pad-4-t-lg-up |
sets padding to 40px on top at 1024px and above |
.pad-4-l-lg |
sets padding to 40px on left between 1024px and 1279px |
.pad-4-l-lg-down |
sets padding to 40px on left at 1023px and below |
.pad-4-l-lg-up |
sets padding to 40px on left at 1024px and above |
.pad-4-r-lg |
sets padding to 40px on right between 1024px and 1279px |
.pad-4-r-lg-down |
sets padding to 40px on right at 1023px and below |
.pad-4-r-lg-up |
sets padding to 40px on right at 1024px and above |
.pad-5-lg |
sets padding to 50px on all sides between 1024px and 1279px |
.pad-5-lg-down |
sets padding to 50px on all sides at 1023px and below |
.pad-5-lg-up |
sets padding to 50px on all sides at 1024px and above |
.pad-5-b-lg |
sets padding to 50px on bottom between 1024px and 1279px |
.pad-5-b-lg-down |
sets padding to 50px on bottom at 1023px and below |
.pad-5-b-lg-up |
sets padding to 50px on bottom at 1024px and above |
.pad-5-t-lg |
sets padding to 50px on top between 1024px and 1279px |
.pad-5-t-lg-down |
sets padding to 50px on top at 1023px and below |
.pad-5-t-lg-up |
sets padding to 50px on top at 1024px and above |
.pad-5-l-lg |
sets padding to 50px on left between 1024px and 1279px |
.pad-5-l-lg-down |
sets padding to 50px on left at 1023px and below |
.pad-5-l-lg-up |
sets padding to 50px on left at 1024px and above |
.pad-5-r-lg |
sets padding to 50px on right between 1024px and 1279px |
.pad-5-r-lg-down |
sets padding to 50px on right at 1023px and below |
.pad-5-r-lg-up |
sets padding to 50px on right at 1024px and above |
Responsive Pad - Extra Large (1280PX)
| Selector | Usage |
|---|---|
.pad-xl |
sets padding to 20px on all sides between 1280px and 1599px |
.pad-xl-down |
sets padding to 20px on all sides at 1279px and below |
.pad-xl-up |
sets padding to 20px on all sides at 1280px and above |
.pad-b-xl |
sets padding to 20px on bottom between 1280px and 1599px |
.pad-b-xl-down |
sets padding to 20px on bottom at 1279px and below |
.pad-b-xl-up |
sets padding to 20px on bottom at 1280px and above |
.pad-t-xl |
sets padding to 20px on top between 1280px and 1599px |
.pad-t-xl-down |
sets padding to 20px on top at 1279px and below |
.pad-t-xl-up |
sets padding to 20px on top at 1280px and above |
.pad-l-xl |
sets padding to 20px on left between 1280px and 1599px |
.pad-l-xl-down |
sets padding to 20px on left at 1279px and below |
.pad-l-xl-up |
sets padding to 20px on left at 1280px and above |
.pad-r-xl |
sets padding to 20px on right between 1280px and 1599px |
.pad-r-xl-down |
sets padding to 20px on right at 1279px and below |
.pad-r-xl-up |
sets padding to 20px on right at 1280px and above |
.pad-0-xl |
sets padding to 0px on all sides between 1280px and 1599px |
.pad-0-xl-down |
sets padding to 0px on all sides at 1279px and below |
.pad-0-xl-up |
sets padding to 0px on all sides at 1280px and above |
.pad-0-b-xl |
sets padding to 0px on bottom between 1280px and 1599px |
.pad-0-b-xl-down |
sets padding to 0px on bottom at 1279px and below |
.pad-0-b-xl-up |
sets padding to 0px on bottom at 1280px and above |
.pad-0-t-xl |
sets padding to 0px on top between 1280px and 1599px |
.pad-0-t-xl-down |
sets padding to 0px on top at 1279px and below |
.pad-0-t-xl-up |
sets padding to 0px on top at 1280px and above |
.pad-0-l-xl |
sets padding to 0px on left between 1280px and 1599px |
.pad-0-l-xl-down |
sets padding to 0px on left at 1279px and below |
.pad-0-l-xl-up |
sets padding to 0px on left at 1280px and above |
.pad-0-r-xl |
sets padding to 0px on right between 1280px and 1599px |
.pad-0-r-xl-down |
sets padding to 0px on right at 1279px and below |
.pad-0-r-xl-up |
sets padding to 0px on right at 1280px and above |
.pad-1-xl |
sets padding to 10px on all sides between 1280px and 1599px |
.pad-1-xl-down |
sets padding to 10px on all sides at 1279px and below |
.pad-1-xl-up |
sets padding to 10px on all sides at 1280px and above |
.pad-1-b-xl |
sets padding to 10px on bottom between 1280px and 1599px |
.pad-1-b-xl-down |
sets padding to 10px on bottom at 1279px and below |
.pad-1-b-xl-up |
sets padding to 10px on bottom at 1280px and above |
.pad-1-t-xl |
sets padding to 10px on top between 1280px and 1599px |
.pad-1-t-xl-down |
sets padding to 10px on top at 1279px and below |
.pad-1-t-xl-up |
sets padding to 10px on top at 1280px and above |
.pad-1-l-xl |
sets padding to 10px on left between 1280px and 1599px |
.pad-1-l-xl-down |
sets padding to 10px on left at 1279px and below |
.pad-1-l-xl-up |
sets padding to 10px on left at 1280px and above |
.pad-1-r-xl |
sets padding to 10px on right between 1280px and 1599px |
.pad-1-r-xl-down |
sets padding to 10px on right at 1279px and below |
.pad-1-r-xl-up |
sets padding to 10px on right at 1280px and above |
.pad-2-xl |
sets padding to 20px on all sides between 1280px and 1599px |
.pad-2-xl-down |
sets padding to 20px on all sides at 1279px and below |
.pad-2-xl-up |
sets padding to 20px on all sides at 1280px and above |
.pad-2-b-xl |
sets padding to 20px on bottom between 1280px and 1599px |
.pad-2-b-xl-down |
sets padding to 20px on bottom at 1279px and below |
.pad-2-b-xl-up |
sets padding to 20px on bottom at 1280px and above |
.pad-2-t-xl |
sets padding to 20px on top between 1280px and 1599px |
.pad-2-t-xl-down |
sets padding to 20px on top at 1279px and below |
.pad-2-t-xl-up |
sets padding to 20px on top at 1280px and above |
.pad-2-l-xl |
sets padding to 20px on left between 1280px and 1599px |
.pad-2-l-xl-down |
sets padding to 20px on left at 1279px and below |
.pad-2-l-xl-up |
sets padding to 20px on left at 1280px and above |
.pad-2-r-xl |
sets padding to 20px on right between 1280px and 1599px |
.pad-2-r-xl-down |
sets padding to 20px on right at 1279px and below |
.pad-2-r-xl-up |
sets padding to 20px on right at 1280px and above |
.pad-3-xl |
sets padding to 30px on all sides between 1280px and 1599px |
.pad-3-xl-down |
sets padding to 30px on all sides at 1279px and below |
.pad-3-xl-up |
sets padding to 30px on all sides at 1280px and above |
.pad-3-b-xl |
sets padding to 30px on bottom between 1280px and 1599px |
.pad-3-b-xl-down |
sets padding to 30px on bottom at 1279px and below |
.pad-3-b-xl-up |
sets padding to 30px on bottom at 1280px and above |
.pad-3-t-xl |
sets padding to 30px on top between 1280px and 1599px |
.pad-3-t-xl-down |
sets padding to 30px on top at 1279px and below |
.pad-3-t-xl-up |
sets padding to 30px on top at 1280px and above |
.pad-3-l-xl |
sets padding to 30px on left between 1280px and 1599px |
.pad-3-l-xl-down |
sets padding to 30px on left at 1279px and below |
.pad-3-l-xl-up |
sets padding to 30px on left at 1280px and above |
.pad-3-r-xl |
sets padding to 30px on right between 1280px and 1599px |
.pad-3-r-xl-down |
sets padding to 30px on right at 1279px and below |
.pad-3-r-xl-up |
sets padding to 30px on right at 1280px and above |
.pad-4-xl |
sets padding to 40px on all sides between 1280px and 1599px |
.pad-4-xl-down |
sets padding to 40px on all sides at 1279px and below |
.pad-4-xl-up |
sets padding to 40px on all sides at 1280px and above |
.pad-4-b-xl |
sets padding to 40px on bottom between 1280px and 1599px |
.pad-4-b-xl-down |
sets padding to 40px on bottom at 1279px and below |
.pad-4-b-xl-up |
sets padding to 40px on bottom at 1280px and above |
.pad-4-t-xl |
sets padding to 40px on top between 1280px and 1599px |
.pad-4-t-xl-down |
sets padding to 40px on top at 1279px and below |
.pad-4-t-xl-up |
sets padding to 40px on top at 1280px and above |
.pad-4-l-xl |
sets padding to 40px on left between 1280px and 1599px |
.pad-4-l-xl-down |
sets padding to 40px on left at 1279px and below |
.pad-4-l-xl-up |
sets padding to 40px on left at 1280px and above |
.pad-4-r-xl |
sets padding to 40px on right between 1280px and 1599px |
.pad-4-r-xl-down |
sets padding to 40px on right at 1279px and below |
.pad-4-r-xl-up |
sets padding to 40px on right at 1280px and above |
.pad-5-xl |
sets padding to 50px on all sides between 1280px and 1599px |
.pad-5-xl-down |
sets padding to 50px on all sides at 1279px and below |
.pad-5-xl-up |
sets padding to 50px on all sides at 1280px and above |
.pad-5-b-xl |
sets padding to 50px on bottom between 1280px and 1599px |
.pad-5-b-xl-down |
sets padding to 50px on bottom at 1279px and below |
.pad-5-b-xl-up |
sets padding to 50px on bottom at 1280px and above |
.pad-5-t-xl |
sets padding to 50px on top between 1280px and 1599px |
.pad-5-t-xl-down |
sets padding to 50px on top at 1279px and below |
.pad-5-t-xl-up |
sets padding to 50px on top at 1280px and above |
.pad-5-l-xl |
sets padding to 50px on left between 1280px and 1599px |
.pad-5-l-xl-down |
sets padding to 50px on left at 1279px and below |
.pad-5-l-xl-up |
sets padding to 50px on left at 1280px and above |
.pad-5-r-xl |
sets padding to 50px on right between 1280px and 1599px |
.pad-5-r-xl-down |
sets padding to 50px on right at 1279px and below |
.pad-5-r-xl-up |
sets padding to 50px on right at 1280px and above |
Text #
| Selector | Usage |
|---|---|
.text-nowrap |
prevents text from wrapping to next line |
.text-wrap |
allows text wrapping to next line |
.text-truncate |
truncate a text block (using an elipses) |
.text-transform-lowercase |
transforms text to lowercase |
.text-transform-uppercase |
transforms text to uppercase |
.text-transform-capitalize |
transforms text to capitalize each word |
.text-align-justify |
justifies text alignment |
.text-align-center |
center align text |
.text-align-left |
left align text |
.text-align-right |
right align text |
Responsive Text - Small (480PX)
| Selector | Usage |
|---|---|
.text-nowrap-sm |
prevents text from wrapping to next line between 480px and 767px |
.text-nowrap-sm-down |
prevents text from wrapping to next line at 479px and below |
.text-nowrap-sm-up |
prevents text from wrapping to next line at 480px and above |
.text-wrap-sm |
allows text wrapping to next line between 480px and 767px |
.text-wrap-sm-down |
allows text wrapping to next line at 479px and below |
.text-wrap-sm-up |
allows text wrapping to next line at 480px and above |
.text-truncate-sm |
truncate a text block (using an elipses) between 480px and 767px |
.text-truncate-sm-down |
truncate a text block (using an elipses) at 479px and below |
.text-truncate-sm-up |
truncate a text block (using an elipses) at 480px and above |
.text-transform-lowercase-sm |
transforms text to lowercase between 480px and 767px |
.text-transform-lowercase-sm-down |
transforms text to lowercase at 479px and below |
.text-transform-lowercase-sm-up |
transforms text to lowercase at 480px and above |
.text-transform-uppercase-sm |
transforms text to uppercase between 480px and 767px |
.text-transform-uppercase-sm-down |
transforms text to uppercase at 479px and below |
.text-transform-uppercase-sm-up |
transforms text to uppercase at 480px and above |
.text-transform-capitalize-sm |
transforms text to capitalize each word between 480px and 767px |
.text-transform-capitalize-sm-down |
transforms text to capitalize each word at 479px and below |
.text-transform-capitalize-sm-up |
transforms text to capitalize each word at 480px and above |
.text-align-justify-sm |
justifies text alignment between 480px and 767px |
.text-align-justify-sm-down |
justifies text alignment at 479px and below |
.text-align-justify-sm-up |
justifies text alignment at 480px and above |
.text-align-center-sm |
center align text between 480px and 767px |
.text-align-center-sm-down |
center align text at 479px and below |
.text-align-center-sm-up |
center align text at 480px and above |
.text-align-left-sm |
left align text between 480px and 767px |
.text-align-left-sm-down |
left align text at 479px and below |
.text-align-left-sm-up |
left align text at 480px and above |
.text-align-right-sm |
right align text between 480px and 767px |
.text-align-right-sm-down |
right align text at 479px and below |
.text-align-right-sm-up |
right align text at 480px and above |
Responsive Text - Medium (768PX)
| Selector | Usage |
|---|---|
.text-nowrap-md |
prevents text from wrapping to next line between 768px and 1023px |
.text-nowrap-md-down |
prevents text from wrapping to next line at 767px and below |
.text-nowrap-md-up |
prevents text from wrapping to next line at 768px and above |
.text-wrap-md |
allows text wrapping to next line between 768px and 1023px |
.text-wrap-md-down |
allows text wrapping to next line at 767px and below |
.text-wrap-md-up |
allows text wrapping to next line at 768px and above |
.text-truncate-md |
truncate a text block (using an elipses) between 768px and 1023px |
.text-truncate-md-down |
truncate a text block (using an elipses) at 767px and below |
.text-truncate-md-up |
truncate a text block (using an elipses) at 768px and above |
.text-transform-lowercase-md |
transforms text to lowercase between 768px and 1023px |
.text-transform-lowercase-md-down |
transforms text to lowercase at 767px and below |
.text-transform-lowercase-md-up |
transforms text to lowercase at 768px and above |
.text-transform-uppercase-md |
transforms text to uppercase between 768px and 1023px |
.text-transform-uppercase-md-down |
transforms text to uppercase at 767px and below |
.text-transform-uppercase-md-up |
transforms text to uppercase at 768px and above |
.text-transform-capitalize-md |
transforms text to capitalize each word between 768px and 1023px |
.text-transform-capitalize-md-down |
transforms text to capitalize each word at 767px and below |
.text-transform-capitalize-md-up |
transforms text to capitalize each word at 768px and above |
.text-align-justify-md |
justifies text alignment between 768px and 1023px |
.text-align-justify-md-down |
justifies text alignment at 767px and below |
.text-align-justify-md-up |
justifies text alignment at 768px and above |
.text-align-center-md |
center align text between 768px and 1023px |
.text-align-center-md-down |
center align text at 767px and below |
.text-align-center-md-up |
center align text at 768px and above |
.text-align-left-md |
left align text between 768px and 1023px |
.text-align-left-md-down |
left align text at 767px and below |
.text-align-left-md-up |
left align text at 768px and above |
.text-align-right-md |
right align text between 768px and 1023px |
.text-align-right-md-down |
right align text at 767px and below |
.text-align-right-md-up |
right align text at 768px and above |
Responsive Text - Large (1024PX)
| Selector | Usage |
|---|---|
.text-nowrap-lg |
prevents text from wrapping to next line between 1024px and 1279px |
.text-nowrap-lg-down |
prevents text from wrapping to next line at 1023px and below |
.text-nowrap-lg-up |
prevents text from wrapping to next line at 1024px and above |
.text-wrap-lg |
allows text wrapping to next line between 1024px and 1279px |
.text-wrap-lg-down |
allows text wrapping to next line at 1023px and below |
.text-wrap-lg-up |
allows text wrapping to next line at 1024px and above |
.text-truncate-lg |
truncate a text block (using an elipses) between 1024px and 1279px |
.text-truncate-lg-down |
truncate a text block (using an elipses) at 1023px and below |
.text-truncate-lg-up |
truncate a text block (using an elipses) at 1024px and above |
.text-transform-lowercase-lg |
transforms text to lowercase between 1024px and 1279px |
.text-transform-lowercase-lg-down |
transforms text to lowercase at 1023px and below |
.text-transform-lowercase-lg-up |
transforms text to lowercase at 1024px and above |
.text-transform-uppercase-lg |
transforms text to uppercase between 1024px and 1279px |
.text-transform-uppercase-lg-down |
transforms text to uppercase at 1023px and below |
.text-transform-uppercase-lg-up |
transforms text to uppercase at 1024px and above |
.text-transform-capitalize-lg |
transforms text to capitalize each word between 1024px and 1279px |
.text-transform-capitalize-lg-down |
transforms text to capitalize each word at 1023px and below |
.text-transform-capitalize-lg-up |
transforms text to capitalize each word at 1024px and above |
.text-align-justify-lg |
justifies text alignment between 1024px and 1279px |
.text-align-justify-lg-down |
justifies text alignment at 1023px and below |
.text-align-justify-lg-up |
justifies text alignment at 1024px and above |
.text-align-center-lg |
center align text between 1024px and 1279px |
.text-align-center-lg-down |
center align text at 1023px and below |
.text-align-center-lg-up |
center align text at 1024px and above |
.text-align-left-lg |
left align text between 1024px and 1279px |
.text-align-left-lg-down |
left align text at 1023px and below |
.text-align-left-lg-up |
left align text at 1024px and above |
.text-align-right-lg |
right align text between 1024px and 1279px |
.text-align-right-lg-down |
right align text at 1023px and below |
.text-align-right-lg-up |
right align text at 1024px and above |
Responsive Text - Extra Large (1280PX)
| Selector | Usage |
|---|---|
.text-nowrap-xl |
prevents text from wrapping to next line between 1280px and 1599px |
.text-nowrap-xl-down |
prevents text from wrapping to next line at 1279px and below |
.text-nowrap-xl-up |
prevents text from wrapping to next line at 1280px and above |
.text-wrap-xl |
allows text wrapping to next line between 1280px and 1599px |
.text-wrap-xl-down |
allows text wrapping to next line at 1279px and below |
.text-wrap-xl-up |
allows text wrapping to next line at 1280px and above |
.text-truncate-xl |
truncate a text block (using an elipses) between 1280px and 1599px |
.text-truncate-xl-down |
truncate a text block (using an elipses) at 1279px and below |
.text-truncate-xl-up |
truncate a text block (using an elipses) at 1280px and above |
.text-transform-lowercase-xl |
transforms text to lowercase between 1280px and 1599px |
.text-transform-lowercase-xl-down |
transforms text to lowercase at 1279px and below |
.text-transform-lowercase-xl-up |
transforms text to lowercase at 1280px and above |
.text-transform-uppercase-xl |
transforms text to uppercase between 1280px and 1599px |
.text-transform-uppercase-xl-down |
transforms text to uppercase at 1279px and below |
.text-transform-uppercase-xl-up |
transforms text to uppercase at 1280px and above |
.text-transform-capitalize-xl |
transforms text to capitalize each word between 1280px and 1599px |
.text-transform-capitalize-xl-down |
transforms text to capitalize each word at 1279px and below |
.text-transform-capitalize-xl-up |
transforms text to capitalize each word at 1280px and above |
.text-align-justify-xl |
justifies text alignment between 1280px and 1599px |
.text-align-justify-xl-down |
justifies text alignment at 1279px and below |
.text-align-justify-xl-up |
justifies text alignment at 1280px and above |
.text-align-center-xl |
center align text between 1280px and 1599px |
.text-align-center-xl-down |
center align text at 1279px and below |
.text-align-center-xl-up |
center align text at 1280px and above |
.text-align-left-xl |
left align text between 1280px and 1599px |
.text-align-left-xl-down |
left align text at 1279px and below |
.text-align-left-xl-up |
left align text at 1280px and above |
.text-align-right-xl |
right align text between 1280px and 1599px |
.text-align-right-xl-down |
right align text at 1279px and below |
.text-align-right-xl-up |
right align text at 1280px and above |