Headings

All HTML headings, <h1> through <h6>, are available. .h1 through .h6 classes are also available, for when you want to match the font styling of a heading but still want your text to be displayed inline.

<h1> - Heading One

<h2> - Heading Two

<h3> - Heading Three

<h4> - Heading Four

<h5> - Heading Five

<h6> - Heading Six

<h1>...</h1>
<h2>...</h2>
<h3>...</h3>
<h4>...</h4>
<h5>...</h5>
<h6>...</h6>

Create lighter, secondary text in any heading with a generic <small> tag or the .small class.

<h1> - Heading One Secondary text

<h2> - Heading Two Secondary text

<h3> - Heading Three Secondary text

<h4> - Heading Four Secondary text

<h5> - Heading Five Secondary text

<h6> - Heading Six Secondary text

<h1>...</h1> <small>Secondary text</small>
<h2>...</h2> <small>Secondary text</small>
<h3>...</h3> <small>Secondary text</small>
<h4>...</h4> <small>Secondary text</small>
<h5>...</h5> <small>Secondary text</small>
<h6>...</h6> <small>Secondary text</small>

Body Copy

Bootstrap's global default font-size is 14px, with a line-height of 1.428. This is applied to the <body> and all paragraphs. In addition, <p> (paragraphs) receive a bottom margin of half their computed line-height (10px by default).

Suspendisse eu bibendum libero. Aliquam eu elit vel elit tincidunt rhoncus. Maecenas placerat sem vel magna ultrices eu tristique enim convallis. Fusce dignissim mattis adipiscing. Etiam ultricies odio quis tellus mollis sed tincidunt neque hendrerit. Cras volutpat ornare nunc, eu tristique massa fringilla vel. Duis consequat sem sed justo tincidunt eget aliquet leo tristique. Curabitur vel augue diam, nec gravida nisi. Nulla non sapien purus. Nulla facilisi.

Aliquam in eros augue, at euismod nisi. Pellentesque faucibus, nunc sit amet facilisis blandit, nunc nulla mollis lacus, sit amet luctus elit leo vitae erat. Maecenas sit amet nisi vel sapien fringilla facilisis viverra et lectus. Pellentesque pulvinar libero in felis iaculis feugiat. Morbi aliquam, orci quis rutrum blandit, massa ante eleifend felis, in vulputate magna purus sed nisi.

Fusce porttitor ultrices est, vitae ullamcorper lacus mattis sed. Quisque facilisis metus venenatis ipsum ornare ut pharetra turpis volutpat. Praesent eu tortor nisi. Donec lectus purus, molestie sit amet pretium vitae, congue et nunc. Nunc eget tempus sem. Maecenas non placerat lectus. Nulla nec augue felis, in tempus ipsum.

<p>...</p>

Lead Body Copy

Lead copy can be applied by adding a class of .lead to a <p>.

Suspendisse eu bibendum libero. Aliquam eu elit vel elit tincidunt rhoncus. Maecenas placerat sem vel magna ultrices eu tristique enim convallis.

<p class="lead">...</p>

Built with Less

The typographic scale is based on two LESS variables in variables.less: @font-size-base and @line-height-base. The first is the base font-size used throughout and the second is the base line-height. We use those variables and some simple math to create the margins, paddings, and line-heights of all our type and more. Customize them and Bootstrap adapts.

Emphasis

Make use of HTML's default emphasis tags with lightweight styles.

Small text

For de-emphasizing inline or blocks of text, use the <small> tag to set text at 85% the size of the parent. Heading elements receive their own font-size for nested <small> elements.

You may alternatively use an inline element with .small in place of any <small>

Suspendisse eu bibendum libero. Aliquam eu elit vel elit tincidunt rhoncus.

<small>Suspendisse eu bibendum libero. Aliquam eu elit vel elit tincidunt rhoncus.</small>

Bold

Used for creating text that needs to be bolded.

Suspendisse eu bibendum libero. Aliquam eu elit vel elit tincidunt rhoncus.

<strong>Suspendisse eu bibendum libero. Aliquam eu elit vel elit tincidunt rhoncus.</strong>

Italic

Used for creating text that needs to be italicized.

Suspendisse eu bibendum libero. Aliquam eu elit vel elit tincidunt rhoncus.

<em>Suspendisse eu bibendum libero. Aliquam eu elit vel elit tincidunt rhoncus.</em>

Alternate elements

Feel free to use <b> and <i> in HTML5. <b> is meant to highlight words or phrases without conveying additional importance while <i> is mostly for voice, technical terms, etc.

Alignment

Easily realign text to components with text alignment classes.

Over to the left

Hangin' in the middle

Over to the right

<p class="text-left">Over to the left</p>
<p class="text-center">Hangin' in the middle</p>
<p class="text-right">Over to the right</p>

Emphasis classes

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.

Aliquam eu elit vel elit tincidunt rhoncus.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.

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

<p class="text-muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
<p class="text-primary">Aliquam eu elit vel elit tincidunt rhoncus.</p>
<p class="text-success">Etiam porta sem malesuada magna mollis euismod.</p>
<p class="text-info">Donec ullamcorper nulla non metus auctor fringilla.</p>
<p class="text-warning">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.</p>
<p class="text-danger">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>

Dealing with specificity

Sometimes emphasis classes cannot be applied due to the specificity of another selector. In most cases, a sufficient workaround is to wrap your text in a <span> with the class.

Abbreviations

Stylized implementation of HTML's <abbr> element for abbreviations and acronyms to show the expanded version on hover. Abbreviations with a title attribute have a light dotted bottom border and a help cursor on hover, providing additional context on hover.

Basic abbreviation

For expanded text on long hover of an abbreviation, include the title attribute with the <abbr> element.

This is going to be an example of an Abbr.

<abbr title="Abbreviation">Abbr</abbr>

Initialism

Add .initialism to an abbreviation for a slightly smaller font-size.

HTML is the best thing since sliced bread.

<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>

Addresses

Present contact information for the nearest ancestor or the entire body of work. Preserve formatting by ending all lines with <br>.

Standard Process
1200 West Royal Lee Drive
Palmyra, WI 53156
P: (800) 848-5061

Full Name
first.last@example.com

<address>
  <strong>Standard Process</strong>
  1200 West Royal Lee Drive<br />
  Palmyra, WI 53156<br />
  <abbr title="Phone">P:< (800) 848-5061
<address>
<address>
  <strong>Full Name<strong><br />
  <a href="mailto:#">first.last@example.com</a>
<address>

Blockquotes

For quoting blocks of content from another source within your document.

Default blockquote

Wrap <blockquote> around any HTML as the quote. For straight quotes, we recommend a <p>.

Use mobile as an excuse to revisit your navigation.

<blockquote>
  <p>Use mobile as an excuse to revisit your navigation.</p>
</blockquote>

Blockquote options

Style and content changes for simple variations on a standard <blockquote>.

Naming a source

Add <small> tag or .small class for identifying the source. Wrap the name of the source work in <cite>.

Use mobile as an excuse to revisit your navigation.
Brad Frost on http://bradfrost.com

<blockquote>
  <p>Use mobile as an excuse to revisit your navigation.</p>
  <small>Brad Frost on <cite title="Brad Frost Dot Com">http://bradfrost.com</cite></small>
</blockquote>

Alternate Displays

Use .pull-right for a floated, right-aligned blockquote.

You can use the .pull-right and .pull-left to float the quote to the right and left of content.

Use mobile as an excuse to revisit your navigation.
Brad Frost on http://bradfrost.com

<blockquote class="pull-right">
  <p>Use mobile as an excuse to revisit your navigation.</p>
  <small>Brad Frost on <cite title="Brad Frost Dot Com">http://bradfrost.com</cite></small>
</blockquote>

Unordered Lists

This is a list item
This is a list item
This is a list item
- This is a sub list, list item
- This is a sub list, list item
- This is a sub list, list item
- This is a sub list, list item
This is a list item
This is a list item

<ul>
  <li>This is a list item</li>
  <li>This is a list item</li>
  <li>This is a list item
    <ul>
	  <li>This is a sub list, list item</li>
	  <li>This is a sub list, list item</li>
	  <li>This is a sub list, list item</li>
	  <li>This is a sub list, list item</li>
    </ul>
  </li>
  <li>This is a list item</li>
  <li>This is a list item</li>
</ul>

Ordered Lists

This is a list item
This is a list item
This is a list item
This is a list item

<ol>
  <li>This is a list item</li>
  <li>This is a list item</li>
  <li>This is a list item</li>
  <li>This is a list item</li>
</ol>

Unstyled Lists

This will remove the bullet and padding from the parent <ul> or <ol> in which the class class="unstyled" is added.

This is a list item
This is a list item
This is a list item
- This is a sub list, list item
- This is a sub list, list item
- This is a sub list, list item
- This is a sub list, list item
This is a list item
This is a list item

<ul class="list-unstyled">
  <li>This is a list item</li>
  <li>This is a list item</li>
  <li>This is a list item
    <ul>
	  <li>This is a sub list, list item</li>
	  <li>This is a sub list, list item</li>
	  <li>This is a sub list, list item</li>
	  <li>This is a sub list, list item</li>
    </ul>
  </li>
  <li>This is a list item</li>
  <li>This is a list item</li>
</ul>

Inline Lists

Place all list items on a single line with display: inline-block; and some light padding.

This is 01
This is 02
This is 03

<ul class="inline">
  <li>This is 01</li>
  <li>This is 02</li>
  <li>This is 03</li>
</ul>

Definition Lists

A list of terms with their associated descriptions.

This is the definition title: This would be the definition data or definition as others would know it as.
This is the definition title: This would be the definition data or definition as others would know it as.
This is the definition title: This would be the definition data or definition as others would know it as.

<dl>
  <dt>This is the definition title</dt>
  <dd>This would be the definition data or definition as others would know it as.</dd>
  <dt>This is the definition title</dt>
  <dd>This would be the definition data or definition as others would know it as.</dd>
  <dt>This is the definition title</dt>
  <dd>This would be the definition data or definition as others would know it as.</dd>
</dl>

Definition Two Column Lists

Make terms and descriptions in <dl> line up side-by-side. Starts off stacked like default <dl>s, but when the navbar expands, so do these.

Definition title: This would be the definition data or definition as others would know it as. This would be the definition data or definition as others would know it as. This would be the definition data or definition as others would know it as.
Another definition title: This would be the definition data or definition as others would know it as. This would be the definition data or definition as others would know it as.
This is the definition title: This would be the definition data or definition as others would know it as.

<dl class="dl-horizontal">
  <dt>Definition title</dt>
  <dd>This would be the definition data or definition as others would know it as.</dd>
  <dt>Another definition title</dt>
  <dd>This would be the definition data or definition as others would know it as.</dd>
  <dt>This is the definition title</dt>
  <dd>This would be the definition data or definition as others would know it as.</dd>
</dl>

Auto-truncating

Horizontal description lists will truncate terms that are too long to fit in the left column with text-overflow. In narrower viewports, they will change to the default stacked layout.

Colors are all defined in the top part of the variables.less file. Variables like demonstrated below are not just for the color: element, they can be used where ever color can be called: background:, gradient: and border: to name a few.

See the cart below the example for a full list of color variables.

The value of @alpha.

.element {
  color: @alpha;
}

Corporate

Color	Variable	Hex Value
	@alpha:	#00573d;
	@bravo:	#a7ca64;
	@charlie:	#5c2946;
	@delta:	#e8a713;
	@echo:	#f58220;
	@foxtrot:	#8a1e04;
	@golf:	#753f00;
	@hotel:	#7d6a55;
	@india:	#fff8dd;

Grays

Color	Variable	Hex Value
	@black:	#000;
	@gray-darker:	#222;
	@gray-dark:	#333;
	@gray:	#555;
	@gray-light:	#999;
	@gray-lighter:	#eee;
	@white:	#fff;

Accent

Color	Variable	Hex Value
	@green:	#0a5744;
	@red:	#9d261d;
	@yellow:	#ffc40d;
	@orange:	#f89406;
	@pink:	#c3325f;
	@purple:	#7a43b6;
	@blue:	#049cdb;
	@blueDark:	#0064cd;

Basic Example

For basic styling—light padding and only horizontal dividers—add the base class .table to any <table>. It may seem super redundant, but given the widespread use of tables for other plugins like calendars and date pickers, we've opted to isolate the custom table styles.

id	Last Name	First Name
1	Smith	John
2	Smith	Jane

<table class="table">
  <thead>
    <tr>
	  <th>...</th>
	</tr>
  </thead>
  <tbody>
    <tr>
	  <td>...</td>
	</tr>
  </tbody>
</table>

Striped rows

Use .table-striped to add zebra-striping to any table row within the <tbody>.

Cross-browser compatibility

Striped tables are styled via the :nth-child CSS selector, which is not available in Internet Explorer 8.

id	Last Name	First Name
1	Smith	John
2	Smith	Jane
3	Doe	Jane

<table class="table table-striped">
  ...
</table>

Bordered Table

Add .table-bordered for borders on all sides of the table and cells.

id	Last Name	First Name
1	Smith	John
2	Smith	Jane
3	Doe	Jane

<table class="table table-bordered">
  ...
</table>

Hover rows

Add .table-hover to enable a hover state on table rows within a <tbody>.

id	Last Name	First Name
1	Smith	John
2	Smith	Jane
3	Doe	Jane

<table class="table table-hover">
  ...
</table>

Condensed table

Add .table-condensed to make tables more compact by cutting cell padding in half.

id	Last Name	First Name
1	Smith	John
2	Smith	Jane
3	Doe	Jane

<table class="table table-condensed">
  ...
</table>

Contextual classes

Use contextual classes to color table rows or individual cells.

`.active`	Applies the hover color to a particular row or cell
`.success`	Indicates a successful or positive action
`.warning`	Indicates a warning that might need attention
`.danger`	Indicates a dangerous or potentially negative action

id	Last Name	First Name
1	Smith	John
2	Smith	Jane
3	Doe	Jane
3	Doe	Jane

<!-- On rows -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
 
<!-- On cells (`td` or `th`) -->
<tr>
  <td class="active">...</td>
  <td class="success">...</td>
  <td class="warning">...</td>
  <td class="danger">...</td>
</tr>

Options

Button styles can be applied to anything with the .btn class applied. However, typically you'll want to apply these to only <a> and <button> elements for the best rendering.

Button	class=""	Description
	`btn btn-default`	Standard gray button with gradient
	`btn btn-primary`	Provides extra visual weight and identifies the primary action in a set of buttons
	`btn btn-success`	Indicates a successful or positive action
	`btn btn-info`	Used as an alternative to the default styles
	`btn btn-warning`	Indicates caution should be taken with this action
	`btn btn-danger`	Indicates a dangerous or potentially negative action
	`btn btn-link`	Deemphasize a button by making it look like a link while maintaining button behavior

<!-- Standard button -->
<button type="button" class="btn btn-default">Default</button>
 
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">Primary</button>
 
<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">Success</button>
 
<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">Info</button>
 
<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">Warning</button>
 
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">Danger</button>
 
<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">Link</button>

Sizes

Fancy larger or smaller buttons? Add .btn-large, .btn-small, or .btn-mini for additional sizes.

<p>
  <button class="btn btn-primary btn-lg" type="button">Large Button</button>
  <button class="btn btn-lg" type="button">Large Button</button>
</p>
<p>
  <button class="btn btn-primary" type="button">Default Button</button>
  <button class="btn btn-default" type="button">Default Button</button>
</p>
<p>
  <button class="btn btn-primary btn-sm" type="button">Small Button</button>
  <button class="btn btn-default btn-sm" type="button">Small Button</button>
</p>
<p>
  <button class="btn btn-primary btn-xs" type="button">Extra Small Button</button>
  <button class="btn btn-default btn-xs" type="button">Extra Small Button</button>
</p>

Create block level buttons—those that span the full width of a parent— by adding .btn-block.

<button class="btn btn-primary btn-lg btn-block" type="button">Block Level Button</button>
<button class="btn btn-default btn-lg btn-block" type="button">BLock Level Button</button>

Active State

Make buttons look unclickable by fading them back 50%.

Anchor Element

Add the .disabled class to <a> buttons.

Primary link Link

<a href="#" class="btn btn-lg btn-primary active">Primary Link</a>
<a href="#" class="btn btn-lg btn-default active">Link</a>

Button Element

Add the .disabled attribute to <button> buttons.

<button type="button" class="btn btn-lg btn-primary active">Primary Button</button>
<button type="button" class="btn btn-lg btn-default active">Button</button>

Disabled State

Make buttons look unclickable by fading them back 50%.

Anchor Element

Add the .disabled class to <a> buttons.

Primary link Link

<a href="#" class="btn btn-lg btn-primary disabled">Primary Link</a>
<a href="#" class="btn btn-lg btn-default disabled">Link</a>

Button Element

Add the .disabled attribute to <button> buttons.

<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary Button</button>
<button type="button" class="btn btn-lg btn-default" disabled="disabled">Button</button>

Button Tags

Use the .btn class on an <a>, <button>, or <input> element.

Link

<a class="btn btn-default" href="">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">

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

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

Close Icon

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

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

Carets

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

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

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>

// Classes
.pull-left {
  float: left !important;
}
.pull-right {
  float: right !important;
}
 
// Usage as mixins
.element {
  .pull-left();
}
.another-element {
  .pull-right();
}

Centered Content Blocks

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

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

// Classes
.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
 
// Usage as mixins
.element {
  .center-block();
}

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.

<div class="clearfix">...</div>

// Mixin itself
.clearfix() {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}
 
// Usage as a Mixin
.element {
  .clearfix();
}

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

.hide is available, but it does not always affect screen readers and is deprecated as of 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>

// Classes
.show {
  display: block !important;
}
.hidden {
  display: none !important;
  visibility: hidden !important;
}
.invisible {
  visibility: hidden;
}
 
// Usage as mixins
.element {
  .show();
}
.another-element {
  .hidden();
}

Screen reader content

Hide an element to all devices except screen readers with .sr-only. Necessary for following accessibility best practices. Can also be used as a mixin.

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

// Usage as a Mixin
.skip-navigation {
  .sr-only();
}

Image replacement

Utilize the .text-hide class or mixin to help replace an element's text content with a background image.

<h1 class="text-hide" href="">Heading</h1>

// Usage as a Mixin
.heading {
  .text-hide();
}

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.

Available Classes

Use a single or combination of the available classes for toggling content across viewport breakpoints.

	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

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

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

Test classes

Resize your browser or load on different devices to test the responsive utility classes.

Visible on...

Green checkmarks indicate the element is visible in your current viewport.

Extra Small ✔ Visible on x-small

Small ✔ Visible on small

Medium ✔ Visible on medium

Large ✔ Visible on large

Extra small and small ✔ Visible on x-small and small

Medium and large ✔ Visible on medium and large

Extra small and medium ✔ Visible on x-small and medium

Small and large ✔ Visible on small and large

Extra small and large ✔ Visible on x-small and large

Small and medium ✔ Visible on small and medium

Hidden on...

Here, green checkmarks also indicate the element is hidden in your current viewport.

Extra Small ✔ Hidden on x-small

Small ✔ Hidden on small

Medium ✔ Hidden on medium

Large ✔ Hidden on large

Extra small and small ✔ Hidden on x-small and small

Medium and large ✔ Hidden on medium and large

Extra small and medium ✔ Hidden on x-small and medium

Small and large ✔ Hidden on small and large

Extra small and large ✔ Hidden on x-small and large

Small and medium ✔ Hidden on small and medium

Typography

Headings

<h1> - Heading One

<h2> - Heading Two

<h3> - Heading Three

<h4> - Heading Four

<h5> - Heading Five

<h6> - Heading Six

<h1> - Heading One Secondary text

<h2> - Heading Two Secondary text

<h3> - Heading Three Secondary text

<h4> - Heading Four Secondary text

<h5> - Heading Five Secondary text

<h6> - Heading Six Secondary text

Body Copy

Lead Body Copy

Built with Less

Emphasis

Small text

Bold

Italic

Alternate elements

Alignment

Emphasis classes

Dealing with specificity

Abbreviations

Basic abbreviation

Initialism

Addresses

Blockquotes

Default blockquote

Blockquote options

Naming a source

Alternate Displays

Lists

Unordered Lists

Ordered Lists

Unstyled Lists

Inline Lists

Definition Lists

Definition Two Column Lists

Auto-truncating

Colors

The value of @alpha.

Corporate

Grays

Accent

Tables

Basic Example

Striped rows

Cross-browser compatibility

Bordered Table

Hover rows

Condensed table

Contextual classes

Buttons

Options

Sizes

Active State

Anchor Element

Button Element

Disabled State

Anchor Element

Button Element

Button Tags

Images

Helper classes

Close Icon

Carets

Quick Floats

Centered Content Blocks

Clearfix

Showing and Hiding Content

Screen reader content

Image replacement

Responsive Utilities

Available Classes

Print classes

Test classes

Visible on...