The Bootstrap styles are typography styles provided by the Bootstrap framework. Use them to customize your content with amazing elements that adapt to every background type (light, clear, dark and color).

Blockquote

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse.

Someone famous Source Title

This is the <blockquote> element. To use it, insert the following code into your text editor:

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

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

<blockquote>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
    <small>Someone famous <cite title="Source Title">Source Title</cite></small>
</blockquote>
To use the blockquote, insert the code from the examples into your text editor. Make sure the code is added in the HTML mode by pressing the Toggle editor button.

Blockquote + light

Lorem ipsum dolor sit amet et dolore magna aliqua.

Someone famous Source Title

Blockquote + clear/dark

Lorem ipsum dolor sit amet et dolore magna aliqua.

Someone famous Source Title

Blockquote + color

Lorem ipsum dolor sit amet et dolore magna aliqua.

Someone famous Source Title

Lead Body Copy

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis lectus metus, at posuere neque. Sed pharetra nibh eget orci convallis at posuere leo convallis.

This is the lead element from Bootstrap for making a paragraph stand out . To use it, insert the following code into your text editor:

<p class="favth-lead"">...</p>
To use the lead, insert the code from the example into your text editor. Make sure the code is added in the HTML mode by pressing the Toggle editor button.

Drop Caps

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

This is the dropcap element. To use it, insert the following code into your text editor:

<p class="favth-dropcap">...</div>
To use the drop caps, insert the code from the example into your text editor. Make sure the code is added in the HTML mode by pressing the Toggle editor button.

Headings

These are the HTML headings <h1>,<h2>,<h3>,<h4>,<h5>,<h6>.

h1. Heading 1

h2. Heading 2

h3. Heading 3

h4. Heading 4

h5. Heading 5
h6. Heading 6

To use the headings, insert the following code into your text editor:

<h1>...</h1>
To use the headings, insert the code from the examples into your text editor. Make sure the code is added in the HTML mode by pressing the Toggle editor button.

Alerts

This is the alert success. To use it, insert the following code into your text editor:
 <div class="favth-alert favth-alert-success" role="alert">...</div>
This is the alert info. To use it, insert the following code into your text editor:
 <div class="favth-alert favth-alert-info" role="alert">...</div>
This is the alert warning. To use it, insert the following code into your text editor:
 <div class="favth-alert favth-alert-warning" role="alert">...</div>
This is the alert danger. To use it, insert the following code into your text editor:
 <div class="favth-alert favth-alert-danger" role="alert">...</div>
Add an optional close button with alert-dismissible. To use it, insert the following code into your text editor:
 <div class="favth-alert favth-alert-success favth-alert-dismissible" role="alert">
 <button type="button" class="favth-close" data-dismiss="favth-alert" aria-label="Close"><span aria-hidden="true">×</span></button>
...
 </div>
To use the alerts, insert the code from the examples into your text editor. Make sure the code is added in the HTML mode by pressing the Toggle editor button.

Panels

Panel title
Panel content

To use the panel default content element, insert the following code into your text editor:

<div class="favth-panel favth-panel-default">
  <div class="favth-panel-heading">
    Panel title
  </div>
  <div class="favth-panel-body">Panel content</div>
</div>
Panel title
Panel content

To use the panel primary content element, insert the following code into your text editor:

<div class="favth-panel favth-panel-primary">
  <div class="favth-panel-heading">
    Panel title
  </div>
  <div class="favth-panel-body">Panel content</div>
</div>
Panel title
Panel content

To use the panel success content element, insert the following code into your text editor:

<div class="favth-panel favth-panel-success">
  <div class="favth-panel-heading">
    Panel title
  </div>
  <div class="favth-panel-body">Panel content</div>
</div>
Panel title
Panel content

To use the panel info content element, insert the following code into your text editor:

<div class="favth-panel favth-panel-info">
  <div class="favth-panel-heading">
    Panel title
  </div>
  <div class="favth-panel-body">Panel content</div>
</div>
Panel title
Panel content

To use the panel warning content element, insert the following code into your text editor:

<div class="favth-panel favth-panel-warning">
  <div class="favth-panel-heading">
    Panel title
  </div>
  <div class="favth-panel-body">Panel content</div>
</div>
Panel title
Panel content

To use the panel danger content element, insert the following code into your text editor:

<div class="favth-panel favth-panel-danger">
  <div class="favth-panel-heading">
    Panel title
  </div>
  <div class="favth-panel-body">Panel content</div>
</div>
To use the panels, insert the code from the examples into your text editor. Make sure the code is added in the HTML mode by pressing the Toggle editor button.

Inline Labels

Lorem ipsum dolor sit amet sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

This is the label-default content element. To use it, insert the following code into your text editor:

<span class="favth-label-default">...</span>

Lorem ipsum dolor sit amet sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

This is the label-primary content element. To use it, insert the following code into your text editor:

<span class="favth-label-primary">...</span>

Lorem ipsum dolor sit amet sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

This is the label-success content element. To use it, insert the following code into your text editor:

<span class="favth-label-success">...</span>

Lorem ipsum dolor sit amet sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

This is the label-info content element. To use it, insert the following code into your text editor:

<span class="favth-label-info">...</span>

Lorem ipsum dolor sit amet sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

This is the label-warning content element. To use it, insert the following code into your text editor:

<span class="favth-label-warning">...</span>

Lorem ipsum dolor sit amet sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

This is the label-danger content element. To use it, insert the following code into your text editor:

<span class="favth-label-danger">...</span>
To use the labels, insert the code from the examples into your text editor. Make sure the code is added in the HTML mode by pressing the Toggle editor button.

Wells

This is the well content element. To use it, insert the following code into your text editor:
<div class="favth-well">...</div>
This is the large well content element. To use it, insert the following code into your text editor:
<div class="favth-well favth-well-lg">...</div>
This is the small well content element. To use it, insert the following code into your text editor:
<div class="favth-well favth-well-sm">...</div>
To use the well, insert the code from the examples into your text editor. Make sure the code is added in the HTML mode by pressing the Toggle editor button.

Emphasis Text

This is the text-muted emphasis class.

<p class="favth-text-muted">This is the muted emphasis class.</p>

This is the text-primary emphasis class.

<p class="favth-text-primary">This is the text-primary emphasis class.</p>

This is the text-success emphasis class.

<p class="favth-text-success">This is the text-success emphasis class.</p>

This is the text-info emphasis class.

<p class="favth-text-info">This is the text-info emphasis class.</p>

This is the text-warning emphasis class.

<p class="favth-text-warning">This is the text-warning emphasis class.</p>

This is the text-danger emphasis class.

<p class="favth-text-danger">This is the text-danger emphasis class.</p>
To use the emphasis, insert the code from the examples into your text editor. Make sure the code is added in the HTML mode by pressing the Toggle editor button.

Code

Wrap inline snippets of code with code. To use it, insert the following code into your text editor:

<code>...</code>

Use prefor multiple lines of code.

.class { 
background: #f1f1f1;  
}

Be sure to escape any angle brackets in the code for proper rendering. To use it, insert the following code into your text editor:

<pre>...</pre>
To use the code and pre, insert the code from the examples into your text editor. Make sure the code is added in the HTML mode by pressing the Toggle editor button.

Tables

Add the class .favth-table to any table.

# Table Heading Table Heading Table Heading
1 Table Data Table Data Table Data
2 Table Data Table Data Table Data
3 Table Data Table Data Table Data

To use the table, insert the following code into your text editor:

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

Add borders and rounded corners to the table using the .favth-table-bordered class.

# Table Heading Table Heading Table Heading
1 Table Data Table Data Table Data
2 Table Data Table Data Table Data
3 Table Data Table Data Table Data

To use the bordered table, insert the following code into your text editor:

<table class="favth-table favth-table-bordered">
  …
</table>
To use the tables, insert the code from the examples into your text editor. Make sure the code is added in the HTML mode by pressing the Toggle editor button.