Portlets

Portlets are like boxes with various options: colors, header, footer, various controls...

Portlets use default Bootstrap panel. For more information about it, please read documentation here:

Bootstrap Panel Documentation

Basic Markup

You just have to wrap you content inside a panel and panel-content class

<div class="panel">
    <div class="panel-content">
        <h1><strong>Simple</strong> Portlets</h1>
        <p>Example of panel with no header and footer.</p>
    </div>
</div>

Portlet with Header

Just add panel-header before panel-content like this:

<div class="panel">
    <div class="panel-header">
        <h3>Portlet Header</h3>
    </div>
    <div class="panel-content">
        <p>This is an example of a basic header.</p>
    </div>
</div>

Portlet with Footer

As for panel-header, you have to add panel-footer after panel-content like this:

<div class="panel">
    <div class="panel-content">
         <h1>Just footer, no header.</h1>
         <p>Portlet content.</p>
    </div>
    <div class="panel-footer">
        <h3>Portlet <strong>Footer</strong></h3>
    </div>
</div>

Portlet Controls

Portlets have 6 tools differents. You can add all, or just tools you want.

If you want all tools, you don't have to add each tool; Just add panel-controls to panel-header, they will be added automatically.

<div class="panel">
    <div class="panel-header panel-controls">
        <h3>Portlet with controls</h3>
    </div>
    <div class="panel-content">
        <p>Panel content.</p>
    </div>
</div>

You just want one or two tools? You can add them manually:

<div class="control-btn">
    <a href="#" class="panel-toggle"><i class="fa fa-angle-down"></i></a>
    <a href="#" class="panel-close"><i class="icon-trash"></i></a>
</div>