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
Text...
<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.
Text...
Text...
Text...
<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 alerts
Well done! You successfully read this important alert message.
Text...
Well done! You successfully read this important alert message.
Text...
Well done! You successfully read this important alert message.
<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>