hpanel

Horizontal Panels for Bootstrap by

Get hpanel

  • Download the .zip above, and extract its contents.
  • Place the hpanel.min.css and hpanel.min.js files into your project folder.

Reference hpanel files in your HTML

  • Example of referencing hpanel.min.css:
    <link rel="stylesheet" href="css/hpanel.min.css">
  • Example of referencing hpanel.min.js:
    <script type="text/javascript" src="js/hpanel.min.js"></script>

Usage

Basic hpanel

  • Replace * with the width that you want
<div class="panel hpanel hpanel-default">
    <div class="row">
        <div class="col-sm-*">
            <div class="panel-heading">
            </div>
        </div>
        <div class="col-sm-*">
            <div class="hpanel-content">
            </div>
        </div>
    </div>
</div>

Examples

Embed hpanel inside a hpanel


Embedded hpanel

Embed hpanel inside a hpanel

  • Just stick a panel inside the hpanel-content!

Limitation

  • hpanels may only be embedded one-level deep.
  • Basically what you're seeing now is the limit.