This is an H1 Header

This is an H2 Header

Lorem ipsum dolor sit amet consectetuer eleifend elit vel tellus laoreet. At ut pellentesque risus quis sem eros et consequat enim lorem. Aenean lorem consequat consequat eu.

This is an H4 Header

Lorem ipsum dolor sit amet consectetuer eleifend elit vel tellus laoreet. At ut pellentesque risus quis sem eros et consequat enim lorem. Aenean lorem consequat consequat eu.

This is an H6 Header

Lorem ipsum dolor sit amet consectetuer eleifend elit vel tellus laoreet. At ut pellentesque risus quis sem eros et consequat enim lorem. Aenean lorem consequat consequat eu.

2. Text styles

Preformatted text (<pre> tag)

  div.grid-layout2 div.grid-col {
  float: left;
  width: 49.95%;
}
div.grid-layout3 div.grid-col {
float: left;
width: 33.3%;
}

Quote text (<blockquote> tag)

You can us this style to quote somebody's speech, idea or a fragment from some book, articles, etc. Lorem ipsum dolor sit amet consectetuer eleifend elit vel tellus laoreet. At ut pellentesque risus quis sem eros et consequat enim lorem. Aenean lorem consequat consequat eu.

Usage: <blockquote>This is your quote</blockquote>

Highlighted Text

You can use this style to highlight important words and / or keyword expression in search result page. Lorem ipsum dolor sit amet consectetuer eleifend elit vel tellus laoreet. At ut pellentesque risus quis sem eros et consequat enim lorem. Aenean lorem consequat consequat eu.

Usage: <span class="highlight">This is the text to be highlighted.</span>

Highlighted Text on mouse over

Alert Text

Info Text

Download Text

Tip Text

Comment Text

Attachment Text

Video Text

Audio Text

You can use this style for description text paragraph related to audio file. At ut pellentesque risus quis sem eros et consequat enim lorem. Aenean lorem consequat consequat eu.

3. Table Styles

Basic example

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

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

Striped rows

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

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

Bordered table

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

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

Hover rows

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

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

Condensed table

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

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

Contextual classes

Use contextual classes to color table rows or individual cells.

<!-- On rows -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>

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

Responsive tables

Create responsive tables by wrapping any .table in .table-responsive to make them scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables.

@-moz-document url-prefix() {
  fieldset { display: table-cell; }
}

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>