AeroDyNN by DyNNamite - DNN Theme DNN theme by DyNNamite flexible-dnn-theme DyNNamite - UK DNN specialists DNN theme

Tabs

These tabs make use of Font Awesome and bootstraps own library, like most objects in this theme!

I'm in Tab 1.

Duis autem eum iriure dolor in hendrerit in vulputate velit esse molestie consequat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.

Learn more...

Howdy, I'm in Tab 2.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat. Ut wisi enim ad minim veniam, quis nostrud exerci tation.

Click for more features...

Howdy, I'm in Tab 3.

Duis autem vel eum iriure dolor in hendrerit in vulputate. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat

Learn more...

Source Code

<div class="TabsOne">
<div class="row">
<div class="col-md-12">
<div class="tabbable-panel">
<div class="tabbable-line">
<ul class="nav nav-tabs ">
    <li class="active">
    <a data-toggle="tab" href="#tab_default_1">
    <em class="fa fa-star"></em> Tab 1 </a>
    </li>
    <li>
    <a data-toggle="tab" href="#tab_default_2">
    <em class="fa fa-gamepad"></em> Tab 2 </a>
    </li>
    <li>
    <a data-toggle="tab" href="#tab_default_3">
    <em class="fa fa-pencil"></em> Tab 3 </a>
    </li>
</ul>
<div class="tab-content">
<div id="tab_default_1" class="tab-pane active">
<p>
I'm in Tab 1.
</p>
<p>
Duis autem eum iriure dolor in hendrerit in vulputate velit esse molestie consequat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.
</p>
<p>
<a target="_blank" href="http://j.mp/metronictheme" class="btn btn-success">
Learn more...
</a>
</p>
</div>
<div id="tab_default_2" class="tab-pane">
<p>
Howdy, I'm in Tab 2.
</p>
<p>
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat. Ut wisi enim ad minim veniam, quis nostrud exerci tation.
</p>
<p>
<a target="_blank" href="http://j.mp/metronictheme" class="btn btn-warning">
Click for more features...
</a>
</p>
</div>
<div id="tab_default_3" class="tab-pane">
<p>
Howdy, I'm in Tab 3.
</p>
<p>
Duis autem vel eum iriure dolor in hendrerit in vulputate. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat
</p>
<p>
<a target="_blank" href="http://j.mp/metronictheme" class="btn btn-info">
Learn more...
</a>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Accordion

HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages. Learn more.

Twitter Bootstrap is a powerful front-end framework for faster and easier web development. It is a collection of CSS and HTML conventions. Learn more.

CSS stands for Cascading Style Sheet. CSS allows you to specify various style properties for a given HTML element such as colors, backgrounds, fonts etc. Learn more.

Source Code

<div class="TabsOne">
<div class="row">
<div class="col-md-12">
<div class="tabbable-panel">
<div class="tabbable-line">
<ul class="nav nav-tabs ">
    <li class="active">
    <a data-toggle="tab" href="#tab_default_1">
    <em class="fa fa-star"></em> Tab 1 </a>
    </li>
    <li>
    <a data-toggle="tab" href="#tab_default_2">
    <em class="fa fa-gamepad"></em> Tab 2 </a>
    </li>
    <li>
    <a data-toggle="tab" href="#tab_default_3">
    <em class="fa fa-pencil"></em> Tab 3 </a>
    </li>
</ul>
<div class="tab-content">
<div id="tab_default_1" class="tab-pane active">
<p>
I'm in Tab 1.
</p>
<p>
Duis autem eum iriure dolor in hendrerit in vulputate velit esse molestie consequat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.
</p>
<p>
<a target="_blank" href="http://j.mp/metronictheme" class="btn btn-success">
Learn more...
</a>
</p>
</div>
<div id="tab_default_2" class="tab-pane">
<p>
Howdy, I'm in Tab 2.
</p>
<p>
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat. Ut wisi enim ad minim veniam, quis nostrud exerci tation.
</p>
<p>
<a target="_blank" href="http://j.mp/metronictheme" class="btn btn-warning">
Click for more features...
</a>
</p>
</div>
<div id="tab_default_3" class="tab-pane">
<p>
Howdy, I'm in Tab 3.
</p>
<p>
Duis autem vel eum iriure dolor in hendrerit in vulputate. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat
</p>
<p>
<a target="_blank" href="http://j.mp/metronictheme" class="btn btn-info">
Learn more...
</a>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>