## Bootstrap - Helper Classes

We have styled all Bootstrap elements just as you want!

Click me!

#### Contextual Colors

Convey meaning through color with a handful of emphasis utility classes. These may also be applied to links and will darken on hover just like our default link styles.

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Nullam id dolor id nibh ultricies vehicula ut id elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Maecenas sed diam eget risus varius blandit sit amet non magna.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

#### Contextual Backgrounds

Similar to the contextual text color classes, easily set the background of an element to any contextual class. Anchor components will darken on hover, just like the text classes.

Nullam id dolor id nibh ultricies vehicula ut id elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Maecenas sed diam eget risus varius blandit sit amet non magna.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

#### Close Icon

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

#### Carets

Use carets to indicate dropdown functionality and direction.

#### 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> <!-- Float div to left -->
    <div class="pull-right">...</div> <!-- Float div to right -->

#### Center Content Blocks

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

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

#### Clearfix

Easily clear floats by adding `.clearfix` to the parent element. Utilizes the micro clearfix as popularized by Nicolas Gallagher. Can also be used as a mixin.

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

#### Showing & 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. They can also be used as mixins.

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>

#### Responsive Images

Images in Bootstrap 3 can be made responsive-friendly via the addition of the `.img-responsive` class. This applies `max-width: 100%;`, `height: auto;` and `display: block;` to the image so that it scales nicely to the parent element.

To center images which use the `.img-responsive` class, use `.center-block` instead of `.text-center`.

    <img src="..." class="img-responsive" alt="Responsive image">

#### Image Shapes

Add classes to an `<img>` element to easily style images in any project.

    <img src="..." alt="..." class="img-rounded">
    <img src="..." alt="..." class="img-circle">
    <img src="..." alt="..." class="img-thumbnail">

#### 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.

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

#### Print Classes

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.

Classes | Browser | Print
--- | --- | ---
`.visible-print-block` `.visible-print-inline` `.visible-print-inline-block` | Hidden | Visible
`.hidden-print` | Visible | Hidden