<!-- Typography
================================================== -->
<div class="page-header">
<h1>Typography</h1>
</div>
<div class="gantry-width-block gantry-width-50">
<div class="largemarginright">
<h2 id="headings">Headings</h2>
<p>All HTML headings, <code>&lt;h1&gt;</code> through <code>&lt;h6&gt;</code> are available.</p>
<div class="gantry-example">
<h1>h1. Heading 1</h1>
<h2>h2. Heading 2</h2>
<h3>h3. Heading 3</h3>
<h4>h4. Heading 4</h4>
<h5>h5. Heading 5</h5>
<h6>h6. Heading 6</h6>
</div>
<h3>Built with Less</h3>
<p>The typographic scale is based on two LESS variables in <strong>variables.less</strong>: <code>@baseFontSize</code> and <code>@baseLineHeight</code>. 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.</p>
</div>
</div>
<div class="gantry-width-block gantry-width-50">
<div class="largemarginleft">
<h2 id="body-copy">Body copy</h2>
<p>Bootstrap's global default <code>font-size</code> is <strong>14px</strong>, with a <code>line-height</code> of <strong>1.7em</strong>. This is applied to the <code>&lt;body&gt;</code> and all paragraphs. In addition, <code>&lt;p&gt;</code> (paragraphs) receive a bottom margin of half their line-height (9px by default).</p>
<div class="gantry-example">
<p>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.</p>
</div>
<pre class="prettyprint">&lt;p&gt;...&lt;/p&gt;</pre>
<h3>Lead body copy</h3>
<p>Make a paragraph stand out by adding <code>.lead</code>.</p>
<div class="gantry-example">
<p class="lead">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
</div>
<pre class="prettyprint">&lt;p class="lead"&gt;...&lt;/p&gt;</pre>
</div>
</div>
<div class="clear"> </div>

<!-- SEPARATOR -->
<h2 id="emphasis">Emphasis</h2>
<p><span>Make use of HTML's default emphasis tags with lightweight styles.</span></p>
<div class="gantry-width-block gantry-width-50">
<div class="largemarginright">
<h4><code>&lt;em&gt;</code></h4>
<p>For emphasizing a snippet of text with <em>stress</em></p>
<div class="gantry-example">
<p>The following snippet of text is <em>rendered as italicized text</em>.</p>
</div>
<pre class="prettyprint">&lt;em&gt;rendered as italicized text&lt;/em&gt;</pre>
<h4><code>&lt;strong&gt;</code></h4>
<p>For emphasizing a snippet of text with <strong>important</strong></p>
<div class="gantry-example">
<p>The following snippet of text is <strong>rendered as bold text</strong>.</p>
</div>
<pre class="prettyprint">&lt;strong&gt;rendered as bold text&lt;/strong&gt;</pre>
</div>
</div>
<div class="gantry-width-block gantry-width-50">
<div class="largemarginleft">
<h4><code>&lt;small&gt;</code></h4>
<p>For de-emphasizing inline or blocks of text, <small>use the small tag.</small></p>
<div class="gantry-example">
<p><small>This line of text is meant to be treated as fine print.</small></p>
</div>
<pre class="prettyprint">&lt;p&gt;
  &lt;small&gt;This line of text is meant to be treated as fine print.&lt;/small&gt;
&lt;/p&gt;</pre>
<br />
<p><strong>Note:</strong> Feel free to use <code>&lt;b&gt;</code> and <code>&lt;i&gt;</code> in HTML5. <code>&lt;b&gt;</code> is meant to highlight words or phrases without conveying additional importance while <code>&lt;i&gt;</code> is mostly for voice, technical terms, etc.</p>
</div>
</div>
<div class="clear"> </div>

<h3>Notice Styles</h3>

<p>Use the <code>&lt;p&gt;</code> tag with <code>.success</code>, <code>.warning</code>, <code>.info</code> or <code>.error</code> classes.</p>

<div class="gantry-width-block gantry-width-50">
<div class="largemarginright">
<div class="gantry-example"><p class="success">Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p></div>
<pre class="prettyprint">&lt;p class=&quot;success&quot;&gt;...&lt;/p&gt;</pre>

<div class="gantry-example"><p class="info">Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p></div>
<pre class="prettyprint">&lt;p class=&quot;info&quot;&gt;...&lt;/p&gt;</pre>
</div></div>	

<div class="gantry-width-block gantry-width-50">
<div class="largemarginleft">
<div class="gantry-example"><p class="warning">Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p></div>
<pre class="prettyprint">&lt;p class=&quot;warning&quot;&gt;...&lt;/p&gt;</pre>

<div class="gantry-example"><p class="error">Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p></div>
<pre class="prettyprint">&lt;p class=&quot;error&quot;&gt;...&lt;/p&gt;</pre>
</div></div>

<div class="clear"></div>

<!-- SEPARATOR -->
<div class="gantry-width-block gantry-width-50">
<div class="largemarginright">
<h2 id="abbreviations">Abbreviations</h2>
<p>Stylized implementation of HTML's <code>&lt;abbr&gt;</code> element for abbreviations and acronyms to show the expanded version on hover. Abbreviations with a <code>title</code> attribute have a light dotted bottom border and a help cursor on hover, providing additional context on hover.</p>
<h4><code>&lt;abbr&gt;</code></h4>
<p>For expanded text on long hover of an abbreviation, include the <code>title</code> attribute.</p>
<div class="gantry-example">
<p>An abbreviation of the word attribute is <abbr title="attribute">attr</abbr>.</p>
</div>
<pre class="prettyprint">&lt;abbr title="attribute"&gt;attr&lt;/abbr&gt;</pre>
<h4><code>&lt;abbr class="initialism"&gt;</code></h4>
<p>Add <code>.initialism</code> to an abbreviation for a slightly smaller font-size.</p>
<div class="gantry-example">
<p><abbr class="initialism" title="HyperText Markup Language">HTML</abbr> is the best thing since sliced bread.</p>
</div>
<pre class="prettyprint">&lt;abbr title="attribute" class="initialism"&gt;attr&lt;/abbr&gt;</pre>
</div>
</div>
<div class="gantry-width-block gantry-width-50">
<div class="largemarginleft">
<h2 id="addresses">Addresses</h2>
<p>Present contact information for the nearest ancestor or the entire body of work.</p>
<h4><code>&lt;address&gt;</code></h4>
<p>Preserve formatting by ending all lines with <code>&lt;br&gt;</code>.</p>
<div class="gantry-example"><address><strong>Twitter, Inc.</strong><br /> 795 Folsom Ave, Suite 600<br /> San Francisco, CA 94107<br /> <abbr title="Phone">P:</abbr> (123) 456-7890</address><address><strong>Full Name</strong><br /> <a href="mailto:">first.last@gmail.com</a></address></div>
<pre class="prettyprint linenums">&lt;address&gt;
  &lt;strong&gt;Twitter, Inc.&lt;/strong&gt;&lt;br&gt;
  795 Folsom Ave, Suite 600&lt;br&gt;
  San Francisco, CA 94107&lt;br&gt;
  &lt;abbr title="Phone"&gt;P:&lt;/abbr&gt; (123) 456-7890
&lt;/address&gt;
&lt;address&gt;
  &lt;strong&gt;Full Name&lt;/strong&gt;&lt;br&gt;
  &lt;a href="mailto:#"&gt;first.last&#064;gmail.com&lt;/a&gt;
&lt;/address&gt;
</pre>
</div>
</div>
<div class="clear"> </div>

<!-- SEPARATOR -->
<h2 id="blockquotes">Blockquotes</h2>
<p>For quoting blocks of content from another source within your document.</p>
<h3>Default blockqoute</h3>
<p>Wrap <code>&lt;blockquote&gt;</code> around any <abbr title="HyperText Markup Language">HTML</abbr> as the quote. For straight quotes we recommend a <code>&lt;p&gt;</code>.</p>
<div class="gantry-example">
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>
</div>
<pre class="prettyprint linenums">&lt;blockquote&gt;
  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.&lt;/p&gt;
&lt;/blockquote&gt;</pre>
<h3>Blockquote options</h3>
<p><span>Style and content changes for simple variations on a standard blockquote.</span></p>
<div class="gantry-width-block gantry-width-50">
<div class="largemarginright">
<h4>Naming a source</h4>
<p>Add <code>&lt;small&gt;</code> tag for identifying the source. Wrap the name of the source work in <code>&lt;cite&gt;</code>.</p>
<div class="gantry-example">
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<small>Someone famous in <cite title="Source Title">Source Title</cite></small></blockquote>
</div>
<pre class="prettyprint linenums">&lt;blockquote&gt;
  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.&lt;/p&gt;
  &lt;small&gt;Someone famous &lt;cite title="Source Title"&gt;Source Title&lt;/cite&gt;&lt;/small&gt;
&lt;/blockquote&gt;</pre>
</div>
</div>
<div class="gantry-width-block gantry-width-50">
<div class="largemarginleft">
<h4>Alternate displays</h4>
<p>Use <code>.pull-right</code> for a floated, right-aligned blockquote.</p>
<div class="gantry-example" style="overflow: hidden;">
<blockquote class="pull-right">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<small>Someone famous in <cite title="Source Title">Source Title</cite></small></blockquote>
</div>
<pre class="prettyprint linenums">&lt;blockquote class="pull-right"&gt;
  ...
&lt;/blockquote&gt;</pre>
</div>
</div>
<div class="clear"> </div>

<!-- SEPARATOR -->
<!-- Lists -->
<h2 id="lists">Lists</h2>
<div class="clear"></div>
<div class="gantry-width-block gantry-width-33">
<div class="largemarginright">
<h3>Unordered</h3>
<p>A list of items in which the order does <em>not</em> explicitly matter.</p>
<div class="gantry-example">
<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>Nulla volutpat aliquam velit
<ul>
<li>Phasellus iaculis neque</li>
<li>Purus sodales ultricies</li>
<li>Vestibulum laoreet porttitor sem</li>
<li>Ac tristique libero volutpat at</li>
</ul>
</li>
<li>Faucibus porta lacus fringilla vel</li>
<li>Eget porttitor lorem</li>
</ul>
</div>
<pre class="prettyprint linenums">&lt;ul&gt;
  &lt;li&gt;...&lt;/li&gt;
&lt;/ul&gt;</pre>
</div>
</div>
<div class="gantry-width-block gantry-width-33">
<div class="largemarginright">
<h3>Ordered</h3>
<p>A list of items in which the order <em>does</em> explicitly matter.</p>
<div class="gantry-example"><ol>
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Integer molestie lorem at massa</li>
<li>Facilisis in pretium nisl aliquet</li>
<li>Nulla volutpat aliquam velit</li>
<li>Faucibus porta lacus fringilla vel</li>
<li>Aenean sit amet erat nunc</li>
<li>Eget porttitor lorem</li>
</ol></div>
<pre class="prettyprint linenums">&lt;ol&gt;
  &lt;li&gt;...&lt;/li&gt;
&lt;/ol&gt;</pre>
</div>
</div>
<div class="gantry-width-block gantry-width-33">
<div class="largemarginright">
<h3>Unstyled</h3>
<p>A list of items with no <code>list-style</code> or additional left padding.</p>
<div class="gantry-example">
<ul class="unstyled">
<li>Lorem ipsum dolor sit amet</li>
<li>Nulla volutpat aliquam velit
<ul>
<li>Phasellus iaculis neque</li>
<li>Purus sodales ultricies</li>
<li>Vestibulum laoreet porttitor sem</li>
<li>Ac tristique libero volutpat at</li>
</ul>
</li>
<li>Faucibus porta lacus fringilla vel</li>
<li>Eget porttitor lorem</li>
</ul>
</div>
<pre class="prettyprint linenums">&lt;ul class="unstyled"&gt;
  &lt;li&gt;...&lt;/li&gt;
&lt;/ul&gt;</pre>
</div>
</div>
<div class="clear"> </div>
<div class="gantry-width-block gantry-width-50">
<div class="largemarginright">
<h3>Description</h3>
<p>A list of terms with their associated descriptions.</p>
<div class="gantry-example"><dl><dt>Description lists</dt><dd>A description list is perfect for defining terms.</dd><dt>Euismod</dt><dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd><dd>Donec id elit non mi porta gravida at eget metus.</dd><dt>Malesuada porta</dt><dd>Etiam porta sem malesuada magna mollis euismod.</dd></dl></div>
<pre class="prettyprint linenums">&lt;dl&gt;
  &lt;dt&gt;...&lt;/dt&gt;
  &lt;dd&gt;...&lt;/dd&gt;
&lt;/dl&gt;</pre>
<br />
<p><strong>Note:</strong> Horizontal description lists will truncate terms that are too long to fit in the left column fix <code>text-overflow</code>. In narrower viewports, they will change to the default stacked layout.</p>
</div>
</div>
<div class="gantry-width-block gantry-width-50">
<div class="largemarginleft">
<h3>Horizontal description</h3>
<p>Make terms and descriptions in <code>&lt;dl&gt;</code> line up side-by-side.</p>
<div class="gantry-example"><dl class="dl-horizontal"><dt>Description lists</dt><dd>A description list is perfect for defining terms.</dd><dt>Euismod</dt><dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd><dd>Donec id elit non mi porta gravida at eget metus.</dd><dt>Malesuada porta</dt><dd>Etiam porta sem malesuada magna mollis euismod.</dd><dt>Felis euismod semper eget lacinia</dt><dd>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd></dl></div>
<pre class="prettyprint linenums">&lt;dl class="dl-horizontal"&gt;
  &lt;dt&gt;...&lt;/dt&gt;
  &lt;dd&gt;...&lt;/dd&gt;
&lt;/dl&gt;</pre>
</div>
</div>
<div class="clear"> </div>

<!-- Code
================================================== -->
<div class="page-header">
<h1>Code</h1>
</div>
<div class="gantry-width-block gantry-width-50">
<div class="largemarginright">
<h2>Inline</h2>
<p>Wrap inline snippets of code with <code>&lt;code&gt;</code>.</p>
<div class="gantry-example">For example, <code>&lt;section&gt;</code> should be wrapped as inline.</div>
<pre class="prettyprint linenums">For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inline.</pre>
<p><strong>Note:</strong> Be sure to keep code within <code>&lt;pre&gt;</code> tags as close to the left as possible; it will render all tabs.</p>
<p>You may optionally add the <code>.pre-scrollable</code> class which will set a max-height of 350px and provide a y-axis scrollbar.</p>
</div>
</div>
<div class="gantry-width-block gantry-width-50">
<div class="largemarginleft">
<h2>Basic block</h2>
<p>Use <code>&lt;pre&gt;</code> for multiple lines of code. Be sure to escape any angle brackets in the code for proper rendering.</p>
<div class="gantry-example">
<pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>
</div>
<pre class="prettyprint linenums" style="margin-bottom: 9px;">&lt;pre&gt;
  &amp;lt;p&amp;gt;Sample text here...&amp;lt;/p&amp;gt;
&lt;/pre&gt;</pre>
</div>
</div>
<div class="clear"> </div>
<!-- Tables
================================================== -->
<div class="page-header">
<h1>Tables</h1>
</div>
<h2>Default styles</h2>
<p>For basic styling—light padding and only horizontal dividers—add the base class <code>.table</code> to any <code>&lt;table&gt;</code>.</p>
<div class="gantry-example">
<table class="table">
<thead>
<tr><th>#</th><th>First Name</th><th>Last Name</th><th>Username</th></tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
<pre class="prettyprint linenums">&lt;table class="table"&gt;
  …
&lt;/table&gt;</pre>

<!-- SEPARATOR -->
<h2>Optional classes</h2>
<p><span>Add any of the follow classes to the <code>.table</code> base class.</span></p>
<div class="gantry-width-block gantry-width-50">
<div class="largemarginright">
<h4><code>.table-striped</code></h4>
<p>Adds zebra-striping to any table row within the <code>&lt;tbody&gt;</code> via the <code>:nth-child</code> CSS selector (not available in IE7-IE8).</p>
<div class="gantry-example">
<table class="table table-striped">
<thead>
<tr><th>#</th><th>First Name</th><th>Last Name</th><th>Username</th></tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
<pre class="prettyprint linenums" style="margin-bottom: 18px;">&lt;table class="table table-striped"&gt;
  …
&lt;/table&gt;</pre>
<h4><code>.table-hover</code></h4>
<p>Enable a hover state on table rows within a <code>&lt;tbody&gt;</code>.</p>
<div class="gantry-example">
<table class="table table-hover">
<thead>
<tr><th>#</th><th>First Name</th><th>Last Name</th><th>Username</th></tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
<pre class="prettyprint linenums" style="margin-bottom: 18px;">&lt;table class="table table-hover"&gt;
  …
&lt;/table&gt;</pre>
</div>
</div>
<div class="gantry-width-block gantry-width-50">
<div class="largemarginleft">
<h4><code>.table-bordered</code></h4>
<p>Add borders and rounded corners to the table.</p>
<div class="gantry-example">
<table class="table table-bordered">
<thead>
<tr><th>#</th><th>First Name</th><th>Last Name</th><th>Username</th></tr>
</thead>
<tbody>
<tr>
<td rowspan="2">1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>Mark</td>
<td>Otto</td>
<td>@TwBootstrap</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
<pre class="prettyprint linenums">&lt;table class="table table-bordered"&gt;
  …
&lt;/table&gt;</pre>
<h4><code>.table-condensed</code></h4>
<p>Makes tables more compact by cutting cell padding in half.</p>
<div class="gantry-example">
<table class="table table-condensed">
<thead>
<tr><th>#</th><th>First Name</th><th>Last Name</th><th>Username</th></tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
<pre class="prettyprint linenums" style="margin-bottom: 18px;">&lt;table class="table table-condensed"&gt;
  …
&lt;/table&gt;</pre>
</div>
</div>
<div class="clear"> </div>

<!-- SEPARATOR -->
<h2>Optional row classes</h2>
<p>Use contextual classes to color table rows.</p>
<table class="table table-bordered table-striped"><colgroup> <col class="span1" /> <col class="span7" /> </colgroup>
<thead>
<tr><th>Class</th><th>Description</th></tr>
</thead>
<tbody>
<tr>
<td><code>.success</code></td>
<td>Indicates a successful or positive action.</td>
</tr>
<tr>
<td><code>.error</code></td>
<td>Indicates a dangerous or potentially negative action.</td>
</tr>
<tr>
<td><code>.warning</code></td>
<td>Indicates a warning that might need attention.</td>
</tr>
<tr>
<td><code>.info</code></td>
<td>Used as an alternative to the default styles.</td>
</tr>
</tbody>
</table>
<div class="gantry-example">
<table class="table">
<thead>
<tr><th>#</th><th>Product</th><th>Payment Taken</th><th>Status</th></tr>
</thead>
<tbody>
<tr class="success">
<td>1</td>
<td>TB - Monthly</td>
<td>01/04/2012</td>
<td>Approved</td>
</tr>
<tr class="error">
<td>2</td>
<td>TB - Monthly</td>
<td>02/04/2012</td>
<td>Declined</td>
</tr>
<tr class="warning">
<td>3</td>
<td>TB - Monthly</td>
<td>03/04/2012</td>
<td>Pending</td>
</tr>
<tr class="info">
<td>4</td>
<td>TB - Monthly</td>
<td>04/04/2012</td>
<td>Call in to confirm</td>
</tr>
</tbody>
</table>
</div>
<pre class="prettyprint linenums">...
  &lt;tr class="success"&gt;
    &lt;td&gt;1&lt;/td&gt;
    &lt;td&gt;TB - Monthly&lt;/td&gt;
    &lt;td&gt;01/04/2012&lt;/td&gt;
    &lt;td&gt;Approved&lt;/td&gt;
  &lt;/tr&gt;
...</pre>
<h2>Supported table markup</h2>
<p>List of supported table HTML elements and how they should be used.</p>
<table class="table table-bordered table-striped"><colgroup> <col class="span1" /> <col class="span7" /> </colgroup>
<thead>
<tr><th>Tag</th><th>Description</th></tr>
</thead>
<tbody>
<tr>
<td><code>&lt;table&gt;</code></td>
<td>Wrapping element for displaying data in a tabular format</td>
</tr>
<tr>
<td><code>&lt;thead&gt;</code></td>
<td>Container element for table header rows (<code>&lt;tr&gt;</code>) to label table columns</td>
</tr>
<tr>
<td><code>&lt;tbody&gt;</code></td>
<td>Container element for table rows (<code>&lt;tr&gt;</code>) in the body of the table</td>
</tr>
<tr>
<td><code>&lt;tr&gt;</code></td>
<td>Container element for a set of table cells (<code>&lt;td&gt;</code> or <code>&lt;th&gt;</code>) that appears on a single row</td>
</tr>
<tr>
<td><code>&lt;td&gt;</code></td>
<td>Default table cell</td>
</tr>
<tr>
<td><code>&lt;th&gt;</code></td>
<td>Special table cell for column (or row, depending on scope and placement) labels<br /> Must be used within a <code>&lt;thead&gt;</code></td>
</tr>
<tr>
<td><code>&lt;caption&gt;</code></td>
<td>Description or summary of what the table holds, especially useful for screen readers</td>
</tr>
</tbody>
</table>
<pre class="prettyprint linenums">&lt;table&gt;
  &lt;caption&gt;...&lt;/caption&gt;
  &lt;thead&gt;
    &lt;tr&gt;
      &lt;th&gt;...&lt;/th&gt;
      &lt;th&gt;...&lt;/th&gt;
    &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
    &lt;tr&gt;
      &lt;td&gt;...&lt;/td&gt;
      &lt;td&gt;...&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/tbody&gt;
&lt;/table&gt;</pre>
<!-- Forms
================================================== -->
<div class="page-header">
<h1>Forms</h1>
</div>
<div class="gantry-width-block gantry-width-50">
<div class="largemarginright">
<h2>Default styles</h2>
<p>Individual form controls receive styling, but without any required base class on the <code>&lt;form&gt;</code> or large changes in markup. Results in stacked, left-aligned labels on top of form controls.</p>
<form class="gantry-example"><fieldset><legend>Legend</legend> <label>Label name</label> <input type="text" /> <span class="help-block">Example block-level help text here.</span> <label class="checkbox"> <input type="checkbox" /> Check me out </label> <button class="btn" type="submit">Submit</button></fieldset></form>
<pre class="prettyprint linenums">&lt;form&gt;
  &lt;legend&gt;Legend&lt;/legend&gt;
  &lt;label&gt;Label name&lt;/label&gt;
  &lt;input type="text" placeholder="Type something…"&gt;
  &lt;span class="help-block"&gt;Example block-level help text here.&lt;/span&gt;
  &lt;label class="checkbox"&gt;
    &lt;input type="checkbox"&gt; Check me out
  &lt;/label&gt;
  &lt;button type="submit" class="btn"&gt;Submit&lt;/button&gt;
&lt;/form&gt;</pre>
<br />
<h2>Optional layouts</h2>
<p>Included with Bootstrap are three optional form layouts for common use cases.</p>
<h3>Search form</h3>
<p>Add <code>.form-search</code> to the form and <code>.search-query</code> to the <code>&lt;input&gt;</code> for an extra-rounded text input.</p>
<form class="gantry-example form-search"><input class="input-medium search-query" type="text" /> <button class="btn" type="submit">Search</button></form>
<pre class="prettyprint linenums">&lt;form class="form-search"&gt;
  &lt;input type="text" class="input-medium search-query"&gt;
  &lt;button type="submit" class="btn"&gt;Search&lt;/button&gt;
&lt;/form&gt;</pre>
<h3>Inline form</h3>
<p>Add <code>.form-inline</code> for left-aligned labels and inline-block controls for a compact layout.</p>
<form class="gantry-example form-inline"><input class="input-small" type="text" /> <input class="input-small" type="password" /> <label class="checkbox"> <input type="checkbox" /> Remember me </label> <button class="btn" type="submit">Sign in</button></form>
<pre class="prettyprint linenums">&lt;form class="form-inline"&gt;
  &lt;input type="text" class="input-small" placeholder="Email"&gt;
  &lt;input type="password" class="input-small" placeholder="Password"&gt;
  &lt;label class="checkbox"&gt;
    &lt;input type="checkbox"&gt; Remember me
  &lt;/label&gt;
  &lt;button type="submit" class="btn"&gt;Sign in&lt;/button&gt;
&lt;/form&gt;</pre>
<h3>Horizontal form</h3>
<p>Right align labels and float them to the left to make them appear on the same line as controls. Requires the most markup changes from a default form:</p>
<ul>
<li>Add <code>.form-horizontal</code> to the form</li>
<li>Wrap labels and controls in <code>.control-group</code></li>
<li>Add <code>.control-label</code> to the label</li>
<li>Wrap any associated controls in <code>.controls</code> for proper alignment</li>
</ul>
<form class="gantry-example form-horizontal"><fieldset><legend>Legend</legend>
<div class="control-group"><label class="control-label" for="inputEmail">Email</label>
<div class="controls"><input id="inputEmail" type="text" /></div>
</div>
<div class="control-group"><label class="control-label" for="inputPassword">Password</label>
<div class="controls"><input id="inputPassword" type="password" /></div>
</div>
<div class="control-group">
<div class="controls"><label class="checkbox"> <input type="checkbox" /> Remember me </label> <button class="btn" type="submit">Sign in</button></div>
</div>
</fieldset></form>
<pre class="prettyprint linenums">&lt;form class="form-horizontal"&gt;
  &lt;div class="control-group"&gt;
    &lt;label class="control-label" for="inputEmail"&gt;Email&lt;/label&gt;
    &lt;div class="controls"&gt;
      &lt;input type="text" id="inputEmail" placeholder="Email"&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="control-group"&gt;
    &lt;label class="control-label" for="inputPassword"&gt;Password&lt;/label&gt;
    &lt;div class="controls"&gt;
      &lt;input type="password" id="inputPassword" placeholder="Password"&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="control-group"&gt;
    &lt;div class="controls"&gt;
      &lt;label class="checkbox"&gt;
        &lt;input type="checkbox"&gt; Remember me
      &lt;/label&gt;
      &lt;button type="submit" class="btn"&gt;Sign in&lt;/button&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/form&gt;</pre>
</div>
</div>
<div class="gantry-width-block gantry-width-50">
<div class="largemarginleft">
<h2>Supported form controls</h2>
<p>Examples of standard form controls supported in an example form layout.</p>
<h3>Inputs</h3>
<p>Most common form control, text-based input fields. Includes support for all HTML5 types: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color.</p>
<p>Requires the use of a specified <code>type</code> at all times.</p>
<form class="gantry-example form-inline"><input type="text" /></form>
<pre class="prettyprint linenums">&lt;input type="text" placeholder="Text input"&gt;</pre>
<h3>Textarea</h3>
<p>Form control which supports multiple lines of text. Change <code>row</code> attribute as necessary.</p>
<form class="gantry-example form-inline"><textarea rows="3"></textarea></form>
<pre class="prettyprint linenums">&lt;textarea rows="3"&gt;&lt;/textarea&gt;</pre>
<h3>Checkboxes and radios</h3>
<p>Checkboxes are for selecting one or several options in a list while radios are for selecting one option from many.</p>
<h4>Default (stacked)</h4>
<form class="gantry-example"><label class="checkbox"> <input type="checkbox" value="" /> Option one is this and that—be sure to include why it's great </label> <br /> <label class="radio"> <input id="optionsRadios1" type="radio" name="optionsRadios" value="option1" checked="checked" /> Option one is this and that—be sure to include why it's great </label> <label class="radio"> <input id="optionsRadios2" type="radio" name="optionsRadios" value="option2" /> Option two can be something else and selecting it will deselect option one </label></form>
<pre class="prettyprint linenums">&lt;label class="checkbox"&gt;
  &lt;input type="checkbox" value=""&gt;
  Option one is this and that—be sure to include why it's great
&lt;/label&gt;

&lt;label class="radio"&gt;
  &lt;input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked&gt;
  Option one is this and that—be sure to include why it's great
&lt;/label&gt;
&lt;label class="radio"&gt;
  &lt;input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"&gt;
  Option two can be something else and selecting it will deselect option one
&lt;/label&gt;</pre>
<h4>Inline checkboxes</h4>
<p>Add the <code>.inline</code> class to a series of checkboxes or radios for controls appear on the same line.</p>
<form class="gantry-example"><label class="checkbox inline"> <input id="inlineCheckbox1" type="checkbox" value="option1" /> 1 </label> <label class="checkbox inline"> <input id="inlineCheckbox2" type="checkbox" value="option2" /> 2 </label> <label class="checkbox inline"> <input id="inlineCheckbox3" type="checkbox" value="option3" /> 3 </label></form>
<pre class="prettyprint linenums">&lt;label class="checkbox inline"&gt;
  &lt;input type="checkbox" id="inlineCheckbox1" value="option1"&gt; 1
&lt;/label&gt;
&lt;label class="checkbox inline"&gt;
  &lt;input type="checkbox" id="inlineCheckbox2" value="option2"&gt; 2
&lt;/label&gt;
&lt;label class="checkbox inline"&gt;
  &lt;input type="checkbox" id="inlineCheckbox3" value="option3"&gt; 3
&lt;/label&gt;</pre>
<h3>Selects</h3>
<p>Use the default option or specify a <code>multiple="multiple"</code> to show multiple options at once.</p>
<form class="gantry-example"><select>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select><br /><select multiple="multiple">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select></form>
<pre class="prettyprint linenums">&lt;select&gt;
  &lt;option&gt;1&lt;/option&gt;
  &lt;option&gt;2&lt;/option&gt;
  &lt;option&gt;3&lt;/option&gt;
  &lt;option&gt;4&lt;/option&gt;
  &lt;option&gt;5&lt;/option&gt;
&lt;/select&gt;

&lt;select multiple="multiple"&gt;
  &lt;option&gt;1&lt;/option&gt;
  &lt;option&gt;2&lt;/option&gt;
  &lt;option&gt;3&lt;/option&gt;
  &lt;option&gt;4&lt;/option&gt;
  &lt;option&gt;5&lt;/option&gt;
&lt;/select&gt;</pre>
</div>
</div>
<div class="clear"> </div>

<!-- SEPARATOR -->
<h2>Extending form controls</h2>
<p>Adding on top of existing browser controls, Bootstrap includes other useful form components.</p>
<h3>Prepended and appended inputs</h3>
<p><span>Add text or buttons before or after any text-based input. Do note that <code>select</code> elements are not supported here.</span></p>
<div class="gantry-width-block gantry-width-50">
<div class="largemarginright">
<h4>Default options</h4>
<p>Wrap an <code>.add-on</code> and an <code>input</code> with one of two classes to prepend or append text to an input.</p>
<form class="gantry-example">
<div class="input-prepend"><span class="add-on">@</span> <input id="prependedInput" class="span2" type="text" size="16" /></div>
<br />
<div class="input-append"><input id="appendedInput" class="span2" type="text" size="16" /> <span class="add-on">.00</span></div>
</form>
<pre class="prettyprint linenums">&lt;div class="input-prepend"&gt;
  &lt;span class="add-on"&gt;@&lt;/span&gt;&lt;input class="span2" id="prependedInput" size="16" type="text" placeholder="Username"&gt;
&lt;/div&gt;
&lt;div class="input-append"&gt;
  &lt;input class="span2" id="appendedInput" size="16" type="text"&gt;&lt;span class="add-on"&gt;.00&lt;/span&gt;
&lt;/div&gt;</pre>
<h4>Search form</h4>
<form class="gantry-example form-search">
<div class="input-append"><input class="span2 search-query" type="text" /> <button class="btn" type="submit">Search</button></div>
<div class="input-prepend"><button class="btn" type="submit">Search</button> <input class="span2 search-query" type="text" /></div>
</form>
<pre class="prettyprint linenums">&lt;form class="form-search"&gt;
  &lt;div class="input-append"&gt;
    &lt;input type="text" class="span2 search-query"&gt;
    &lt;button type="submit" class="btn"&gt;Search&lt;/button&gt;
  &lt;/div&gt;
  &lt;div class="input-prepend"&gt;
    &lt;button type="submit" class="btn"&gt;Search&lt;/button&gt;
    &lt;input type="text" class="span2 search-query"&gt;
  &lt;/div&gt;
&lt;/form&gt;</pre>
</div>
</div>
<div class="gantry-width-block gantry-width-50">
<div class="largemarginleft">
<h4>Combined</h4>
<p>Use both classes and two instances of <code>.add-on</code> to prepend and append an input.</p>
<form class="gantry-example form-inline">
<div class="input-prepend input-append"><span class="add-on">$</span> <input id="appendedPrependedInput" class="span2" type="text" size="16" /> <span class="add-on">.00</span></div>
</form>
<pre class="prettyprint linenums">&lt;div class="input-prepend input-append"&gt;
  &lt;span class="add-on"&gt;$&lt;/span&gt;&lt;input class="span2" id="appendedPrependedInput" size="16" type="text"&gt;&lt;span class="add-on"&gt;.00&lt;/span&gt;
&lt;/div&gt;</pre>
<h4>Buttons instead of text</h4>
<p>Instead of a <code>&lt;span&gt;</code> with text, use a <code>.btn</code> to attach a button (or two) to an input.</p>
<form class="gantry-example">
<div class="input-append"><input id="appendedInputButton" class="span2" type="text" size="16" /> <button class="btn" type="button">Go!</button></div>
<br />
<div class="input-append"><input id="appendedInputButtons" class="span2" type="text" size="16" /> <button class="btn" type="button">Search</button> <button class="btn" type="button">Options</button></div>
</form>
<pre class="prettyprint linenums">&lt;div class="input-append"&gt;
  &lt;input class="span2" id="appendedInputButton" size="16" type="text"&gt;&lt;button class="btn" type="button"&gt;Go!&lt;/button&gt;
&lt;/div&gt;

&lt;div class="input-append"&gt;
  &lt;input class="span2" id="appendedInputButtons" size="16" type="text"&gt;&lt;button class="btn" type="button"&gt;Search&lt;/button&gt;&lt;button class="btn" type="button"&gt;Options&lt;/button&gt;
&lt;/div&gt;</pre>
</div>
</div>
<div class="clear"> </div>
<div class="gantry-width-block gantry-width-50">
<div class="largemarginright">
<h3>Form actions</h3>
<p>End a form with a group of actions (buttons). When placed within a <code>.form-horizontal</code>, the buttons will automatically indent to line up with the form controls.</p>
<form class="gantry-example">
<div class="form-actions"><button class="btn btn-primary" type="submit">Save changes</button> <button class="btn" type="button">Cancel</button></div>
</form>
<pre class="prettyprint linenums">&lt;div class="form-actions"&gt;
  &lt;button type="submit" class="btn btn-primary"&gt;Save changes&lt;/button&gt;
  &lt;button type="button" class="btn"&gt;Cancel&lt;/button&gt;
&lt;/div&gt;</pre>
<h3>Help text</h3>
<p>Inline and block level support for help text that appears around form controls.</p>
<h4>Inline help</h4>
<form class="gantry-example form-inline"><input type="text" /> <span class="help-inline">Inline help text</span></form>
<pre class="prettyprint linenums">&lt;input type="text"&gt;&lt;span class="help-inline"&gt;Inline help text&lt;/span&gt;</pre>
<h4>Block help</h4>
<form class="gantry-example form-inline"><input type="text" /> <span class="help-block">A longer block of help text that breaks onto a new line and may extend beyond one line.</span></form>
<pre class="prettyprint linenums">&lt;input type="text"&gt;&lt;span class="help-block"&gt;A longer block of help text that breaks onto a new line and may extend beyond one line.&lt;/span&gt;</pre>
</div>
</div>
<div class="gantry-width-block gantry-width-50">
<div class="largemarginleft">
<h3>Control sizing</h3>
<p>Use relative sizing classes like <code>.input-large</code> or match your inputs to the grid column sizes using <code>.span*</code> classes.</p>
<h4>Relative sizing</h4>
<form class="gantry-example" style="padding-bottom: 15px;">
<div class="controls docs-input-sizes"><input class="input-mini" type="text" /><br /> <input class="input-small" type="text" /><br /> <input class="input-medium" type="text" /><br /> <input class="input-large" type="text" /><br /> <input class="input-xlarge" type="text" /><br /> <input class="input-xxlarge" type="text" /></div>
</form>
<pre class="prettyprint linenums">&lt;input class="input-mini" type="text" placeholder=".input-mini"&gt;
&lt;input class="input-small" type="text" placeholder=".input-small"&gt;
&lt;input class="input-medium" type="text" placeholder=".input-medium"&gt;
&lt;input class="input-large" type="text" placeholder=".input-large"&gt;
&lt;input class="input-xlarge" type="text" placeholder=".input-xlarge"&gt;
&lt;input class="input-xxlarge" type="text" placeholder=".input-xxlarge"&gt;</pre>
<br />
<p><strong>Note:</strong> In future versions, we'll be altering the use of these relative input classes to match our button sizes. For example, <code>.input-large</code> will increase the padding and font-size of an input.</p>
<h3>Uneditable inputs</h3>
<p>Present data in a form that's not editable without using actual form markup.</p>
<form class="gantry-example"><span class="input-xlarge uneditable-input">Some value here</span></form>
<pre class="prettyprint linenums">&lt;span class="input-xlarge uneditable-input"&gt;Some value here&lt;/span&gt;</pre>
</div>
</div>
<div class="clear"> </div>

<!-- SEPARATOR -->
<h2>Form control states</h2>
<p><span>Provide feedback to users or visitors with basic feedback states on form controls and labels.</span></p>
<div class="gantry-width-block gantry-width-50">
<div class="largemarginright">
<h3>Input focus</h3>
<p>We remove the default <code>outline</code> styles on some form controls and apply a <code>box-shadow</code> in its place for <code>:focus</code>.</p>
<form class="gantry-example form-inline"><input id="focusedInput" class="input-xlarge focused" type="text" value="This is focused..." /></form>
<pre class="prettyprint linenums">&lt;input class="input-xlarge" id="focusedInput" type="text" value="This is focused..."&gt;</pre>
</div>
</div>
<div class="gantry-width-block gantry-width-50">
<div class="largemarginleft">
<h3>Disabled inputs</h3>
<p>Add the <code>disabled</code> attribute on an input to prevent user input and trigger a slightly different look.</p>
<form class="gantry-example form-inline"><input id="disabledInput" class="input-xlarge" type="text" disabled="disabled" /></form>
<pre class="prettyprint linenums">&lt;input class="input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here..." disabled&gt;</pre>
</div>
</div>
<div class="clear"> </div>
<h3>Validation states</h3>
<p>Bootstrap includes validation styles for error, warning, and success messages. To use, add the appropriate class to the surrounding <code>.control-group</code>.</p>
<form class="bs-docs-example form-horizontal">
  <div class="control-group warning">
    <label class="control-label" for="inputWarning">Input with warning</label>
    <div class="controls">
      <input type="text" id="inputWarning">
      <span class="help-inline">Something may have gone wrong</span>
    </div>
  </div>
  <div class="control-group error">
    <label class="control-label" for="inputError">Input with error</label>
    <div class="controls">
      <input type="text" id="inputError">
      <span class="help-inline">Please correct the error</span>
    </div>
  </div>
  <div class="control-group info">
    <label class="control-label" for="inputError">Input with info</label>
    <div class="controls">
      <input type="text" id="inputError">
      <span class="help-inline">Username is taken</span>
    </div>
  </div>
  <div class="control-group success">
    <label class="control-label" for="inputSuccess">Input with success</label>
    <div class="controls">
      <input type="text" id="inputSuccess">
      <span class="help-inline">Woohoo!</span>
    </div>
  </div>
</form>
<pre class="prettyprint linenums">&lt;form class=&quot;bs-docs-example form-horizontal&quot;&gt;
  &lt;div class=&quot;control-group warning&quot;&gt;
    &lt;label class=&quot;control-label&quot; for=&quot;inputWarning&quot;&gt;Input with warning&lt;/label&gt;
    &lt;div class=&quot;controls&quot;&gt;
      &lt;input type=&quot;text&quot; id=&quot;inputWarning&quot;&gt;
      &lt;span class=&quot;help-inline&quot;&gt;Something may have gone wrong&lt;/span&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class=&quot;control-group error&quot;&gt;
    &lt;label class=&quot;control-label&quot; for=&quot;inputError&quot;&gt;Input with error&lt;/label&gt;
    &lt;div class=&quot;controls&quot;&gt;
      &lt;input type=&quot;text&quot; id=&quot;inputError&quot;&gt;
      &lt;span class=&quot;help-inline&quot;&gt;Please correct the error&lt;/span&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class=&quot;control-group info&quot;&gt;
    &lt;label class=&quot;control-label&quot; for=&quot;inputError&quot;&gt;Input with info&lt;/label&gt;
    &lt;div class=&quot;controls&quot;&gt;
      &lt;input type=&quot;text&quot; id=&quot;inputError&quot;&gt;
      &lt;span class=&quot;help-inline&quot;&gt;Username is taken&lt;/span&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class=&quot;control-group success&quot;&gt;
    &lt;label class=&quot;control-label&quot; for=&quot;inputSuccess&quot;&gt;Input with success&lt;/label&gt;
    &lt;div class=&quot;controls&quot;&gt;
      &lt;input type=&quot;text&quot; id=&quot;inputSuccess&quot;&gt;
      &lt;span class=&quot;help-inline&quot;&gt;Woohoo!&lt;/span&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/form&gt;</pre>
<!-- Buttons
================================================== -->
<div class="page-header">
<h1>Buttons</h1>
</div>
<h2>Default buttons</h2>
<p>Button styles can be applied to anything with the <code>.btn</code> class applied. However, typically you'll want to apply these to only <code>&lt;a&gt;</code> and <code>&lt;button&gt;</code> elements for the best rendering.</p>
<table class="table table-bordered table-striped">
<thead>
<tr><th>Button</th><th>class=""</th><th>Description</th></tr>
</thead>
<tbody>
<tr>
<td><button class="btn" type="button">Default</button></td>
<td><code>btn</code></td>
<td>Standard gray button with gradient</td>
</tr>
<tr>
<td><button class="btn btn-primary" type="button">Primary</button></td>
<td><code>btn btn-primary</code></td>
<td>Provides extra visual weight and identifies the primary action in a set of buttons</td>
</tr>
<tr>
<td><button class="btn btn-info" type="button">Info</button></td>
<td><code>btn btn-info</code></td>
<td>Used as an alternative to the default styles</td>
</tr>
<tr>
<td><button class="btn btn-success" type="button">Success</button></td>
<td><code>btn btn-success</code></td>
<td>Indicates a successful or positive action</td>
</tr>
<tr>
<td><button class="btn btn-warning" type="button">Warning</button></td>
<td><code>btn btn-warning</code></td>
<td>Indicates caution should be taken with this action</td>
</tr>
<tr>
<td><button class="btn btn-danger" type="button">Danger</button></td>
<td><code>btn btn-danger</code></td>
<td>Indicates a dangerous or potentially negative action</td>
</tr>
<tr>
<td><button class="btn btn-inverse" type="button">Inverse</button></td>
<td><code>btn btn-inverse</code></td>
<td>Alternate dark gray button, not tied to a semantic action or use</td>
</tr>
<tr>
<td><button class="btn btn-link" type="button">Link</button></td>
<td><code>btn btn-link</code></td>
<td>Deemphasize a button by making it look like a link while maintaining button behavior</td>
</tr>
</tbody>
</table>
<h4>Cross browser compatibility</h4>
<p>IE9 doesn't crop background gradients on rounded corners, so we remove it. Related, IE9 jankifies disabled <code>button</code> elements, rendering text gray with a nasty text-shadow that we cannot fix.</p>
<h2>Button sizes</h2>
<p>Fancy larger or smaller buttons? Add <code>.btn-large</code>, <code>.btn-small</code>, or <code>.btn-mini</code> for additional sizes.</p>
<div class="gantry-example">
<p><button class="btn btn-large btn-primary" type="button">Large button</button> <button class="btn btn-large" type="button">Large button</button></p>
<p><button class="btn btn-primary" type="button">Default button</button> <button class="btn" type="button">Default button</button></p>
<p><button class="btn btn-small btn-primary" type="button">Small button</button> <button class="btn btn-small" type="button">Small button</button></p>
<p><button class="btn btn-mini btn-primary" type="button">Mini button</button> <button class="btn btn-mini" type="button">Mini button</button></p>
</div>
<pre class="prettyprint linenums">&lt;p&gt;
  &lt;button class="btn btn-large btn-primary" type="button"&gt;Large button&lt;/button&gt;
  &lt;button class="btn btn-large" type="button"&gt;Large button&lt;/button&gt;
&lt;/p&gt;
&lt;p&gt;
  &lt;button class="btn btn-primary" type="button"&gt;Default button&lt;/button&gt;
  &lt;button class="btn" type="button"&gt;Default button&lt;/button&gt;
&lt;/p&gt;
&lt;p&gt;
  &lt;button class="btn btn-small btn-primary" type="button"&gt;Small button&lt;/button&gt;
  &lt;button class="btn btn-small" type="button"&gt;Small button&lt;/button&gt;
&lt;/p&gt;
&lt;p&gt;
  &lt;button class="btn btn-mini btn-primary" type="button"&gt;Mini button&lt;/button&gt;
  &lt;button class="btn btn-mini" type="button"&gt;Mini button&lt;/button&gt;
&lt;/p&gt;</pre>
<p>Create block level buttons—those that span the full width of a parent— by adding <code>.btn-block</code>.</p>
<div class="gantry-example">
<div class="well" style="max-width: 400px; margin: 0 auto 10px;"><button class="btn btn-large btn-block btn-primary" type="button">Block level button</button> <button class="btn btn-large btn-block" type="button">Block level button</button></div>
</div>
<pre class="prettyprint linenums">&lt;button class="btn btn-large btn-block btn-primary" type="button"&gt;Block level button&lt;/button&gt;
&lt;button class="btn btn-large btn-block" type="button"&gt;Block level button&lt;/button&gt;</pre>
<h2>Disabled state</h2>
<p>Make buttons look unclickable by fading them back 50%.</p>
<div class="gantry-width-block gantry-width-50">
<div class="largemarginright">
<h3>Anchor element</h3>
<p>Add the <code>.disabled</code> class to <code>&lt;a&gt;</code> buttons.</p>
<p class="gantry-example"><a class="btn btn-large btn-primary disabled" href="#">Primary link</a> <a class="btn btn-large disabled" href="#">Link</a></p>
<pre class="prettyprint linenums">&lt;a href="#" class="btn btn-large btn-primary disabled"&gt;Primary link&lt;/a&gt;
&lt;a href="#" class="btn btn-large disabled"&gt;Link&lt;/a&gt;</pre>
<br />
<p><strong>Note:</strong> We use <code>.disabled</code> as a utility class here, similar to the common <code>.active</code> class, so no prefix is required.</p>
</div>
</div>
<div class="gantry-width-block gantry-width-50">
<div class="largemarginleft">
<h3>Button element</h3>
<p>Add the <code>disabled</code> attribute to <code>&lt;button&gt;</code> buttons.</p>
<p class="gantry-example"><button class="btn btn-large btn-primary disabled" type="button" disabled="disabled">Primary button</button> <button class="btn btn-large" type="button" disabled="disabled">Button</button></p>
<pre class="prettyprint linenums">&lt;button type="button" class="btn btn-large btn-primary disabled" disabled="disabled"&gt;Primary button&lt;/button&gt;
&lt;button type="button" class="btn btn-large" disabled&gt;Button&lt;/button&gt;</pre>
</div>
</div>
<div class="clear"> </div>
<h2>One class, multiple tags</h2>
<p>Use the <code>.btn</code> class on an <code>&lt;a&gt;</code>, <code>&lt;button&gt;</code>, or <code>&lt;input&gt;</code> element.</p>
<form class="gantry-example"><a class="btn" href="http://demo.gantry-framework.org/">Link</a> <button class="btn" type="submit">Button</button> <input class="btn" type="button" value="Input" /> <input class="btn" type="submit" value="Submit" /></form>
<pre class="prettyprint linenums">&lt;a class="btn" href=""&gt;Link&lt;/a&gt;
&lt;button class="btn" type="submit"&gt;Button&lt;/button&gt;
&lt;input class="btn" type="button" value="Input"&gt;
&lt;input class="btn" type="submit" value="Submit"&gt;</pre>

<p>As a best practice, try to match the element for your context to ensure matching cross-browser rendering. If you have an <code>input</code>, use an <code>&lt;input type="submit"&gt;</code> for your button.</p>

<!-- Icons
================================================== -->
<h1>Icons</h1>
<h2>Font Awesome</h2>

  <p>Font Awesome is a pictographic language of web-related actions which delivers 220 icons. The Font Awesome webfont, CSS, and LESS files are licensed under CC BY 3.0 and you can find the full examples of usage at <a href="http://fortawesome.github.com/Font-Awesome" target="_blank">Font Awesome - http://fortawesome.github.com/Font-Awesome</a></p>

<p>Add <code>.icon-CLASS_NAME</code> to any element, best used with a <code>&lt;span&gt;</code>.</p>

<div class="gantry-example">
<h3>Web Icons</h3>
  <div class="gantry-width-25 gantry-width-block">
    <div class="gantry-width-spacer">
      <span class="icon-adjust"> icon-adjust</span><br /><br />
      <span class="icon-asterisk"> icon-asterisk</span><br /><br />
      <span class="icon-ban-circle"> icon-ban-circle</span><br /><br />
      <span class="icon-bar-chart"> icon-bar-chart</span><br /><br />
      <span class="icon-barcode"> icon-barcode</span><br /><br />
      <span class="icon-beaker"> icon-beaker</span><br /><br />
      <span class="icon-bell"> icon-bell</span><br /><br />
      <span class="icon-bolt"> icon-bolt</span><br /><br />
      <span class="icon-book"> icon-book</span><br /><br />
      <span class="icon-bookmark"> icon-bookmark</span><br /><br />
      <span class="icon-bookmark-empty"> icon-bookmark-empty</span><br /><br />
      <span class="icon-briefcase"> icon-briefcase</span><br /><br />
      <span class="icon-bullhorn"> icon-bullhorn</span><br /><br />
      <span class="icon-calendar"> icon-calendar</span><br /><br />
      <span class="icon-camera"> icon-camera</span><br /><br />
      <span class="icon-camera-retro"> icon-camera-retro</span><br /><br />
      <span class="icon-certificate"> icon-certificate</span><br /><br />
      <span class="icon-check"> icon-check</span><br /><br />
      <span class="icon-check-empty"> icon-check-empty</span><br /><br />
      <span class="icon-cloud"> icon-cloud</span><br /><br />
      <span class="icon-cog"> icon-cog</span><br /><br />
      <span class="icon-cogs"> icon-cogs</span><br /><br />
      <span class="icon-comment"> icon-comment</span><br /><br />
      <span class="icon-comment-alt"> icon-comment-alt</span><br /><br />
      <span class="icon-comments"> icon-comments</span><br /><br />
      <span class="icon-comments-alt"> icon-comments-alt</span><br /><br />
      <span class="icon-credit-card"> icon-credit-card</span><br /><br />
      <span class="icon-dashboard"> icon-dashboard</span><br /><br />
      <span class="icon-download"> icon-download</span><br /><br />
      <span class="icon-download-alt"> icon-download-alt</span><br /><br />
      <span class="icon-edit"> icon-edit</span><br /><br />
      <span class="icon-envelope"> icon-envelope</span><br /><br />
      <span class="icon-envelope-alt"> icon-envelope-alt</span><br /><br />
    </div>
  </div>
  <div class="gantry-width-25 gantry-width-block">
    <div class="gantry-width-spacer">
      <span class="icon-exclamation-sign"> icon-exclamation-sign</span><br /><br />
      <span class="icon-external-link"> icon-external-link</span><br /><br />
      <span class="icon-eye-close"> icon-eye-close</span><br /><br />
      <span class="icon-eye-open"> icon-eye-open</span><br /><br />
      <span class="icon-facetime-video"> icon-facetime-video</span><br /><br />
      <span class="icon-film"> icon-film</span><br /><br />
      <span class="icon-filter"> icon-filter</span><br /><br />
      <span class="icon-fire"> icon-fire</span><br /><br />
      <span class="icon-flag"> icon-flag</span><br /><br />
      <span class="icon-folder-close"> icon-folder-close</span><br /><br />
      <span class="icon-folder-open"> icon-folder-open</span><br /><br />
      <span class="icon-gift"> icon-gift</span><br /><br />
      <span class="icon-glass"> icon-glass</span><br /><br />
      <span class="icon-globe"> icon-globe</span><br /><br />
      <span class="icon-group"> icon-group</span><br /><br />
      <span class="icon-hdd"> icon-hdd</span><br /><br />
      <span class="icon-headphones"> icon-headphones</span><br /><br />
      <span class="icon-heart"> icon-heart</span><br /><br />
      <span class="icon-heart-empty"> icon-heart-empty</span><br /><br />
      <span class="icon-home"> icon-home</span><br /><br />
      <span class="icon-inbox"> icon-inbox</span><br /><br />
      <span class="icon-info-sign"> icon-info-sign</span><br /><br />
      <span class="icon-key"> icon-key</span><br /><br />
      <span class="icon-leaf"> icon-leaf</span><br /><br />
      <span class="icon-legal"> icon-legal</span><br /><br />
      <span class="icon-lemon"> icon-lemon</span><br /><br />
      <span class="icon-lock"> icon-lock</span><br /><br />
      <span class="icon-unlock"> icon-unlock</span><br /><br />
      <span class="icon-magic"> icon-magic</span><br /><br />
      <span class="icon-magnet"> icon-magnet</span><br /><br />
      <span class="icon-map-marker"> icon-map-marker</span><br /><br />
      <span class="icon-minus"> icon-minus</span><br /><br />
      <span class="icon-minus-sign"> icon-minus-sign</span><br /><br />
    </div>
  </div>
  <div class="gantry-width-25 gantry-width-block">
    <div class="gantry-width-spacer">
      <span class="icon-money"> icon-money</span><br /><br />
      <span class="icon-move"> icon-move</span><br /><br />
      <span class="icon-music"> icon-music</span><br /><br />
      <span class="icon-off"> icon-off</span><br /><br />
      <span class="icon-ok"> icon-ok</span><br /><br />
      <span class="icon-ok-circle"> icon-ok-circle</span><br /><br />
      <span class="icon-ok-sign"> icon-ok-sign</span><br /><br />
      <span class="icon-pencil"> icon-pencil</span><br /><br />
      <span class="icon-picture"> icon-picture</span><br /><br />
      <span class="icon-plane"> icon-plane</span><br /><br />
      <span class="icon-plus"> icon-plus</span><br /><br />
      <span class="icon-plus-sign"> icon-plus-sign</span><br /><br />
      <span class="icon-print"> icon-print</span><br /><br />
      <span class="icon-pushpin"> icon-pushpin</span><br /><br />
      <span class="icon-qrcode"> icon-qrcode</span><br /><br />
      <span class="icon-question-sign"> icon-question-sign</span><br /><br />
      <span class="icon-random"> icon-random</span><br /><br />
      <span class="icon-refresh"> icon-refresh</span><br /><br />
      <span class="icon-remove"> icon-remove</span><br /><br />
      <span class="icon-remove-circle"> icon-remove-circle</span><br /><br />
      <span class="icon-remove-sign"> icon-remove-sign</span><br /><br />
      <span class="icon-reorder"> icon-reorder</span><br /><br />
      <span class="icon-resize-horizontal"> icon-resize-horizontal</span><br /><br />
      <span class="icon-resize-vertical"> icon-resize-vertical</span><br /><br />
      <span class="icon-retweet"> icon-retweet</span><br /><br />
      <span class="icon-road"> icon-road</span><br /><br />
      <span class="icon-rss"> icon-rss</span><br /><br />
      <span class="icon-screenshot"> icon-screenshot</span><br /><br />
      <span class="icon-search"> icon-search</span><br /><br />
      <span class="icon-share"> icon-share</span><br /><br />
      <span class="icon-share-alt"> icon-share-alt</span><br /><br />
      <span class="icon-shopping-cart"> icon-shopping-cart</span><br /><br />
    </div>
  </div>
  <div class="gantry-width-25 gantry-width-block">
    <div class="gantry-width-spacer">
      <span class="icon-signal"> icon-signal</span><br /><br />
      <span class="icon-signin"> icon-signin</span><br /><br />
      <span class="icon-signout"> icon-signout</span><br /><br />
      <span class="icon-sitemap"> icon-sitemap</span><br /><br />
      <span class="icon-sort"> icon-sort</span><br /><br />
      <span class="icon-sort-down"> icon-sort-down</span><br /><br />
      <span class="icon-sort-up"> icon-sort-up</span><br /><br />
      <span class="icon-star"> icon-star</span><br /><br />
      <span class="icon-star-empty"> icon-star-empty</span><br /><br />
      <span class="icon-star-half"> icon-star-half</span><br /><br />
      <span class="icon-tag"> icon-tag</span><br /><br />
      <span class="icon-tags"> icon-tags</span><br /><br />
      <span class="icon-tasks"> icon-tasks</span><br /><br />
      <span class="icon-thumbs-down"> icon-thumbs-down</span><br /><br />
      <span class="icon-thumbs-up"> icon-thumbs-up</span><br /><br />
      <span class="icon-time"> icon-time</span><br /><br />
      <span class="icon-tint"> icon-tint</span><br /><br />
      <span class="icon-trash"> icon-trash</span><br /><br />
      <span class="icon-trophy"> icon-trophy</span><br /><br />
      <span class="icon-truck"> icon-truck</span><br /><br />
      <span class="icon-umbrella"> icon-umbrella</span><br /><br />
      <span class="icon-upload"> icon-upload</span><br /><br />
      <span class="icon-upload-alt"> icon-upload-alt</span><br /><br />
      <span class="icon-user"> icon-user</span><br /><br />
      <span class="icon-user-md"> icon-user-md</span><br /><br />
      <span class="icon-volume-off"> icon-volume-off</span><br /><br />
      <span class="icon-volume-down"> icon-volume-down</span><br /><br />
      <span class="icon-volume-up"> icon-volume-up</span><br /><br />
      <span class="icon-warning-sign"> icon-warning-sign</span><br /><br />
      <span class="icon-wrench"> icon-wrench</span><br /><br />
      <span class="icon-zoom-in"> icon-zoom-in</span><br /><br />
      <span class="icon-zoom-out"> icon-zoom-out</span><br /><br />
    </div>
  </div>
  <div class="clear"></div>
  <div>
    <h3>Text Editor Icons</h3>
  </div>
  <div class="gantry-width-25 gantry-width-block">
    <div class="gantry-width-spacer">
      <span class="icon-file"> icon-file</span><br /><br />
      <span class="icon-cut"> icon-cut</span><br /><br />
      <span class="icon-copy"> icon-copy</span><br /><br />
      <span class="icon-paste"> icon-paste</span><br /><br />
      <span class="icon-save"> icon-save</span><br /><br />
      <span class="icon-undo"> icon-undo</span><br /><br />
      <span class="icon-repeat"> icon-repeat</span><br /><br />
      <span class="icon-paper-clip"> icon-paper-clip</span><br /><br />
    </div>
  </div>
  <div class="gantry-width-25 gantry-width-block">
    <div class="gantry-width-spacer">
      <span class="icon-text-height"> icon-text-height</span><br /><br />
      <span class="icon-text-width"> icon-text-width</span><br /><br />
      <span class="icon-align-left"> icon-align-left</span><br /><br />
      <span class="icon-align-center"> icon-align-center</span><br /><br />
      <span class="icon-align-right"> icon-align-right</span><br /><br />
      <span class="icon-align-justify"> icon-align-justify</span><br /><br />
      <span class="icon-indent-left"> icon-indent-left</span><br /><br />
      <span class="icon-indent-right"> icon-indent-right</span><br /><br />
    </div>
  </div>
  <div class="gantry-width-25 gantry-width-block">
    <div class="gantry-width-spacer">
      <span class="icon-font"> icon-font</span><br /><br />
      <span class="icon-bold"> icon-bold</span><br /><br />
      <span class="icon-italic"> icon-italic</span><br /><br />
      <span class="icon-strikethrough"> icon-strikethrough</span><br /><br />
      <span class="icon-underline"> icon-underline</span><br /><br />
      <span class="icon-link"> icon-link</span><br /><br />
      <span class="icon-columns"> icon-columns</span><br /><br />
      <span class="icon-table"> icon-table</span><br /><br />
    </div>
  </div>
  <div class="gantry-width-25 gantry-width-block">
    <div class="gantry-width-spacer">
      <span class="icon-th-large"> icon-th-large</span><br /><br />
      <span class="icon-th"> icon-th</span><br /><br />
      <span class="icon-th-list"> icon-th-list</span><br /><br />
      <span class="icon-list"> icon-list</span><br /><br />
      <span class="icon-list-ol"> icon-list-ol</span><br /><br />
      <span class="icon-list-ul"> icon-list-ul</span><br /><br />
      <span class="icon-list-alt"> icon-list-alt</span><br /><br />
    </div>
  </div>
  <div class="clear"></div>
  <div>
    <h3>Directional Icons</h3>
  </div>
  <div class="gantry-width-25 gantry-width-block">
    <div class="gantry-width-spacer">
      <span class="icon-arrow-down"> icon-arrow-down</span><br /><br />
      <span class="icon-arrow-left"> icon-arrow-left</span><br /><br />
      <span class="icon-arrow-right"> icon-arrow-right</span><br /><br />
      <span class="icon-arrow-up"> icon-arrow-up</span><br /><br />
      <span class="icon-chevron-down"> icon-chevron-down</span><br /><br />
    </div>
  </div>
  <div class="gantry-width-25 gantry-width-block">
    <div class="gantry-width-spacer">
      <span class="icon-circle-arrow-down"> icon-circle-arrow-down</span><br /><br />
      <span class="icon-circle-arrow-left"> icon-circle-arrow-left</span><br /><br />
      <span class="icon-circle-arrow-right"> icon-circle-arrow-right</span><br /><br />
      <span class="icon-circle-arrow-up"> icon-circle-arrow-up</span><br /><br />
      <span class="icon-chevron-left"> icon-chevron-left</span><br /><br />
    </div>
  </div>
  <div class="gantry-width-25 gantry-width-block">
    <div class="gantry-width-spacer">
      <span class="icon-caret-down"> icon-caret-down</span><br /><br />
      <span class="icon-caret-left"> icon-caret-left</span><br /><br />
      <span class="icon-caret-right"> icon-caret-right</span><br /><br />
      <span class="icon-caret-up"> icon-caret-up</span><br /><br />
      <span class="icon-chevron-right"> icon-chevron-right</span><br /><br />
    </div>
  </div>
  <div class="gantry-width-25 gantry-width-block">
    <div class="gantry-width-spacer">
      <span class="icon-hand-down"> icon-hand-down</span><br /><br />
      <span class="icon-hand-left"> icon-hand-left</span><br /><br />
      <span class="icon-hand-right"> icon-hand-right</span><br /><br />
      <span class="icon-hand-up"> icon-hand-up</span><br /><br />
      <span class="icon-chevron-up"> icon-chevron-up</span><br /><br />
    </div>
  </div>
<div class="clear"></div>
  <div>
    <h3>Video Player Icons</h3>
  </div>
  <div class="gantry-width-25 gantry-width-block">
    <div class="gantry-width-spacer">
      <span class="icon-play-circle"> icon-play-circle</span><br /><br />
      <span class="icon-play"> icon-play</span><br /><br />
      <span class="icon-pause"> icon-pause</span><br /><br />
      <span class="icon-stop"> icon-stop</span><br /><br />
    </div>
  </div>
  <div class="gantry-width-25 gantry-width-block">
    <div class="gantry-width-spacer">
      <span class="icon-step-backward"> icon-step-backward</span><br /><br />
      <span class="icon-fast-backward"> icon-fast-backward</span><br /><br />
      <span class="icon-backward"> icon-backward</span><br /><br />
      <span class="icon-forward"> icon-forward</span><br /><br />
    </div>
  </div>
  <div class="gantry-width-25 gantry-width-block">
    <div class="gantry-width-spacer">
      <span class="icon-fast-forward"> icon-fast-forward</span><br /><br />
      <span class="icon-step-forward"> icon-step-forward</span><br /><br />
      <span class="icon-eject"> icon-eject</span><br /><br />
    </div>
  </div>
  <div class="gantry-width-25 gantry-width-block">
    <div class="gantry-width-spacer">
      <span class="icon-fullscreen"> icon-fullscreen</span><br /><br />
      <span class="icon-resize-full"> icon-resize-full</span><br /><br />
      <span class="icon-resize-small"> icon-resize-small</span><br /><br />
    </div>
  </div>
  <div class="clear"></div>
  <div>
    <h3>Social Icons</h3>
  </div>
  <div class="gantry-width-25 gantry-width-block">
    <div class="gantry-width-spacer">
      <span class="icon-phone"> icon-phone</span><br /><br />
      <span class="icon-phone-sign"> icon-phone-sign</span><br /><br />
      <span class="icon-facebook"> icon-facebook</span><br /><br />
      <span class="icon-facebook-sign"> icon-facebook-sign</span><br /><br />
    </div>
  </div>
  <div class="gantry-width-25 gantry-width-block">
    <div class="gantry-width-spacer">
      <span class="icon-twitter"> icon-twitter</span><br /><br />
      <span class="icon-twitter-sign"> icon-twitter-sign</span><br /><br />
      <span class="icon-github"> icon-github</span><br /><br />
      <span class="icon-github-sign"> icon-github-sign</span><br /><br />
    </div>
  </div>
  <div class="gantry-width-25 gantry-width-block">
    <div class="gantry-width-spacer">
      <span class="icon-linkedin"> icon-linkedin</span><br /><br />
      <span class="icon-linkedin-sign"> icon-linkedin-sign</span><br /><br />
      <span class="icon-pinterest"> icon-pinterest</span><br /><br />
      <span class="icon-pinterest-sign"> icon-pinterest-sign</span><br /><br />
    </div>
  </div>
  <div class="gantry-width-25 gantry-width-block">
    <div class="gantry-width-spacer">
      <span class="icon-google-plus"> icon-google-plus</span><br /><br />
      <span class="icon-google-plus-sign"> icon-google-plus-sign</span><br /><br />
      <span class="icon-sign-blank"> icon-sign-blank</span><br /><br />
    </div>
  </div>
<div class="clear"></div>
</div>
<pre class="prettyprint linenums">&lt;span class="icon-CLASS_NAME"&gt;
  ...
&lt;/span&gt;
&lt;span class="icon-download"&gt;
  ...
&lt;/span&gt;</pre>

<div class="clear"></div>

<!-- Notice
================================================== -->
<p><em>The documented typography above is a modified version of the reference guide available at: <a href="http://twitter.github.com/bootstrap/base-css.html">http://twitter.github.com/bootstrap/base-css.html</a></em></p>