How to use?

We have made it easy for every developer to use this template. This section, on most of the pages, will help you in customizing the template.

Plain Panel:

<div class="panel">    <div class="panel-heading">        <div class="panel-title">            <h5>Plain Panel</h5>        </div>    </div>    <div class="panel-body">        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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.    </div></div>                                        

To add controls:

Just add data-panel-controlattribute to div with panelclass.

<div class="panel" data-panel-control>    <div class="panel-heading">        <div class="panel-title">            <h5>Plain Panel</h5>        </div>    </div>    <div class="panel-body">        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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.    </div></div>                                        

Adding sub-title:

To add sub-title, add smallelement in h5.

<div class="panel" data-panel-control>    <div class="panel-heading">        <div class="panel-title">            <h5>Plain Panel <small>sub-title here</small></h5>        </div>    </div>    <div class="panel-body">        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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.    </div></div>                                        

Make them sortable:

Just add data-sortable="true"to the div with class panel.

<div class="panel" data-panel-control data-sortable="true">    <div class="panel-heading">        <div class="panel-title">            <h5>Plain Panel <small>sub-title here</small></h5>        </div>    </div>    <div class="panel-body">        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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.    </div></div>                                        

Colored Header:

Just add panel-primaryfor primary color, panel-dangerfor danger color and so on..

<div class="panel panel-primary" data-panel-control data-sortable="true">    <div class="panel-heading">        <div class="panel-title">            <h5>Plain Panel <small>sub-title here</small></h5>        </div>    </div>    <div class="panel-body">        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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.    </div></div>                                        

Ready classes for other colors:

• panel-default: Gray colored header
• panel-primary: Primary colored header
• panel-danger: Red colored header
• panel-success: Green colored header
• panel-warning: Orange colored header
• panel-info: Info colored header
• panel-black: Black colored header
• panel-light-black: Light Black colored header

Borderless:

Jus add class no-borderto div with class panel.

<div class="panel panel-primary no-border" data-panel-control data-sortable="true">    <div class="panel-heading">        <div class="panel-title">            <h5>Plain Panel <small>sub-title here</small></h5>        </div>    </div>    <div class="panel-body">        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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.    </div></div>                                        

Full Colored Panels:

Just add bg-primaryfor primary color, bg-dangerfor danger color and so on..

<div class="panel bg-primary" data-panel-control data-sortable="true">    <div class="panel-heading">        <div class="panel-title">            <h5>Plain Panel <small>sub-title here</small></h5>        </div>    </div>    <div class="panel-body">        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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.    </div></div>                                        

Ready classes for other colors:

• bg-default: Gray colored panel
• bg-primary: Primary colored panel
• bg-danger: Red colored panel
• bg-success: Green colored panel
• bg-warning: Orange colored panel
• bg-info: Info colored panel
• bg-black: Black colored panel
• bg-light-black: Light Black colored panel