Utilities

Center Blocks

Set an element to display: block and center with margin. — Remember that block-level elements are 100% width of their container, by default. So in most cases for the element to be centered, it will also need a width assigned that is is narrower than its container.

...

Floats

Float an element to the left or right with a class. !important is included to avoid specificity issues.

...
...

Clear Fix

Use the clearfix class on a container to clear floated elements within.

    
    
Donec rutrum, est vel posuere congue, arcu mauris euismod libero, eget mattis est orci vitae nisi. Cras eget urna nunc, nec aliquet dui. Cras sed lacus tellus, in porttitor tortor. Vivamus auctor mattis nunc, quis mattis justo vulputate at. Nam rhoncus mollis convallis.

Toggle Display

With the following classes you can show or hide an element with the display CSS propery. This means the element will not display and won't take up any space on the page.

...
...
...

Toggle Visibility

With the following classes you can show or hide an element with the visibility CSS propery. This means that while the element won't be visible, it will still take up the allocated space on the page.

...
...

Text Alignment

Use classes text-left, text-right, text-center, text-justify and text-nowrap to modify text alignment.

...
...
...
...
...

Text Transformation

Use classes text-lowercase, text-uppercase and text-capitalize to transform text.

...
...
...

Image Replacement

Use the class text-hide to hide text from an element, for the purpose of replacing it with a background image.

My Site

Screen Reader Text

Hide an element to all devices except screen readers by adding the sr-only class to an element. Combine sr-only with sr-only-focusable to show the element again when it's focused (e.g. by a keyboard-only user). This is necessary for following accessibility best practices.

Skip to main content

Responsive Display

Combine classes from the table below on your HTML elements, to hide them on certain devices.

    
You'll see me on extra small devices only.



    
You'll see me on extra small and small devices only.



    
You'll see me on large and extra large devices only.



    
You'll see me on medium devices only.