Typography

# Headings

All HTML headings, <h1> through </h1> are available.

h1. Heading 1

h2. Heading 2

h3. Heading 3

h4. Heading 4

h5. Heading 5

h6. Heading 6

# Body copy

Piment's global default font-size is 16px, with a line-height of 24px.

This is applied to the <body> and all paragraphs. In addition, <p> (paragraphs) receive a bottom margin of half their line-height (10px by default).

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

<p>...</p>

# Lead body copy

Make a paragraph stand out by adding .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

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

# Emphasis

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

<small>

For de-emphasizing inline or blocks of text, use the small tag.

This line of text is meant to be treated as fine print.

<p><small>This line of text is meant to be treated as fine print.</small></p>

# Bold

For emphasizing a snippet of text with a heavier font-weight.

The following snippet of text is rendered as bold text.

<p>The following snippet of text is <strong>rendered as bold text</strong>.</p>

# Italics

For emphasizing a snippet of text with italics.

The following snippet of text is rendered as italicized text.

<p>The following snippet of text is rendered as <em>italicized</em> text.</p>

Heads up! 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 classes

Easily realign text to components with text alignment classes.

Left aligned text.

Center aligned text.

Right aligned text.

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>

# Emphasis classes

Convey meaning through color with a handful of emphasis utility classes.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

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

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

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

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

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

<abbr>

For expanded text on long hover of an abbreviation, include the title attribute.

An abbreviation of the word attribute is attr.

<p>An abbreviation of the word attribute is <abbr title="You're Beautiful" tabindex="0">attr</abbr>.</p>

# Addresses

Present contact information for the nearest ancestor or the entire body of work.

<address>

Preserve formatting by ending all lines with <br>.

Piment CSS
1 paradise road
Fort-de-France, MQ 97200
P: +596 596 00 00 00

Full Name
first.last@example.com

<address>
    <strong>Piment CSS</strong><br>
    1 paradise road<br>
    Fort-de-France, MQ 97232<br>
    <abbr title="Phone">P:</abbr> +596 596 00 00 00
</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>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

<blockquote>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

Blockquote options

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

Naming a source

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Someone famous in Source Title

Alternate displays

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Someone famous in Source Title

<blockquote class="alternative">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
    <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

# Lists

Unordered

A list of items in which the order does not explicitly matter.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

<ul>
  <li>...</li>
</ul>

Ordered

A list of items in which the order does explicitly matter.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

<ol>
  <li>...</li>
</ol>

Unstyled

Remove the default list-style and left padding on list items (immediate children only).

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

<ul class="unstyled">
  <li>...</li>
</ul>

Inline

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

Lorem ipsum
Phasellus iaculis
Nulla volutpat

# Description

A list of terms with their associated descriptions.

Description lists: A description list is perfect for defining terms.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.; Donec id elit non mi porta gravida at eget metus.
Malesuada porta: Etiam porta sem malesuada magna mollis euismod.

<dl>
  <dt>...</dt>
  <dd>...</dd>
</dl>

Horizontal description

Make terms and descriptions in <dl> line up side-by-side.

Description lists: A description list is perfect for defining terms.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.; Donec id elit non mi porta gravida at eget metus.
Malesuada porta: Etiam porta sem malesuada magna mollis euismod.
Felis euismod semper eget lacinia: Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

<dl class="dl-horizontal">
  <dt>...</dt>
  <dd>...</dd>
</dl>

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

Circle Around

Adding a circle around a number can be easily done.

5 Work

9 items in your basket.

<h3><span class="circle">5</span> Work</h3>
<p><span class="circle">9</span> items in your basket.</p>

Tooltip

You can change the style of the title attribute with the .tooltip class.

Title line Tooltip showing up when your mouse over the link.

<h3><a href="#" class="tooltip">Title line <span>Tooltip showing up when your mouse over the link.</span></a></h3>

Code

Inline

Wrap inline snippets of code with <code>.

For example, <section> should be wrapped as inline.

For example, <code>&lt;section&gt;</code> should be wrapped as inline.

Basic block

Use <pre> for multiple lines of code. Be sure to escape any angle brackets in the code for proper rendering.

<p>Sample text here...</p>

<pre>
  &lt;p&gt;Sample text here...&lt;/p&gt;
</pre>

Heads up! Be sure to keep code within <pre> tags as close to the left as possible; it will render all tabs.
You may optionally add the .pre-scrollable class which will set a max-height of 350px and provide a y-axis scrollbar.

Add margin to a single side

Control the margin on one side of an element using the m{t|r|b|l}-{size} utilities.

For example, mt-1 would add 1em of margin to the top of an element, mr-4 would add 8em of margin to the right of an element, mb-2 would add 2rem of margin to the bottom of an element, and ml-2 would add 0.5rem of margin to the left of an element.

<div class="mt-1 ...">mt-1</div>
<div class="mr-4 ...">mr-4</div>
<div class="mb-2 ...">mb-2</div>
<div class="ml-3 ...">ml-3</div>

Add horizontal margin

Control the horizontal margin of an element using the mx-{size} utilities.

Buttons

# Default buttons

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-blue`	First color, you can change it to match our branding.
	`btn-orange`	Second color, you can change it to match our branding.
	`btn-blue-light`	Blue light button
	`btn-black`	Black button
	`btn-white`	White button
	`btn-info`	Info button
	`btn-error`	Error button

Outlined buttons

Button	class=""	Description
	`btn-outlined-blue`	Blue outlined button
	`btn-outlined-orange`	Orange outlined button
	`btn-outlined-blue-light`	Blue light outlined button
	`btn-outlined-black`	Black outlined button
	`btn-outlined-info`	Info outlined button
	`btn-outlined-error`	Error outlined button

Options buttons

Button	HTML	Description
Blue	`<a class="option-blue"> <span class="circle" aria-hidden="true"><span class="icon arrow"></span></span> <span class="button-text">Option blue</span> </a>`	Option blue button
Orange	`<a class="option-orange"> <span class="circle" aria-hidden="true"><span class="icon arrow"></span></span> <span class="button-text">Option orange</span> </a>`	Option orange button
Blue light	`<a class="option-blue-light"> <span class="circle" aria-hidden="true"><span class="icon arrow"></span></span> <span class="button-text">Blue light</span> </a>`	Option blue light button
Black	`<a class="option-black"> <span class="circle" aria-hidden="true"><span class="icon arrow"></span></span> <span class="button-text">Option black</span> </a>`	Option black button
Info	`<a class="option-info"> <span class="circle" aria-hidden="true"><span class="icon arrow"></span></span> <span class="button-text">Option info</span> </a>`	Option info button
Error	`<a class="option-error"> <span class="circle" aria-hidden="true"><span class="icon arrow"></span></span> <span class="button-text">Option error</span> </a>`	Option error button

Action buttons

Button	HTML	Description
	`<button class="action-blue"><span>Action blue</span></button>`	Action blue button
	`<button class="action-orange"><span>Action orange</span></button>`	Action orange button
	`<button class="action-blue-light"><span>Action blue light</span></button>`	Action blue light button
	`<button class="action-info"><span>Action info</span></button>`	Action info button
	`<button class="action-black"><span>Action black</span></button>`	Action black button
	`<button class="action-white"><span>Action white</span></button>`	Action white button

Tables

# Default styles

For basic styling—light padding and only horizontal dividers—add the base class .table to any <table>.

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

<table class="table">
  …
</table>

Optional classes

Add any of the following classes to the .table base class.

.table-striped

Adds zebra-striping to any table row within the via the :nth-child CSS selector (not available in IE7-8).

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

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

.table-bordered

Add borders and rounded corners to the table.

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
1	Mark	Otto	@getbootstrap
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

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

.table-hover

Enable a hover state on table rows within a .

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

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

.table-condensed

Makes tables more compact by cutting cell padding in half.

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

Supported table markup

List of supported table HTML elements and how they should be used.

Tag	Description
`<table>`	Wrapping element for displaying data in a tabular format
`<thead>`	Container element for table header rows (`<tr>`) to label table columns
`<tbody>`	Container element for table rows (`<tr>`) in the body of the table
`<tr>`	Container element for a set of table cells (`<td>` or `<th>`) that appears on a single row
`<td>`	Default table cell
`<th>`	Special table cell for column (or row, depending on scope and placement) labels
`<caption>`	Description or summary of what the table holds, especially useful for screen readers

<table>
    <caption>...</caption>
    <thead>
        <tr>
            <th>...</th>
            <th>...</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>...</td>
            <td>...</td>
        </tr>
  </tbody>
</table>

Forms

# Default styles

Individual form controls receive styling, but without any required base class on the <form> or large changes in markup. Results in stacked, left-aligned labels on top of form controls.

Images

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-polaroid">

Image hover

<img src="..." class="img-hover">

Image hover blur

The first effect that we’re going for is a simple blur. Long has man sought to blur pixels with CSS alone and now it’s finally possible with one little line of code!

<figure class="img-blur"><img src="..." alt=""></figure>

Image hover sepia

The second effect that we’re going for is a simple sepia .img-sepia.

<a class="img-sepia"><img src="..." alt=""></a>

Image hover grayscale

The third effect that we’re going for is a simple grayscale .img-grayscale .

<a class="img-grayscale"><img src="..." alt=""></a>

Spacing

Padding

Utilities for controlling an element's padding.

Class	Properties
p-0	padding: 0px;
px-0	padding-left: 0px; padding-right: 0px;
py-0	padding-top: 0px; padding-bottom: 0px;
pt-0	padding-top: 0px;
pr-0	padding-right: 0px;
pb-0	padding-bottom: 0px;
pl-0	padding-left: 0px;
p-1	padding: 1em;
px-1	padding-left: 1em; padding-right: 1em;
py-1	padding-top: 1em; padding-bottom: 1em;
pt-1	padding-top: 1em;
pr-1	padding-right: 1rem;
pb-1	padding-bottom: 1em;
pl-1	padding-left: 1em;
p-2	padding: 2em;
px-2	padding-left: 2em; padding-right: 2em;
py-2	padding-top: 2em; padding-bottom: 2em;
pt-2	padding-top: 2em;
pr-2	padding-right: 2em;
pb-2	padding-bottom: 2em;
pl-2	padding-left: 2em;
p-3	padding: 4em;
px-3	padding-left: 4em; padding-right: 4rem;
py-3	padding-top: 4em; padding-bottom: 4em;
pt-3	padding-top: 4em;
pr-3	padding-right: 4em;
pb-3	padding-bottom: 4em;
pl-3	padding-left: 4em;
p-4	padding: 6rem;
px-4	padding-left: 6em; padding-right: 6em;
py-4	padding-top: 6em; padding-bottom: 6em;
pt-4	padding-top: 6em;
pr-4	padding-right: 6em;
pb-4	padding-bottom: 6em;
pl-4	padding-left: 6em;
p-5	padding: 8em;
px-5	padding-left: 8em; padding-right: 8em;
py-5	padding-top: 8em; padding-bottom: 8em;
pt-5	padding-top: 8em;
pr-5	padding-right: 8em;
pb-5	padding-bottom: 8em;
pl-5	padding-left: 8em;

Add padding to a single side

Control the padding on one side of an element using the p{t|r|b|l}-{size} utilities.

For example, pt-3 would add 4em of padding to the top of an element, pr-2 would add 2em of padding to the right of an element, pb-1 would add 1em of padding to the bottom of an element.

<div class="pt-3 ...">pt-3</div>
<div class="pr-2 ...">pr-2</div>
<div class="pb-1 ...">pb-1</div>

Add horizontal padding

Control the horizontal padding of an element using the px-{size} utilities.

<div class="px-4 ...">px-4</div>

Add vertical padding

Control the vertical padding of an element using the py-{size} utilities.

<div class="py-2 ...">px-2</div>

Add padding to all sides

Control the padding on all sides of an element using the p-{size} utilities.

<div class="p-3 ...">p-3</div>

Margin

Utilities for controlling an element's margin.

Class	Properties
m-0	margin: 0px;
mx-0	margin-left: 0px; margin-right: 0px;
my-0	margin-top: 0px; margin-bottom: 0px;
mt-0	margin-top: 0px;
mr-0	margin-right: 0px;
mb-0	margin-bottom: 0px;
ml-0	margin-left: 0px;
m-1	margin: 1em;
mx-1	margin-left: 1em; margin-right: 1em;
my-1	margin-top: 1em; margin-bottom: 1em;
mt-1	margin-top: 1em;
mr-1	margin-right: 1rem;
mb-1	margin-bottom: 1em;
ml-1	margin-left: 1em;
m-2	margin: 2em;
mx-2	margin-left: 2em; margin-right: 2em;
my-2	margin-top: 2em; margin-bottom: 2em;
mt-2	margin-top: 2em;
mr-2	margin-right: 2em;
mb-2	margin-bottom: 2em;
ml-2	margin-left: 2em;
m-3	margin: 4em;
mx-3	margin-left: 4em; margin-right: 4rem;
my-3	margin-top: 4em; margin-bottom: 4em;
mt-3	margin-top: 4em;
mr-3	margin-right: 4em;
mb-3	margin-bottom: 4em;
ml-3	margin-left: 4em;
m-4	margin: 6rem;
mx-4	margin-left: 6em; margin-right: 6em;
my-4	margin-top: 6em; margin-bottom: 6em;
mt-4	margin-top: 6em;
mr-4	margin-right: 6em;
mb-4	margin-bottom: 6em;
ml-4	margin-left: 6em;
m-5	margin: 8em;
mx-5	margin-left: 8em; margin-right: 8em;
my-5	margin-top: 8em; margin-bottom: 8em;
mt-5	margin-top: 8em;
mr-5	margin-right: 8em;
mb-5	margin-bottom: 8em;
ml-5	margin-left: 8em;

Add margin to a single side

Control the margin on one side of an element using the m{t|r|b|l}-{size} utilities.

For example, mt-5 would add 8em of margin to the top of an element, mr-4 would add 6eem of margin to the right of an element, mb-1 would add 1rem of margin to the bottom of an element, and ml-2 would add 2em of margin to the left of an element.

<div class="mt-5 ...">mt-5</div>
<div class="mr-4 ...">mr-4</div>
<div class="mb-1 ...">mb-1</div>
<div class="ml-2 ...">ml-2</div>

Add horizontal margin

Control the horizontal margin of an element using the mx-{size} utilities.

<div class="mx-1 ...">mx-1</div>

Add vertical margin

Control the vertical margin of an element using the my-{size} utilities.

<div class="my-1 ...">my-1</div>

Add margin to all sides

Control the margin on all sides of an element using the m-{size} utilities.

<div class="m-2 ...">m-2</div>

Documentation

Typography

# Headings

h1. Heading 1

h2. Heading 2

h3. Heading 3

h4. Heading 4

h5. Heading 5

h6. Heading 6

# Body copy

# Lead body copy

# Emphasis

# Bold

# Italics

# Alignment classes

# Emphasis classes

# Abbreviations

# Addresses

# Blockquotes

Default blockquote

Blockquote options

Naming a source

Alternate displays

# Lists

Unordered

Ordered

Unstyled

Inline

# Description

Horizontal description

Circle Around

5 Work

Tooltip

Title line Tooltip showing up when your mouse over the link.

Code

Inline

Basic block

Add margin to a single side

Add horizontal margin

Buttons

# Default buttons

Outlined buttons

Options buttons

Action buttons

Tables

# Default styles

Optional classes

Supported table markup

Forms

# Default styles

Images

Image hover

Image hover blur

Image hover sepia

Image hover grayscale

Spacing

Padding

Add padding to a single side

Add horizontal padding

Add vertical padding

Add padding to all sides

Margin

Add margin to a single side

Add horizontal margin

Add vertical margin

Add margin to all sides