util.css tests

.clearfix

Should stretch to accommodate floating elements

.pull-left

Should float the element left

.pull-right

Should float the element right

.responsive-width

Should fill the width of its container and auto scale the height

.responsive-height

Should fill the height of its container and auto scale the width

.border-box

Should include the padding and border within the width and height of an element

.flex

Should behave like a block element that lays out its content according to flexbox

.inline-flex

Should behave like an inline element that lays out its content according to flexbox

.flex-align-top

Should align at the top left of the container

.flex-align-middle

Should align at the middle left of the container

.flex-align-bottom

Should align at the bottom left of the container

.flex-align-left

Should align at the top left of the container

.flex-align-center

Should align at the top center of the container

.flex-align-right

Should align at the top right of the container

.flex-align-justify

Should evenly distribute the items on the line, with the first item at the start and the last item at the end

.flex-align-even

Should evenly distribute the items on the line with equal space around them

.flex-align-lines-top

Should pack lines at the top of the container

.flex-align-lines-middle

Should pack lines at the middle of the container

.flex-align-lines-bottom

Should pack lines at the bottom of the container

.flex-align-lines-justify

Should evenly distribute the lines with the first line at the top of the container and the last line at the bottom

.flex-align-lines-even

Should evenly distribute the lines with equal space between them

.flex-row

Should stack items horizontally, side-by-side

.flex-col

Should stack items vertically, top-to-bottom

.flex-nowrap

Should force items to be laid out on a single line

.flex-wrap

Should allow items to break into multiple lines

.show

The element should be visible

.hide

The element should not be visible and without layout

.invisible

The element should not be visible

The element should have layout

.transparent

The element should be not visible

The element should have layout

The element should still be a target for mouse events

.hidden-accessible

The element should not be visible and without layout, but available to screen readers

.hidden-accessible.focusable:active, .hidden-accessible.focusable:focus

The element should be focusable when navigated to via the keyboard

.hidden-measurable

The element should not be visible, but maintain layout offscreen

.visible-extra-small

The element should only be visible on extra small screens (less than 767px)

.hidden-extra-small

The element should be hidden only on extra small screens (less than 767px)

.visible-small

The element should only be visible on small screens (768px to 991px)

.hidden-small

The element should be hidden only on small screens (768px to 991px)

.visible-medium

The element should only be visible on medium-sized screens (992px to 1199px)

.hidden-medium

The element should be hidden only on medium-sized screens (992px to 1199px)

.visible-large

The element should only be visible on large screens (1200px and up)

.hidden-large

The element should be hidden only on large screens (1200px and up)

.visible-high-res

The element should only be visible on high resolution devices

.hidden-high-res

The element should be hidden only on high resolution devices

.center

Should center the element horizontally

.middle

Should center the element vertically

.middle-center

Should center the element horizontally and vertically

.abs-top-left

Should align an absolutely positioned element to the top-left of its container

.abs-top-center

Should align an absolutely positioned element to the top-center of its container

.abs-top-right

Should align an absolutely positioned element to the top-right of its container

.abs-middle-left

Should align an absolutely positioned element to the middle-left of its container

.abs-middle-center

Should align an absolutely positioned element to the middle-center of its container

.abs-middle-right

Should align an absolutely positioned element to the middle-right of its container

.abs-bottom-left

Should align an absolutely positioned element to the bottom-left of its container

.abs-bottom-center

Should align an absolutely positioned element to the bottom-center of its container

.abs-bottom-right

Should align an absolutely positioned element to the bottom-right of its container

.antialiased

Should make the text smooth

Lorem ipsum dolor sit amet, consectetur cras amet.

.kern

Should optimize spacing between characters

Lorem ipsum dolor sit amet, consectetur cras amet.

.text-truncate

Should prevent text from wrapping and truncate with an ellipsis

Diam ullamcorper pretium a elit est fusce duis bibendum fermentum cras semper a leo a vestibulum sed ante ipsum a proin. Aenean nunc nullam habitasse duis senectus condimentum scelerisque et vestibulum curae netus vestibulum parturient vestibulum odio eu risus placerat nam.

.text-break

Should break the text if the length exceeds the width of its container

vestibulumentableolli

.text-left

Should align text to the left of its container

Lorem ipsum dolor sit amet, consectetur cras amet.

.text-right

Should align text to the right of its container

Lorem ipsum dolor sit amet, consectetur cras amet.

.text-center

Should align text in the center of its container

Lorem ipsum dolor sit amet, consectetur cras amet.

.text-justify

Should ensure text is spaced to fill the width of its container

Diam ullamcorper pretium a elit est fusce duis bibendum fermentum cras semper a leo a vestibulum sed ante ipsum a proin. Aenean nunc nullam habitasse duis senectus condimentum scelerisque et vestibulum curae netus vestibulum parturient vestibulum odio eu risus placerat nam.

.text-lowercase

Should convert text to lowercase

CONVERT TO LOWERCASE

.text-uppercase

Should convert text to uppercase

convert to uppercase

.text-capitalize

Should capitalize text

Lorem ipsum dolor sit amet, consectetur cras amet.

.text-normal

Should make text normal font weight

Lorem ipsum dolor sit amet, consectetur cras amet.

.text-bold

Should make text bold

Lorem ipsum dolor sit amet, consectetur cras amet.

.text-italic

Should make text italic

Lorem ipsum dolor sit amet, consectetur cras amet.

.hide-text

Should hide text, but be accessible to web crawlers and screen readers

text caption

.img-responsive

Should make an image responsive

.transition

Should transition whenever a property changes

.fadable

Should transition the element to creating a fading in/out effect

Fade In

.collapsible

Should transition the element to creating a collapsing/expanding effect

Expand

.accelerated

Should invoke hardware acceleration for transitions

.disabled:disabled

Indicate that a form field element is disabled

.disabled:not(:disabled)

Indicate that a non-form element is disabled

disabled

.loading

Should indicate that the element is loading

loading

.help

Should indicate that the element a helpful resource

help

.restricted

Should indicate that the element is restricted from interaction

restricted

.actionable

Should indicate that an element is actionable

actionable

.draggable

Should indicate that the element is draggable

draggable

Should prevent text selection of draggable element

draggable

.unselectable

Should prevent text selection

Dictumst lacinia at parturient a pharetra semper sem quam hac ullamcorper dui varius a metus.

.unclickable

Should prevent user interaction

Click

.prevent-callout

Should prevent the callout menu appearing in iOS Safari when the user performs tap & hold

Click

.resizable

Should make an element resizable on both axes

Dictumst lacinia at parturient a pharetra semper sem quam hac ullamcorper dui varius a metus.

.scrollable-vertical

Should display vertical scrollbar

Rhoncus vestibulum nam magnis nam semper quis leo bibendum pretium imperdiet nisi a eros rutrum cum mus odio accumsan vitae vestibulum duis habitasse montes eu leo suspendisse vestibulum ridiculus. Condimentum ad a ullamcorper interdum neque per a in pulvinar fermentum imperdiet himenaeos suspendisse aptent scelerisque cras laoreet elit id elit suspendisse ad odio magnis at id massa. A at natoque dictum class a ad ultrices condimentum in netus rhoncus cum ultrices sapien venenatis. Suspendisse sem consectetur vestibulum a semper feugiat a est integer eu parturient eu morbi adipiscing himenaeos suspendisse tristique a metus ridiculus condimentum nec commodo himenaeos non himenaeos. Diam scelerisque molestie aliquam ad parturient a nec at luctus commodo suspendisse non dictum hendrerit ut in euismod ullamcorper porttitor. Vestibulum nam mus vulputate adipiscing vulputate adipiscing nisi blandit posuere felis nibh id nostra donec.

.scrollable-horizontal

Should display horizontal scrollbar

Rhoncus vestibulum nam magnis nam semper quis leo bibendum pretium imperdiet nisi a eros rutrum cum mus odio accumsan vitae vestibulum duis habitasse montes eu leo suspendisse vestibulum ridiculus. Condimentum ad a ullamcorper interdum neque per a in pulvinar fermentum imperdiet himenaeos suspendisse aptent scelerisque cras laoreet elit id elit suspendisse ad odio magnis at id massa. A at natoque dictum class a ad ultrices condimentum in netus rhoncus cum ultrices sapien venenatis. Suspendisse sem consectetur vestibulum a semper feugiat a est integer eu parturient eu morbi adipiscing himenaeos suspendisse tristique a metus ridiculus condimentum nec commodo himenaeos non himenaeos. Diam scelerisque molestie aliquam ad parturient a nec at luctus commodo suspendisse non dictum hendrerit ut in euismod ullamcorper porttitor. Vestibulum nam mus vulputate adipiscing vulputate adipiscing nisi blandit posuere felis nibh id nostra donec.

.container

Should allow child elements to position absolute relative to the container and automatically clear floats

float left

float left

position absolute

.overlay

Should create a fixed overlay

overlay

Toggle