Typography styles are a great way to customize the appearance of content elements such as Font Awesome icons, menus, images, buttons, Bootstrap elements, all with different color styles.

  • Home /
  • Typography /
  • Bootstrap Elements

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 just type the following code in your text editor. Make sure the code is added in the HTML mode by pressing the Toggle Editor button.

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

Blockquote Dark Style

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

This is the .blockquote-dark element designed for the blockquote element when used for dark backgrounds. To use it just type the following code in your text editor. Make sure the code is added in the HTML mode by pressing the Toggle Editor button.

<blockquote class="blockquote-dark">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</blockquote>

Blockquote Color Style

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

This is the .blockquote-color element designed for the blockquote element when used for colored backgrounds. To use it just type the following code in your text editor. Make sure the code is added in the HTML mode by pressing the Toggle Editor button.

<blockquote class="blockquote-color">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</blockquote>

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 just type the following code in your text editor. Make sure the code is added in the HTML mode by pressing the Toggle Editor button.

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

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 just type the following code in your text editor. Make sure the code is added in the HTML mode.

<p class="dropcap">...</div>

Headings

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

h1. Heading 1

h2. Heading 2

h3. Heading 3

h4. Heading 4

h5. Heading 5
h6. Heading 6

To use the headings just type the following code in your text editor. Make sure the code is added in the HTML mode.

<h1>...</h1>

Content Boxes

This is the info box. To use it just type the following code in your text editor in the HTML mode:
<div class="info-box"> ...Your content goes here... </div>
This is the success box. To use it just type the following code in your text editor in the HTML mode:
<div class="success-box"> ...Your content goes here... </div>
This is the warning box. To use it just type the following code in your text editor in the HTML mode:
<div class="warning-box"> ...Your content goes here... </div>
This is the error box. To use it just type the following code in your text editor in the HTML mode:
<div class="error-box"> ...Your content goes here... </div>
This is the simple box. To use it just type the following code in your text editor in the HTML mode:
<div class="simple-box"> ...Your content goes here... </div>

Inline Labels

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

This is the .label-red label. To use it just type the following code in your text editor. Make sure the code is added in the HTML mode.

<span class="label-red">...</span>

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

This is the .label-blue label. To use it just type the following code in your text editor. Make sure the code is added in the HTML mode.

<span class="label-blue">...</span>

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

This is the .label-green label. To use it just type the following code in your text editor. Make sure the code is added in the HTML mode.

<span class="label-green">...</span>

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

This is the .label-grey label. To use it just type the following code in your text editor. Make sure the code is added in the HTML mode.

<span class="label-grey">...</span>

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

This is the .label-orange label. To use it just type the following code in your text editor. Make sure the code is added in the HTML mode.

<span class="label-orange">...</span>

Emphasis Classes

Convey meaning through color with a handful of emphasis utility classes. To use it just type the following code in your text editor. Make sure the code is added in the HTML mode.

 

This is the .muted emphasis class.

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

This is the .text-warning emphasis class.

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

This is the .text-error emphasis class.

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

This is the .text-info emphasis class.

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

This is the .text-success emphasis class.

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

Code

Wrap inline snippets of code with code. To use it just type the following code in your text editor. Make sure the code is added in the HTML mode.

<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 just type the following code in your text editor. Make sure the code is added in the HTML mode.

<pre>...</pre>

Tables

Add the base class .table to any table.

#Table HeadingTable HeadingTable 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 just type the following code in your text editor. Make sure the code is added in the HTML mode.

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

 

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

#Table HeadingTable HeadingTable 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 just type the following code in your text editor. Make sure the code is added in the HTML mode.

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