The XYZ Doohickey Company was founded in 1971, and has been providing quality doohickeys to the public ever since. Located in Gotham City, XYZ employs over 2,000 people and does all kinds of awesome things for the Gotham community.

A, laborum, itaque, exercitationem beatae esse totam voluptatum culpa quis in fugit reiciendis vitae nihil sequi voluptatibus soluta commodi placeat inventore iste harum magni sint error cupiditate quasi mollitia quisquam!

Voluptatum aliquam ipsum eos facilis dolor? Provident, debitis sint incidunt pariatur voluptates ipsum impedit distinctio quasi autem temporibus aliquid aspernatur doloremque non est ipsam maiores quibusdam. Alias quo excepturi commodi.

Quam, assumenda, voluptas magni vitae esse libero quia iste unde eum doloribus perferendis consequuntur veritatis dicta asperiores optio eius architecto obcaecati earum ipsam nisi nobis? Ea, et omnis distinctio cupiditate?

Vero, asperiores, iure, repellendus, illum culpa quis incidunt molestias sint aliquid at obcaecati recusandae atque possimus deserunt cupiditate? Esse quod laboriosam rerum laborum vitae harum ipsam. Perspiciatis quia iste modi!

Examples

Wrap any text and an optional dismiss button in .alert and one of the four contextual classes (e.g., .alert-success) for basic alert messages.

<div class="alert alert-success">...</div>
<div class="alert alert-info">...</div>
<div class="alert alert-warning">...</div>
<div class="alert alert-danger">...</div>

Dismissable alerts

Build on any alert by adding an optional .alert-dismissable and close button.

<div class="alert alert-warning alert-dismissable">
  <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
  <strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>

Links in alerts

Use the .alert-link utility class to quickly provide matching colored links within any alert.

<div class="alert alert-success">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-info">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-warning">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-danger">
  <a href="#" class="alert-link">...</a>
</div>

Adresses

Blockquotes

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

Lists

• 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

Ordered

1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Integer molestie lorem at massa
4. Facilisis in pretium nisl aliquet
5. Nulla volutpat aliquam velit
6. Faucibus porta lacus fringilla vel
7. Aenean sit amet erat nunc
8. Eget porttitor lorem

Blockquotes

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

Tables

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 up to small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables.

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

1. Download archive and unzip it.
2. Install new wordpress on your hosting
3. Go to "Apperance" = > "Themes" and click on "Add new"
4. Upload and install Bobber WP Theme
5. Install and Activate RevSlider (see a notice)

Step 2: Install Demo Content.

1. Ok, go to WP Admin Panel => "Tools" => "Import"
2. Install Wordpress Import Plugin
3. Import "bobber.wordpress.2014-02-24.xml" file.

Step 3: Choose a header.

1. Go to "Apperance" => "Editor"
2. Open header.php and find 19 and 20 lines
3. Activate or deactivate one of this headers.
4. Activation instructions you will find in the file.

Step : Import Widgets.

1. Install a "Widget Data - Setting Import/Export Plugin"
2. Follow the instructions and import "widget_data.json"
3. Enjoy :-)