me

Helper Classes

Close icon

Use the generic close icon for dismissing content like modals and alerts.

<button type="button" class="close" aria-hidden="true">&times;</button>

Quick floats

Float an element to the left or right with a class. !important is included to avoid specificity issues. Classes can also be used as mixins.

<div class="pull-left">...</div>
<div class="pull-right">...</div>

Clearfix

Clear the float on any element with the .clearfix class. Utilizes the micro clearfix as popularized by Nicolas Gallagher. Can also be used as a mixin.

<!-- Usage as a class -->
<div class="clearfix">...</div>

Screen reader content

Hide an element to all devices except screen readers with .sr-only. Necessary for following Bootstrap accessibility best practices.

<a class="sr-only" href="#content">Skip to main content</a>

Background helper

Allows you to select the background as you want, use with !important. This also changed the font color.

.bg-midnight .bg-cloud .bg-silver .bg-white .bg-darknight .bg-primary .bg-success .bg-info .bg-warning .bg-danger

<div class="bg-primary">...</div>
<div class="bg-success">...</div>
<div class="bg-info">...</div>
<div class="bg-warning">...</div>
<div class="bg-danger">...</div>
<div class="bg-inverse">...</div>

<!-- Also avilable -->
<div class="bg-darknight">...</div>
<div class="bg-midnight">...</div>
<div class="bg-cloud">...</div>
<div class="bg-silver">...</div>
<div class="bg-white">...</div>
<div class="bg-teal">...</div>
<div class="bg-green">...</div>
<div class="bg-orange">...</div>
<div class="bg-red">...</div>
<div class="bg-blue">...</div>

Border Helper

Add class .bordered to give a border on any element. Default style 1px solid #E0E4E8. See demo and available class below:

.bordered .bordered-flat .bordered-top .bordered right left .bordered-bottom .border-primary .border-green .border-info .border-orange .border-midnight

<div class="bordered">...</div>
<div class="bordered-top">...</div> <!-- bordered on top only -->
<div class="bordered-right">...</div> <!-- bordered on right only -->
<div class="bordered-bottom">...</div> <!-- bordered on bottom only -->
<div class="bordered-left">...</div> <!-- bordered on top left -->
<div class="bordered-flat">...</div> <!-- bordered all, but 2px on bottom -->

<!-- Also can change border color -->
<div class="border-primary">...</div>
<div class="border-success">...</div>
<div class="border-info">...</div>
<div class="border-warning">...</div>
<div class="border-danger">...</div>

<div class="border-darknight">...</div>
<div class="border-midnight">...</div>
<div class="border-cloud">...</div>
<div class="border-silver">...</div>
<div class="border-white">...</div>
<div class="border-teal">...</div>
<div class="border-green">...</div>
<div class="border-orange">...</div>
<div class="border-red">...</div>
<div class="border-blue">...</div>

<!-- Disable border -->
<div class="no-border">...</div>

use .pre-scrollable .nicescroll-off

Carets

Use carets to indicate dropdown functionality and direction. Note that the default caret will reverse automatically in dropup menus.

<span class="caret"></span>

Center content blocks

Set an element to display: block and center via margin. Available as a mixin and class.

<div class="center-block">...</div>

Showing and hiding content

Force an element to be shown or hidden (including for screen readers) with the use of .show and .hidden classes. These classes use !important to avoid specificity conflicts, just like the quick floats. They are only available for block level toggling.

.hide is available, but it does not always affect screen readers and is deprecated as of Bootstrap v3.0.1. Use .hidden or .sr-only instead.

Furthermore, .invisible can be used to toggle only the visibility of an element, meaning its display is not modified and the element can still affect the flow of the document.

<div class="show">...</div>
<div class="hidden">...</div>

Text helper

Allows you to select the color, sizing or Font style, use with !important.

Consequat condimentum, fusce tincidunt, faucibus ante praesent

Consequat condimentum, fusce tincidunt, faucibus ante praesent

Consequat condimentum, fusce tincidunt, faucibus ante praesent

Consequat condimentum, fusce tincidunt, faucibus ante praesent


Consequat condimentum, fusce tincidunt, faucibus ante praesent

Consequat condimentum, fusce tincidunt, faucibus ante praesent

Consequat condimentum, fusce tincidunt, faucibus ante praesent

<!-- Bootstrap color helper -->
<div class="text-primary">...</div>
<div class="text-success">...</div>
<div class="text-info">...</div>
<div class="text-warning">...</div>
<div class="text-danger">...</div>
<div class="text-muted">...</div>
<!-- Also avilable -->
<div class="text-darknight">...</div>
<div class="text-midnight">...</div>
<div class="text-cloud">...</div>
<div class="text-silver">...</div>
<div class="text-white">...</div>
<div class="text-teal">...</div>
<div class="text-green">...</div>
<div class="text-orange">...</div>
<div class="text-red">...</div>
<div class="text-blue">...</div>

<!-- Sizing -->
<div class="text-sm">...</div> <!-- .8em of parent font-size -->
<div class="text-lg">...</div> <!-- 1.2em of parent font-size -->
<div class="text-xg">...</div> <!-- 1.6em of parent font-size -->
<div class="text-16">...</div> <!-- 16px font-size -->
<div class="text-24">...</div> <!-- 24px font-size -->
<div class="text-32">...</div> <!-- 32px font-size -->
<div class="text-48">...</div> <!-- 48px font-size -->
<div class="text-64">...</div> <!-- 64px font-size -->

<!-- Styling -->
<div class="text-bold">...</div>
<div class="text-italic">...</div>
<div class="text-underline">...</div>
<div class="text-linethrough">...</div>
<div class="text-lead">...</div> <!-- 300 font-weight -->
<div class="text-nodecor">...</div> <!-- no decoration -->

use .pre-scrollable


Shadow helper

Give a nice shadow to any element. Use with .shadow or disable shadow with no-shadow.

.shadow .shadow .no-shadow


Corner helper

Give 4px border radius on any element with .corner. See available class below:

.corner .corner-top .corner-bottom .corner-tl/br .no-corner

<div class="corner">...</div> <!-- corner all -->
<div class="corner-top">...</div> <!-- top corner -->
<div class="corner-tr">...</div> <!-- top right corner -->
<div class="corner-tl">...</div> <!-- top left corner -->
<div class="corner-bottom">...</div> <!-- bottom corner -->
<div class="corner-br">...</div> <!-- bottom right corner -->
<div class="corner-bl">...</div> <!-- bottom left corner -->

<!-- Disable corner -->
<div class="no-corner">...</div>

Responsive Utilities

For faster mobile-friendly development, use these utility classes for showing and hiding content by device via media query. Also included are utility classes for toggling content when printed.

Try to use these on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation. Responsive utilities are currently only available for block and table toggling. Use with inline and table elements is currently not supported.

Extra small devices Phones (<768px) Small devices Tablets (≥768px) Medium devices Desktops (≥992px) Large devices Desktops (≥1200px)
.visible-xs Visible
.visible-sm Visible
.visible-md Visible
.visible-lg Visible
.hidden-xs Visible Visible Visible
.hidden-sm Visible Visible Visible
.hidden-md Visible Visible Visible
.hidden-lg Visible Visible Visible

Print classes

Similar to the regular responsive classes, use these for toggling content for print.

Class Browser Print
.visible-print Visible
.hidden-print Visible