Sheet

Highly inspired from the panel component, the sheet will auto scale and have a relative position to ease children positioning.

Text...

<div class="sheet">
  <p>Text...</p>
</div>

Sheet with header

Header

Text...

<div class="sheet">
  <div class="sheet-header">
    <h2>Header</h2>
  </div>
  <p>Text...</p>
</div>

Sheet with tabs

Text...

<div class="sheet">
  <ul class="nav nav-tabs">
    <li class="active"><a href="#">Tab 1</a></li>
    <li><a href="#">Tab 2</a></li>
    <li><a href="#">Tab 3</a></li>
  </ul>
  <div>
    <p>Text...</p>
  </div>
</div>

Sheet with stacked tabs

<div class="sheet">
  <ul class="nav nav-tabs">
    <li><a href="#">Tab 1</a></li>
    <li class="active"><a href="#">Tab 2</a></li>
    <li><a href="#">Tab 3</a></li>
    <li class="dropdown pull-right">
      <a class="dropdown-toggle" data-toggle="dropdown" href="#">
        More <span class="caret"></span>
      </a>
      <ul class="dropdown-menu">
        <li><a href="#">Tab 4</a></li>
        <li><a href="#">Tab 5</a></li>
      </ul>
    </li>
  </ul>
  <div>
    <p>Text...</p>
  </div>
</div>

Sheet with auto-stackable tabs

Plugin dependency

This component requires customized bootstrapStackable JS plugin provided by the bootstrap-bookingsync-sass gem.

<div class="sheet">
  <ul class="nav nav-tabs" data-toggle="stackable"
      data-target=".stackable-dropdown">
    <li><a href="#">Tab 1</a></li>
    <li class="active"><a href="#">Tab 2</a></li>
    <li><a href="#">Tab 3</a></li>
    <li><a href="#">Tab 4</a></li>
    <li><a href="#">Tab 5</a></li>
    <li><a href="#">Tab 6</a></li>
    <li><a href="#">Tab 7</a></li>
    <li><a href="#">Tab 8</a></li>
    <li><a href="#">Tab 9</a></li>
    <li><a href="#">Tab 10</a></li>
    <li><a href="#">Tab 11</a></li>
    <li><a href="#">Tab 12</a></li>
    <li><a href="#">Tab Last</a></li>
    <li class="dropdown pull-right stackable-dropdown">
      <a class="dropdown-toggle" data-toggle="dropdown" href="#">
        More <span class="caret"></span>
      </a>
      <ul class="dropdown-menu">
      </ul>
    </li>
  </ul>
  <div>
    <p>Text...</p>
  </div>
</div>

Sheet with stacked pills

<div class="sheet row">
  <ul class="nav nav-pills nav-stacked col-sm-3">
    <li><a href="#">Tab 1</a></li>
    <li class="active"><a href="#">Tab 2</a></li>
    <li><a href="#">Tab 3</a></li>
    <li><a href="#">Tab 4</a></li>
  </ul>
  <div class="col-sm-9">
    <p>Text...</p>
  </div>
</div>

Sheet with alerts

Text...

Text...

<div class="sheet">
  <div class="alert alert-success" role="alert">
    <strong>Well done!</strong> You successfully read this important alert message.
  </div>
  <p>Text...</p>
  <div class="alert alert-success" role="alert">
    <strong>Well done!</strong> You successfully read this important alert message.
  </div>
  <p>Text...</p>
  <div class="alert alert-success" role="alert">
    <strong>Well done!</strong> You successfully read this important alert message.
  </div>
</div>