Basic table
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | Bird | |
| 4 | John | Man | @man |
| 5 | Kelly | Burns | @kburns |
<button type="button" class="btn btn-default" id="toggle-border-to-basic-table-button-id">Toggle border</button>
<button type="button" class="btn btn-default" id="toggle-row-hover-to-basic-table-button-id">Toggle row hover</button>
<button type="button" class="btn btn-default" id="toggle-table-perimeter-border-to-basic-table-button-id">Toggle perimeter border</button>
<br><br>
<table class="table table-bordered table-hover" id="sg-basic-table-example-id">
<caption>Optional table caption.</caption>
<thead>
<tr>
<th class="stars-table-header"># <span class="caret pull-right"></span></th>
<th class="stars-table-header stars-table-head-sort-state">First Name <span class="caret stars-caret-up pull-right"></span></th>
<th class="stars-table-header">Last Name <span class="caret pull-right"></span></th>
<th class="stars-table-header">Username <span class="caret pull-right"></span></th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>Bird</td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">4</th>
<td>John</td>
<td>Man</td>
<td>@man</td>
</tr>
<tr>
<th scope="row">5</th>
<td>Kelly</td>
<td>Burns</td>
<td>@kburns</td>
</tr>
</tbody>
</table>
<script>
$(".stars-table-header").on("click", function() {
$(this).siblings().removeClass("stars-table-head-sort-state");
$(this).addClass("stars-table-head-sort-state");
$("span", this).toggleClass("stars-caret-up");
});
</script>Label value list that needs the full width of a page for both the label and the value.
Note: At times, you may want some additional padding around this component.
To accomplish this, apply .stars-padded-block-label-value-list to the ol/ul.
This comes in handy if ever you nest this component into a container that doesn't have any padding.
<h3>Automatic numeration</h3>
<ol class="stars-block-label-value-list" type="1">
<li>
<label>
Minim consectetur adipiscing elit, sed do occaecat eiusmod tempor incididunt ut tetur adipiscing elit, sed do
labore et dolore ma gna ali tetur adipiscing elit, sed doqua. Ut enim ad veniam, quis nostrud exercitation ullamco.
Eur occaecat sint occaecat cupi datat non proident.
</label>
<span class="stars-block-label-value-list-value">
Accusamus
</span>
</li>
<li>
<label>
Sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam.
</label>
<span class="stars-block-label-value-list-value">
Abore et dolore ma gna ali tetur adipiscing elit, sed doqua. Ut enim ad veniam.
Dipiscing elit, sed do tempor inc atae vitae dicta sunt explicabo. Nemo enim ipsam voluptate.
E ma gna ali tetur adipiscing elit, sed doqua. Ut enim ad veniam, quis nostrud exercitation ullamco.
</span>
</li>
<li>
<label>
Eiusmod amet, adipiscing elit, sed do tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.
</label>
<span class="stars-block-label-value-list-value">
Consectetur
</span>
</li>
<li>
<label>
Amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim, quis.
</label>
<span class="stars-block-label-value-list-value">
Veniam
</span>
</li>
</ol>
<hr>
<h3>Manual numeration</h3>
<ol class="stars-block-label-value-list list-unstyled">
<li>
<label>
<span class="stars-list-style-type-style">1a. </span>
Minim consectetur adipiscing elit, sed do occaecat eiusmod tempor incididunt ut tetur adipiscing elit, sed do
labore et dolore ma gna ali tetur adipiscing elit, sed doqua. Ut enim ad veniam, quis nostrud exercitation ullamco.
Eur occaecat sint occaecat cupi datat non proident.
</label>
<span class="stars-block-label-value-list-value">
Accusamus
</span>
</li>
<li>
<label>
<span class="stars-list-style-type-style">1b. </span>
Sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam.
</label>
<span class="stars-block-label-value-list-value">
Abore et dolore ma gna ali tetur adipiscing elit, sed doqua. Ut enim ad veniam.
Dipiscing elit, sed do tempor inc atae vitae dicta sunt explicabo. Nemo enim ipsam voluptate.
E ma gna ali tetur adipiscing elit, sed doqua. Ut enim ad veniam, quis nostrud exercitation ullamco.
</span>
</li>
<li>
<label>
<span class="stars-list-style-type-style">1c. </span>
Eiusmod amet, adipiscing elit, sed do tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nos.
</label>
<span class="stars-block-label-value-list-value">
Consectetur
</span>
</li>
<li>
<label>
<span class="stars-list-style-type-style">1d. </span>
Amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim, quis.
</label>
<span class="stars-block-label-value-list-value">
Veniam
</span>
</li>
</ol><div id="sg-brand-primary-color-chip" class="stars-brand-primary-background-color">
</div>
<div id="sg-brand-secondary-color-chip" class="stars-brand-secondary-background-color">
</div>Use buttons for applying actions, creating data, submitting data, and any other similar interactivities. Though buttons typically not used for "navigating", instead use regular links for navigation.
The following are the various configurations and ways of using buttons.
Essentially, toolbars are just groups of button groups.
<!-- Standard button -->
<button type="button" class="btn btn-default">Default</button>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">Primary</button>
<!-- Notice me button! -->
<button type="button" class="btn btn-attention">Attention</button>
<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">Success</button>
<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">Info</button>
<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">Warning</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">Danger</button>
<hr>
<h3>Button group</h3>
<br>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Edit</button>
<button type="button" class="btn btn-default">Cut</button>
<button type="button" class="btn btn-default">Copy</button>
<button type="button" class="btn btn-default">Paste</button>
</div>
<hr>
<h3>Button toolbar</h3>
<p>Essentially, toolbars are just groups of button groups.</p>
<br>
<div class="btn-toolbar" role="toolbar">
<div class="btn-group" role="group">
<button type="button" class="btn btn-success">Save</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-danger">Delete</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Edit</button>
<button type="button" class="btn btn-default">Cut</button>
<button type="button" class="btn btn-default">Copy</button>
<button type="button" class="btn btn-default">Paste</button>
</div>
</div>
<hr>
<h3>Sizes</h3>
<br>
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-default btn-lg">Large button</button>
<button type="button" class="btn btn-primary">Default button</button>
<button type="button" class="btn btn-default">Default button</button>
<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-default btn-sm">Small button</button>
<button type="button" class="btn btn-primary btn-xs">Extra small button</button>
<button type="button" class="btn btn-default btn-xs">Extra small button</button>
<hr>
<h3>Buttons with Icons</h3>
<br>
<button type="button" class="btn btn-primary btn-lg">
<span class="glyphicon glyphicon-search"></span> Search
</button>
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-flag"></span> Flag
</button>
<button type="button" class="btn btn-primary btn-lg">
<span class="glyphicon glyphicon-search"></span>
</button>
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-flag"></span>
</button>
<button type="button" class="btn btn-primary">
<span class="glyphicon glyphicon-search"></span> Search
</button>
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-flag"></span> Flag
</button>
<button type="button" class="btn btn-primary">
<span class="glyphicon glyphicon-search"></span>
</button>
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-flag"></span>
</button>
Background colors to emphasize the meaning of messages.
| Class | Description |
|---|---|
.important |
Adds extra emphasis. Inverts background to a dark color and makes the foreground text white. |
Attention message: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Success message: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Info message: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Warning message: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Danger message: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Primary message: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Attention message: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Success message: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Info message: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Warning message: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Danger message: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<p id="sg-bg-attention" class="bg-attention">
<span class="h4"><strong>Attention message:</strong></span> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<p id="sg-bg-success" class="bg-success">
<span class="h4"><strong>Success message:</strong></span> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<p id="sg-bg-info" class="bg-info">
<span class="h4"><strong>Info message:</strong></span> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<p id="sg-bg-warning" class="bg-warning">
<span class="h4"><strong>Warning message:</strong></span> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<p id="sg-bg-danger" class="bg-danger">
<span class="h4"><strong>Danger message:</strong></span> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<hr>
<!-- Extra important messages -->
<p id="sg-bg-primary" class="bg-primary important">
<strong>Primary message:</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<hr>
<p id="sg-bg-attention" class="bg-attention important">
<strong>Attention message:</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<p id="sg-bg-success" class="bg-success important">
<strong>Success message:</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<p id="sg-bg-info" class="bg-info important">
<strong>Info message:</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<p id="sg-bg-warning" class="bg-warning important">
<strong>Warning message:</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<p id="sg-bg-danger" class="bg-danger important">
<strong>Danger message:</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>Text colors to emphasize the meaning of messages.
Attention text: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Success text: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Info text: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Warning text: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Danger text: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Cool text: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<p id="sg-text-attention" class="text-attention">
<strong>Attention text:</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<p id="sg-text-success" class="text-success">
<strong>Success text:</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<p id="sg-text-info" class="text-info">
<strong>Info text:</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<p id="sg-text-warning" class="text-warning">
<strong>Warning text:</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<p id="sg-text-danger" class="text-danger">
<strong>Danger text:</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<hr>
<figcaption>For text that needs to stand out, but not in a loud way.</figcaption>
<p id="sg-stars-text-cool" class="stars-text-cool">
<strong>Cool text:</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
Used for making flush aligning label-value lists.
Apply .stars-flush-label-value-list to a table tag to create a flush label-value list.
Section heading for label-value-list |
|
| Here's a label: | And here's a value |
| Sit amet: | Lorem ipsum dolor sit amet |
| Laboris nisi e: | Cupidatat non proid |
| Dolore eu fugiat: | In culpa qui officia |
| Deserunt mollit anim: | Neque porro quisqu |
Section heading for label-value-list |
|
| Orem ipsum: | Upidatat non proid |
| Sit amet: | Amet rem ipsum dolor sit |
| Dolore eu fugiat: | In culpa qui officia |
| Deserunt mollit anim: | Neque porro quisqu |
| Laboris nisi e: | Cupidatat non proid |
H3 Inverted heading |
|
| Orem ipsum: | Upidatat non proid |
| Sit amet: | Amet rem ipsum dolor sit |
| Dolore eu fugiat: | In culpa qui officia |
| Deserunt mollit anim: | Neque porro quisqu |
| Laboris nisi e: | Cupidatat non proid |
Ordered list example |
||
| 1. | Here's a label: | And here's a value |
| 2. | Sit amet: | Lorem ipsum dolor sit amet |
| 3. | Laboris nisi e: | Cupidatat non proid |
| 4. | Dolore eu fugiat: | In culpa qui officia |
| 5. | Deserunt mollit anim: | Neque porro quisqu |
| 1a. | Neque mollit anim: Aperiam quisqu |
| 1b. | Deserunt mollit anim: Exercitation porro |
| 2a. | Cupidatat mollit anim: Neque porro quisqu |
| 2b. | Dolore eu fugiat: Nostrum culpa qui officia |
| 3. | Amet mollit anim: Neque porro quisqu |
Make values inline by wrapping them in a span classed with .stars-label-value-list-value.
Remove the TD the value data was wrapped in and move the value data into the same TD as the label.
Labels are set not to wrap. The width of the label column is set by the width of the longest label.
| Label: | Value |
| Label: | Value |
| Label: | Value |
| Label: | Value |
| Label: | Value |
<table class="stars-flush-label-value-list">
<tr>
<td>Label:</td>
<td>Value</td>
</tr>
<tr>
<td>Label:</td>
<td>Value</td>
</tr>
<tr>
<td>Label:</td>
<td>Value</td>
</tr>
<tr>
<td>Label:</td>
<td>Value</td>
</tr>
<tr>
<td>Label:</td>
<td>Value</td>
</tr>
</table>Our grid system is an adaption of and built on top of the Bootstrap grid system.
We tailor our grid system by wrapping one, of multiple classes, around Bootstrap's grid system.
.col-xs-* column variant to create its columns.| Class | Description | Apply to |
|---|---|---|
.stars-fat-grid |
Increases the spacing between gridded areas |
Apply to element classed with .panel-heading,
.panel-body,
or to any direct parent of a .row
|
.stars-flush-grid |
Removes all spacing between gridded areas |
Apply to element classed with .panel-heading,
.panel-body,
or to any direct parent of a .row
|
.stars-flush-grid-pinline |
Creates a pinline spacing between .stars-flush-grid gridded areas
|
Apply to element classed with .stars-flush-grid
|
Note: To match the width of the grid perimeter to the width of the .stars-fat-grid, add .main-panel-body and .main-panel-heading to their respective element.
Width auto: What makes these real table grids special is that they can have their column widths set to auto. All of the previous grids cannot do that without wrapping.
| Little bit of content | Ut enim ad minim in veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo velit ullamco consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse. |
| Little bit of content | Ut enim ad minim in veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo velit ullamco consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse. |
| Little bit of content | Ut enim ad minim in veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo velit ullamco consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse. |
| Little bit of content | Ut enim ad minim in veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo velit ullamco consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse. |
| Little bit of content | Ut enim ad minim in veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo velit ullamco consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse. |
| Little bit of content | Ut enim ad minim in veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo velit ullamco consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse. |
<!-- Default grid -->
<h2>Default grid</h2>
<h3><em>Inside</em> of a panel</h3>
<br>
<button type="button" class="btn btn-default" id="toggle-grid-overlay-button-1-id">Toggle overlay</button>
<br><br>
<div class="stars-main-body">
<div class="panel">
<div class="panel-heading" data-toggle="">
<h1 class="panel-title">I'm a panel heading</h1>
</div>
<div class="panel-body sg-grid-overlay" id="sg-default-perimeter-and-default-grid-system-example">
<div class="row">
<div class="col-xs-4">
Lorem ipsum dolor sit amet, consectetur adipiscing 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.
</div>
<div class="col-xs-4">
Lorem ipsum dolor sit amet, consectetur adipiscing 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.
</div>
<div class="col-xs-4">
Lorem ipsum dolor sit amet, consectetur adipiscing 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.
</div>
</div>
<div class="row">
<div class="col-xs-4">
Lorem ipsum dolor sit amet, consectetur adipiscing 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.
</div>
<div class="col-xs-4">
Lorem ipsum dolor sit amet, consectetur adipiscing 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.
</div>
<div class="col-xs-4">
Lorem ipsum dolor sit amet, consectetur adipiscing 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.
</div>
</div>
<div class="row">
<div class="col-xs-4 stars-200px-tall">
<div class="stars-top-valign-floats" id="sg-valign-floats-examples-id">
Top align vertically <br><code class="sg-inline-code" id="sg-inline-code">.stars-top-valign-floats</code>
</div>
</div>
<div class="col-xs-4 stars-200px-tall">
<div class="stars-middle-valign-floats" id="sg-valign-floats-examples-id">
Middle align vertically <br><code class="sg-inline-code" id="sg-inline-code">.stars-middle-valign-floats</code>
</div>
</div>
<div class="col-xs-4 stars-200px-tall">
<div class="stars-bottom-valign-floats" id="sg-valign-floats-examples-id">
Bottom align vertically <br><code class="sg-inline-code" id="sg-inline-code">.stars-bottom-valign-floats</code>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-4">
Lorem ipsum dolor sit amet, consectetur adipiscing 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.
</div>
<div class="col-xs-4">
Lorem ipsum dolor sit amet, consectetur adipiscing 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.
</div>
<div class="col-xs-4">
Lorem ipsum dolor sit amet, consectetur adipiscing 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.
</div>
</div>
</div>
</div>
</div>
<br>
<br>
<h3><em>Outside</em> of a panel</h3>
<br>
<button type="button" class="btn btn-default" id="toggle-grid-overlay-button-2-id">Toggle overlay</button>
<br><br>
<div class="sg-grid-overlay" id="sg-default-grid-outside-of-a-panel">
<div class="row">
<div class="col-xs-4">
Lorem ipsum dolor sit amet, consectetur adipiscing 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.
</div>
<div class="col-xs-4">
Lorem ipsum dolor sit amet, consectetur adipiscing 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.
</div>
<div class="col-xs-4">
Lorem ipsum dolor sit amet, consectetur adipiscing 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.
</div>
</div>
<div class="row">
<div class="col-xs-4">
Lorem ipsum dolor sit amet, consectetur adipiscing 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.
</div>
<div class="col-xs-4">
Lorem ipsum dolor sit amet, consectetur adipiscing 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.
</div>
<div class="col-xs-4">
Lorem ipsum dolor sit amet, consectetur adipiscing 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.
</div>
</div>
<div class="row">
<div class="col-xs-4">
Lorem ipsum dolor sit amet, consectetur adipiscing 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.
</div>
<div class="col-xs-4">
Lorem ipsum dolor sit amet, consectetur adipiscing 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.
</div>
<div class="col-xs-4">
Lorem ipsum dolor sit amet, consectetur adipiscing 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.
</div>
</div>
</div>
<hr>
<!-- Fat grid -->
<h2>Fat grid</h2>
<h3><em>Inside</em> of a panel</h3>
<br>
<button type="button" class="btn btn-default" id="toggle-grid-overlay-button-3-id">Toggle overlay</button>
<br><br>
<div class="stars-main-body">
<div class="panel">
<div class="panel-heading main-panel-heading">
<h1 class="panel-title">I'm a main heading</h1>
</div>
<div class="panel-body main-panel-body stars-fat-grid sg-grid-overlay" id="sg-fat-grid-with-main-panel-body-perimeter">
<div class="row">
<div class="col-xs-4">
Lorem ipsum dolor sit amet, consectetur adipiscing 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.
</div>
<div class="col-xs-4">
Lorem ipsum dolor sit amet, consectetur adipiscing 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.
</div>
<div class="col-xs-4">
Lorem ipsum dolor sit amet, consectetur adipiscing 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.
</div>
</div>
<div class="row">
<div class="col-xs-4">
Lorem ipsum dolor sit amet, consectetur adipiscing 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.
</div>
<div class="col-xs-4">
Lorem ipsum dolor sit amet, consectetur adipiscing 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.
</div>
<div class="col-xs-4">
Lorem ipsum dolor sit amet, consectetur adipiscing 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.
</div>
</div>
<div class="row">
<div class="col-xs-4">
Lorem ipsum dolor sit amet, consectetur adipiscing 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.
</div>
<div class="col-xs-4">
Lorem ipsum dolor sit amet, consectetur adipiscing 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.
</div>
<div class="col-xs-4">
Lorem ipsum dolor sit amet, consectetur adipiscing 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.
</div>
</div>
</div>
</div>
</div>
<p id="sg-bg-info" class="bg-info">
<strong>Note:</strong> To match the width of the grid perimeter to the width of the <code class="sg-inline-code" id="sg-inline-code">.stars-fat-grid</code>, add <code class="sg-inline-code" id="sg-inline-code">.main-panel-body</code> and <code class="sg-inline-code" id="sg-inline-code">.main-panel-heading</code> to their respective element.
</p>
<br>
<br>
<h3><em>Outside</em> of a panel</h3>
<br>
<button type="button" class="btn btn-default" id="toggle-grid-overlay-button-4-id">Toggle overlay</button>
<br><br>
<div class="sg-grid-overlay stars-fat-grid" id="sg-fat-grid-outside-of-a-panel">
<div class="row">
<div class="col-xs-4">
Lorem ipsum dolor sit amet, consectetur adipiscing 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.
</div>
<div class="col-xs-4">
Lorem ipsum dolor sit amet, consectetur adipiscing 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.
</div>
<div class="col-xs-4">
Lorem ipsum dolor sit amet, consectetur adipiscing 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.
</div>
</div>
<div class="row">
<div class="col-xs-4">
Lorem ipsum dolor sit amet, consectetur adipiscing 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.
</div>
<div class="col-xs-4">
Lorem ipsum dolor sit amet, consectetur adipiscing 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.
</div>
<div class="col-xs-4">
Lorem ipsum dolor sit amet, consectetur adipiscing 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.
</div>
</div>
<div class="row">
<div class="col-xs-4">
Lorem ipsum dolor sit amet, consectetur adipiscing 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.
</div>
<div class="col-xs-4">
Lorem ipsum dolor sit amet, consectetur adipiscing 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.
</div>
<div class="col-xs-4">
Lorem ipsum dolor sit amet, consectetur adipiscing 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.
</div>
</div>
</div>
<hr>
<!-- Flush grid -->
<h2>Flush grid</h2>
<br>
<button type="button" class="btn btn-default" id="toggle-grid-pinlines-button-1-id">Toggle pinlines</button>
<br><br>
<div class="stars-main-body">
<div class="panel">
<div class="panel-body stars-flush-grid-pinline stars-flush-grid" id="sg-flush-grid-example-id">
<div class="row">
<div class="col-xs-4" id="sg-flush-grid-example-food-pic-1">
</div>
<div class="col-xs-4" id="sg-flush-grid-example-food-pic-2">
</div>
<div class="col-xs-4" id="sg-flush-grid-example-food-pic-3">
</div>
</div>
<div class="row">
<div class="col-xs-4" id="sg-flush-grid-example-food-pic-4">
</div>
<div class="col-xs-4" id="sg-flush-grid-example-food-pic-5">
</div>
<div class="col-xs-4" id="sg-flush-grid-example-food-pic-6">
</div>
</div>
<div class="row">
<div class="col-xs-4" id="sg-flush-grid-example-food-pic-7">
</div>
<div class="col-xs-4" id="sg-flush-grid-example-food-pic-8">
</div>
<div class="col-xs-4" id="sg-flush-grid-example-food-pic-9">
</div>
</div>
</div>
</div>
</div>
<hr>
<!-- Basic grid -->
<h2>Basic grid</h2>
<br>
<button type="button" class="btn btn-default" id="toggle-basic-grid-borders-button-1-id">Toggle borders</button>
<button type="button" class="btn btn-default" id="toggle-basic-grid-cell-collapse-button-1-id">Toggle single cell padding</button>
<button type="button" class="btn btn-default" id="toggle-all-basic-grid-cells-collapse-button-1-id">Toggle all padding</button>
<br><br>
<div class="stars-basic-grid" id="sg-basic-grid-example-id">
<div class="row">
<div class="col-xs-4" id="sg-collapse-basic-grid-cell-example-id">
Ut enim ad minim in veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo velit ullamco consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse.
</div>
<div class="col-xs-4">
Ut enim ad minim in veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo velit ullamco consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse.
</div>
<div class="col-xs-4">
Ut enim ad minim in veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo velit ullamco consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse.
</div>
</div>
<div class="row">
<div class="col-xs-4">
Ut enim ad minim in veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo velit ullamco consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse.
</div>
<div class="col-xs-4">
Ut enim ad minim in veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo velit ullamco consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse.
</div>
<div class="col-xs-4">
Ut enim ad minim in veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo velit ullamco consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse.
</div>
</div>
</div>
<br>
<h3>Vertical alignments</h3>
<br>
<div class="stars-basic-grid stars-200px-tall">
<div class="row">
<div class="col-xs-4 stars-valign-top">
Ut enim ad minim in veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo velit ullamco consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse.
</div>
<div class="col-xs-4 stars-valign-bottom">
Ut enim ad minim in veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo velit ullamco consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse.
</div>
<div class="col-xs-4 stars-valign-middle">
Ut enim ad minim in veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo velit ullamco consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse.
</div>
</div>
</div>
<hr>
<!-- Real table grid -->
<h2>Real table grids</h2>
<br>
<p id="sg-bg-info" class="bg-info">
<strong>Width auto:</strong> What makes these real table grids special is that they can have their column widths set to auto. All of the previous grids cannot do that without wrapping.
</p>
<br>
<h3>Real table grid</h3>
<br>
<button type="button" class="btn btn-default" id="toggle-real-table-grid-overlay-button-id-1">Toggle overlay</button>
<button type="button" class="btn btn-default" id="toggle-real-table-grids-perimeter-button-id-1">Toggle perimeter</button>
<br>
<br>
<table width="100%" class="stars-real-table-grid sg-grid-overlay" id="sg-real-table-grid-example-id-1">
<tr>
<td>
Little bit of content
</td>
<td>
Ut enim ad minim in veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo velit ullamco consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse.
</td>
</tr>
<tr>
<td>
Little bit of content
</td>
<td>
Ut enim ad minim in veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo velit ullamco consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse.
</td>
</tr>
<tr>
<td>
Little bit of content
</td>
<td>
Ut enim ad minim in veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo velit ullamco consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse.
</td>
</tr>
</table>
<br>
<h3>Fat real table grid</h3>
<br>
<button type="button" class="btn btn-default" id="toggle-real-table-grid-overlay-button-id-2">Toggle overlay</button>
<button type="button" class="btn btn-default" id="toggle-real-table-grids-perimeter-button-id-2">Toggle perimeter</button>
<button type="button" class="btn btn-default" id="toggle-real-table-grids-perimeter-button-id-3">Toggle default perimeter</button>
<br>
<br>
<table width="100%" class="stars-fat-real-table-grid sg-grid-overlay" id="sg-fat-real-table-grid-example-id-1">
<tr>
<td>
Little bit of content
</td>
<td>
Ut enim ad minim in veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo velit ullamco consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse.
</td>
</tr>
<tr>
<td>
Little bit of content
</td>
<td>
Ut enim ad minim in veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo velit ullamco consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse.
</td>
</tr>
<tr>
<td>
Little bit of content
</td>
<td>
Ut enim ad minim in veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo velit ullamco consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse.
</td>
</tr>
</table>
Used for making inline label-value lists.
Use an unordered list to create an inline label-value list.
Apply .stars-inline-label-value-list to the <ul> tag.
| Class | Description |
|---|---|
.label-value-list-natural-break |
Creates a visual break between list label items. |
.label-value-list-deliberate-break |
Create a deliberate break, with a horizontal line, between list label items. |
Notice: The zebra stripe pattern is not needed since the label value butts up right next to the label.
Though, if you really want it, you can add stripes by applying .stars-striped-inline-label-value-list to the ol/ul.
Click the following button to see the result:
On the list above, if the numerator gets too big, as in becomes too wide, the numerator will begin to overlap and run into the label.
If that poses a problem, try using the Flush Label Value List component instead.
Though, if you prefer not to use that component, you could also solve for this problem by extending on
.stars-flush-positioned-manual-list-numerator and
.stars-inside-manual-list-numerator-inline-label-value-list with your own CSS.
|
|
|
|
|
5a. Accusamus
Adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea. |
5b. Accusamus | 5c. Accusamus | 5d. Accusamus |
<h2>Simple Single Level Lists</h2>
<h3>Unstyled list</h3>
<ul class="stars-inline-label-value-list list-unstyled">
<li>
<label>Zonsequatur: </label>Accusamus
</li>
<li>
<label>Koluptate: </label>Doloribus
</li>
<li>
<label>Pernatur: </label>Impedit
</li>
<li>
<label>Taerat: </label>Maxime
</li>
<li>
<label>Prehenderit: </label>Tugiat
</li>
</ul>
<h3>Default unordered list</h3>
<ul class="stars-inline-label-value-list">
<li>
<label>Zonsequatur: </label>Accusamus
</li>
<li>
<label>Koluptate: </label>Doloribus
</li>
<li>
<label>Pernatur: </label>Impedit
</li>
<li>
<label>Taerat: </label>Maxime
</li>
<li>
<label>Prehenderit: </label>Tugiat
</li>
</ul>
<h3>Ordered list</h3>
<ol class="stars-inline-label-value-list" type="a">
<li>
<label>Zonsequatur: </label>Accusamus
</li>
<li>
<label>Koluptate: </label>Doloribus
</li>
<li>
<label>Pernatur: </label>Impedit
</li>
<li>
<label>Taerat: </label>Maxime
</li>
<li>
<label>Prehenderit: </label>Tugiat
</li>
</ol>
<hr>
<h2>Manually Numerated Lists</h2>
<figcaption>Numerated items are <strong>not</strong> flush</figcaption>
<ul class="stars-inline-label-value-list list-unstyled">
<li>
<span class="stars-list-style-type-style">1a. </span><label>Zonsequatur: </label>Accusamus
</li>
<li>
<span class="stars-list-style-type-style">123b. </span><label>Koluptate: </label>Doloribus
</li>
<li>
<span class="stars-list-style-type-style">1c. </span><label>Pernatur: </label>Impedit
</li>
</ul>
<figcaption>Numerated items are flush</figcaption>
<ul class="stars-inline-label-value-list stars-inside-manual-list-numerator-inline-label-value-list list-unstyled">
<li>
<span class="stars-list-style-type-style stars-flush-positioned-manual-list-numerator">1a. </span><label>Zonsequatur: </label>Accusamus
</li>
<li>
<span class="stars-list-style-type-style stars-flush-positioned-manual-list-numerator">123b. </span><label>Koluptate: </label>Doloribus
</li>
<li>
<span class="stars-list-style-type-style stars-flush-positioned-manual-list-numerator">1c. </span><label>Pernatur: </label>Impedit
</li>
</ul>
<div class="sg-callout-gotcha" id="sg-callout-gotcha">
<p class="sg-p" id="sg-p">
On the list above, if the numerator gets too big, as in becomes too wide, the numerator will begin to overlap and run into the label.
If that poses a problem, try using the Flush Label Value List component instead.
Though, if you prefer not to use that component, you could also solve for this problem by extending on
<code class="sg-inline-code" id="sg-inline-code">.stars-flush-positioned-manual-list-numerator</code> and
<code class="sg-inline-code" id="sg-inline-code">.stars-inside-manual-list-numerator-inline-label-value-list</code> with your own CSS.
</p>
</div>
<hr>
<h2>More Complicated Lists</h2>
<h3>Ordered list with sub-list</h3>
<ol class="stars-inline-label-value-list" type="1">
<li>
<label>Zonsequatur: </label>Accusamus
</li>
<li>
<label>Koluptate: </label>Doloribus
</li>
<li>
<label>Pernatur: </label>Impedit
</li>
<li>
<label>Taerat: </label>Maxime
</li>
<li>
<label>Taerat: </label>Maxime
<ol class="stars-inline-label-value-list" type="a">
<li>
<label>Prehenderit: </label>Tugiat
</li>
<li>
<label>Vaerat: </label>Aximet
</li>
<li>
<label>Caerat: </label>Taxime
</li>
</ol>
</li>
<li>
<label>Not floated erat: </label>Vaxime
</li>
<li>
<label>Koluptate: </label>Doloribus
</li>
<li>
<label>Pernatur: </label>Impedit
</li>
<li>
<label>Pernatur: </label>Impedit
</li>
</ol>
<h3>Ordered list with some inline items</h3>
<ol class="stars-inline-label-value-list" type="1">
<li>
<label>Zonsequatur: </label>Accusamus
</li>
<li>
<label>Koluptate: </label>Doloribus
</li>
<li>
<label>Pernatur: </label>Impedit
</li>
<li>
<label>Taerat: </label>Maxime
</li>
</ol>
<table width="100%" class="stars-real-table-grid stars-removed-perimeter-real-table-grid">
<tr>
<td>
<ol class="stars-inline-item-inline-label-value-list" type="1" start="5">
<li>
<label>Zonsequatur: </label>Accusamus
</li>
</ol>
</td>
<td>
<ol class="stars-inline-item-inline-label-value-list" type="1" start="6">
<li>
<label>Zonsequatur: </label>Accusamus
</li>
</ol>
</td>
<td>
<ol class="stars-inline-item-inline-label-value-list" type="1" start="7">
<li>
<label>Zonsequatur: </label>Accusamus
</li>
</ol>
</td>
<td>
<ol class="stars-inline-item-inline-label-value-list" type="1" start="8">
<li>
<label>Zonsequatur: </label>Accusamus
</li>
</ol>
</td>
</tr>
</table>
<ol class="stars-inline-label-value-list" type="1" start="9">
<li>
<label>NEW Koluptate: </label>Doloribus
</li>
<li>
<label>Pernatur: </label>Impedit
</li>
<li>
<label>Taerat: </label>Maxime
</li>
<li>
<label>Erat: </label>Vaxime
</li>
</ol>
<!-- -->
<h3>Ordered list with fake inline items</h3>
<ol class="stars-inline-label-value-list" type="1">
<li>
<label>Zonsequatur: </label>Accusamus
</li>
<li>
<label>Koluptate: </label>Doloribus
</li>
<li>
<label>Pernatur: </label>Impedit
</li>
<li>
<label>Taerat: </label>Maxime
</li>
</ol>
<hr>
<table width="100%" class="stars-real-table-grid stars-removed-perimeter-real-table-grid">
<tr>
<td>
<span class="stars-list-style-type-style">5a. </span><label>Zonsequatur: </label>Accusamus
<p>
Adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam
quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit
laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea.
</p>
</td>
<td>
<span class="stars-list-style-type-style">5b. </span><label>Zonsequatur: </label>Accusamus
</td>
<td>
<span class="stars-list-style-type-style">5c. </span><label>Zonsequatur: </label>Accusamus
</td>
<td>
<span class="stars-list-style-type-style">5d. </span><label>Zonsequatur: </label>Accusamus
</td>
</tr>
</table>
<hr>
<ol class="stars-inline-label-value-list" type="1" start="6">
<li>
<label>NEW Koluptate: </label>Doloribus
</li>
<li>
<label>Pernatur: </label>Impedit
</li>
<li>
<label>Taerat: </label>Maxime
</li>
<li>
<label>Erat: </label>Vaxime
</li>
</ol>
<!-- -->
<h3>Inline label value list "multi-inline values"</h3>
<ul class="stars-inline-label-value-list list-unstyled">
<li>
<label>Laudantium: </label>
<ul class="stars-inline-label-value-list-multi-inline-values">
<li>Aspernatur</li>
<li>Nesciunt</li>
<li>Consequatur</li>
<li>Voluptate</li>
</ul>
</li>
<li>
<label>Reprehenderit: </label>
<ul class="stars-inline-label-value-list-multi-inline-values">
<li>Magni</li>
<li>Quaerat</li>
<li>Reprehenderit</li>
<li>Fugiat</li>
</ul>
</li>
</ul>
<hr>
<h2>Lists with Removable Values</h2>
<figcaption>Multi-inline values</figcaption>
<ul class="stars-inline-label-value-list list-unstyled">
<li>
<label>Reprehenderit: </label>
<ul class="stars-inline-label-value-list-multi-inline-values">
<li>Magni <button type="button" class="stars-inline-label-value-list-remove-value-button"></button></li>
<li>Quaerat <button type="button" class="stars-inline-label-value-list-remove-value-button"></button></li>
<li>Reprehenderit <button type="button" class="stars-inline-label-value-list-remove-value-button"></button></li>
<li>Fugiat <button type="button" class="stars-inline-label-value-list-remove-value-button"></button></li>
</ul>
</li>
</ul>
<figcaption>Single values</figcaption>
<ul class="stars-inline-label-value-list list-unstyled">
<li>
<label>Zonsequatur: </label>Accusamus <button type="button" class="stars-inline-label-value-list-remove-value-button"></button>
</li>
<li>
<label>Koluptate: </label>Doloribus <button type="button" class="stars-inline-label-value-list-remove-value-button"></button>
</li>
<li>
<label>Pernatur: </label>Impedit <button type="button" class="stars-inline-label-value-list-remove-value-button"></button>
</li>
<li>
<label>Taerat: </label>Maxime <button type="button" class="stars-inline-label-value-list-remove-value-button"></button>
</li>
<li>
<label>Prehenderit: </label>Tugiat <button type="button" class="stars-inline-label-value-list-remove-value-button"></button>
</li>
</ul>
<script>
/* remove */
$(".stars-inline-label-value-list-remove-value-button").on("click", function() {
$(this).parent().addClass("hidden");
});
</script>
Standard main section headings.
<h1>H1. Section heading</h1>
<h2>H2. Section heading</h2>
<h3>H3. Section heading</h3>
<!-- Headings with supporting secondary text -->
<h1>H1. Section heading <small>Secondary text</small></h1>
<h2>H2. Section heading <small>Secondary text</small></h2>
<h3>H3. Section heading <small>Secondary text</small></h3>Use metadata for describing data.
<header>
<h1>John Doe's Fabulous Grocery Store</h1>
<ul class="stars-metadata">
<li>John Doe</li>
<li>Northern Virginia</li>
<li>NFS: 2274329</li>
<li>Non-profit</li>
</ul>
</header>
<br><br>
<header>
<ul class="stars-metadata">
<li>Friday, March 27, 2015</li>
<li>7 hours ago</li>
<li>By: Laura Smith</li>
<li>Associated Press</li>
</ul>
<h1>News on John Doe's Fabulous Grocery Store</h1>
</header><div class="stars-left-nav" id="sg-side-nav-headings-nav-1-id">
<div class="panel">
<div class="panel-heading">
<h1 class="panel-title">
H1 Heading
</h1>
</div>
<div class="panel-body">
<h2>H2 with no content of its own</h2>
<h3>H3 heading</h3>
<p>
Architecto beatae vitae dicta sunt e mo
explicabo. Nemo enim ipsam volup
quia voluptas sit aspernatur erna aut odit.
</p>
<hr>
<h2>H2 with no content of its own <small>Subheading for h2</small></h2>
<h3>H3 heading</h3>
<p>
Si archi tecto be atae vi tae dicta sunt
expl icabo. Nemo cto enim ipsam ptat em
quia voluptas sit aspernatur aut odit.
</p>
<h3>H3 heading</h3>
<p>
Arc hite cto beatae vitae dicta sunt vit
explicabo. Nemo enim ipsam oluptat co
quia volu ptas sit aspernatur aut odit.
Tia. Nemo enim ipsam oatae vitae di.
</p>
<p>
Si architecto beatae vitae dicta sun em
explicabo. Nemo enim ipsam enimi odit
quia. Nemo enim ipsam oluptat co
quia volu ptas sit aspernatur aut.
</p>
</div>
<div class="nested-panel">
<div class="panel">
<div class="panel-heading">
<h1 class="panel-title">
H1 Nested section
</h1>
</div>
<div class="panel-body">
Panel content
</div>
</div>
</div>
</div>
</div>
<div class="stars-left-nav" id="sg-side-nav-headings-nav-2-id">
<div class="panel">
<div class="panel-heading">
<h1 class="panel-title">
H1 Heading
</h1>
</div>
<div class="panel-body">
<h2>H2 heading</h2>
<p>
Si architecto beatae vitae dicta sun em
explicabo. Nemo enim ipsam enimi
quia voluptas sit aspe rnatur aut vit odi.
</p>
<h3>H3 heading</h3>
<p>
Architecto beatae vitae dicta sunt e mo
explicabo. Nemo enim ipsam volup
quia voluptas sit aspernatur erna aut odit.
</p>
<h2>H2 heading <small>Subheading for h2</small></h2>
<p>
Si archi tecto be atae vi tae dicta sunt
expl icabo. Nemo cto enim ipsam ptat em
quia voluptas sit aspernatur aut odit.
</p>
<h3>H3 heading <small>Subheading for h3</small></h3>
<p>
Arc hite cto beatae vitae dicta sunt vit
explicabo. Nemo enim ipsam oluptat co
quia volu ptas sit aspernatur aut odit.
</p>
<p>
Si architecto beatae vitae dicta sun em
explicabo. Nemo enim ipsam enimi
quia.
</p>
</div>
<div class="nested-panel">
<div class="panel">
<div class="panel-heading">
<h1 class="panel-title">
H1 Nested section
</h1>
</div>
<div class="panel-body">
Panel content
</div>
</div>
</div>
</div>
</div>
<div class="stars-expand-parent-of-float"></div><div class="stars-left-nav" id="sg-side-nav-lists-nav-1-id">
<div class="panel">
<div class="panel-heading">
<h1 class="panel-title">
H1 Heading
</h1>
</div>
<div class="panel-body">
<h3>Inline label-value list</h3>
<ul class="stars-inline-label-value-list">
<li>
<label>Vitae: </label>Here's a long list value that wraps arc hite beata hite cto be atae natur tic
</li>
<li>
<label>Explicabo: </label>To hite beatae ite cto be
</li>
<li>
<label>Oluptat: </label>Bea tae hite cto atae vi tae
</li>
</ul>
<hr>
<h3>Bulleted inline label-value list</h3>
<ul class="stars-bulleted-inline-label-value-list">
<li>
<label>Vitae: </label><span class="stars-bulleted-list-inline-label-value">Here's a long list value that wraps arc hite beata hite cto be ata</span>
</li>
<li>
<label>Oluptat: </label><span class="stars-bulleted-list-inline-label-value">Bea tae hite cto atae vi tae</span>
</li>
<li>
<label>Tecto: </label><span class="stars-bulleted-list-inline-label-value">Hite arc cto beatae ite be ata</span>
</li>
</ul>
<hr>
<h3>Native <em>un</em>ordered list</h3>
<ul>
<li>
Here's a long list value that wraps arc hite beata hite cto be atae natur tic
</li>
<li>
To hite beatae ite cto be atae cto
</li>
<li>Luptate bea tae hite cto atae vi tae
<ul>
<li>Sono io, loro pieto</li>
<li>ite beatae ite cto be atae cto</li>
<li>beatae te ite be atae tero</li>
</ul>
</li>
</ul>
<h3>Native ordered list</h3>
<ol>
<li>
Here's a long list value that wraps arc hite beata hite cto be atae natur tic
</li>
<li>
To hite beatae ite cto be atae cto
</li>
<li>Luptate bea tae hite cto atae vi tae
<ol>
<li>Sono io, loro pieto</li>
<li>ite beatae ite cto be atae cto</li>
<li>beatae te ite be atae tero</li>
</ol>
</li>
</ol>
<hr>
<h3>Description list</h3>
<dl>
<dt>Felis euismod sempe</dt>
<dd>A description list is perfect for defining terms.</dd>
<dt>Euismod</dt>
<dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
<dd>Donec id elit non mi porta gravida at eget metus.</dd>
<dt>Malesuada porta</dt>
<dd>Etiam porta sem malesuada magna mollis euismod.</dd>
</dl>
<hr>
<h2>Type casted inline label-value list</h2>
<ul class="stars-inline-label-value-list stars-main-casted-inline-label-value-list">
<li>
<label>Vitae: </label>Here's a long list value that wraps arc hite beata hite cto be atae natur tic
</li>
<li>
<label>Explicabo: </label>To hite beatae ite cto be
</li>
<li>
<label>Oluptat: </label>Bea tae hite cto atae vi tae
</li>
</ul>
<p id="sg-bg-info" class="bg-info">
Apply <code class="sg-inline-code" id="sg-inline-code">.stars-main-casted-inline-label-value-list</code> to the list to make the labels bold and the values black.
</p>
</div>
<div class="nested-panel">
<div class="panel">
<div class="panel-heading">
<h1 class="panel-title">
H1 Nested section
</h1>
</div>
<div class="panel-body">
Panel content
</div>
</div>
</div>
</div>
</div>
<div class="stars-left-nav" id="sg-side-nav-lists-nav-2-id">
<div class="panel-group">
<div class="panel">
<div class="panel-heading">
<h1 class="panel-title">
List group
</h1>
</div>
<div class="panel-body">
<div class="list-group">
<div class="list-group-item">
<a href="#">Dapibus ac facilisis in</a>
</div>
<div class="list-group-item">
<a href="#">Morbi leo risus</a>
</div>
<div class="list-group-item">
<a href="#">Porta ac consectetur ac</a>
</div>
<div class="list-group-item">
<a href="#">Vestibulum at eros</a>
</div>
</div>
</div>
</div>
<div class="panel">
<div class="panel-heading">
<h1 class="panel-title">
List group with icon buttons
</h1>
</div>
<div class="panel-body">
<div class="list-group">
<div class="list-group-item">
<button type="button" class="btn-link pull-right">
<span class="glyphicon glyphicon-trash text-danger"></span>
</button>
<button type="button" class="btn-link pull-right">
<span class="glyphicon glyphicon-pencil"></span>
</button>
<a href="#">Dapibus ac facilisis in</a>
</div>
<div class="list-group-item">
<button type="button" class="btn-link pull-right">
<span class="glyphicon glyphicon-trash text-danger"></span>
</button>
<button type="button" class="btn-link pull-right">
<span class="glyphicon glyphicon-pencil"></span>
</button>
<a href="#">Morbi leo risus</a>
</div>
<div class="list-group-item">
<button type="button" class="btn-link pull-right">
<span class="glyphicon glyphicon-trash text-danger"></span>
</button>
<button type="button" class="btn-link pull-right">
<span class="glyphicon glyphicon-pencil"></span>
</button>
<a href="#">Porta ac consectetur ac</a>
</div>
<div class="list-group-item">
<button type="button" class="btn-link pull-right">
<span class="glyphicon glyphicon-trash text-danger"></span>
</button>
<button type="button" class="btn-link pull-right">
<span class="glyphicon glyphicon-pencil"></span>
</button>
<a href="#">Vestibulum at eros</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="stars-expand-parent-of-float"></div>Additonal UI icons, not provided from Bootstrap.
<div id="sg-stars-icon-block-id">
<span class="stars-icon stars-icon-minimize-left-horizontally"></span>
<div id="sg-stars-icon-block-label-id">
stars-icon-minimize-left-horizontally
</div>
</div>
<div id="sg-stars-icon-block-id">
<span class="stars-icon stars-icon-maximize-right-horizontally"></span>
<div id="sg-stars-icon-block-label-id">
stars-icon-maximize-right-horizontally
</div>
</div>
<div id="sg-stars-icon-block-id">
<span class="stars-icon stars-icon-minimize-right-horizontally"></span>
<div id="sg-stars-icon-block-label-id">
stars-icon-minimize-right-horizontally
</div>
</div>
<div id="sg-stars-icon-block-id">
<span class="stars-icon stars-icon-maximize-left-horizontally"></span>
<div id="sg-stars-icon-block-label-id">
stars-icon-maximize-left-horizontally
</div>
</div>
<!--//-->
<div id="sg-stars-icon-block-id">
<span class="stars-icon stars-icon-minimize-down-vertically"></span>
<div id="sg-stars-icon-block-label-id">
stars-icon-minimize-down-vertically
</div>
</div>
<div id="sg-stars-icon-block-id">
<span class="stars-icon stars-icon-maximize-up-vertically"></span>
<div id="sg-stars-icon-block-label-id">
stars-icon-maximize-up-vertically
</div>
</div>
<div id="sg-stars-icon-block-id">
<span class="stars-icon stars-icon-minimize-up-vertically"></span>
<div id="sg-stars-icon-block-label-id">
stars-icon-minimize-up-vertically
</div>
</div>
<div id="sg-stars-icon-block-id">
<span class="stars-icon stars-icon-maximize-down-vertically"></span>
<div id="sg-stars-icon-block-label-id">
stars-icon-maximize-down-vertically
</div>
</div>Contextual alert messages
Lead copy here. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget. Cras mattis consectetur purus sit.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.
Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.
<div class="alert alert-primary alert-dismissible fade in" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h2>Official Notification here</h2>
<p class="lead">Lead copy here. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget. Cras mattis consectetur purus sit.</p>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p>
<p>
<button type="button" class="btn btn-default">Take this action</button>
<button type="button" class="btn btn-link">Or do this</button>
</p>
</div>
<div class="alert alert-attention alert-dismissible fade in" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h2>Attention! Best read this!</h2>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p>
<p>
<button type="button" class="btn btn-attention">Take this action</button>
<button type="button" class="btn btn-default">Or do this</button>
</p>
</div>
<div class="alert alert-success alert-dismissible fade in" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h2>Success! Great job!</h2>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p>
<p>
<button type="button" class="btn btn-success">Take this action</button>
<button type="button" class="btn btn-default">Or do this</button>
</p>
</div>
<div class="alert alert-info alert-dismissible fade in" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h2>Valuable info here!</h2>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p>
<p>
<button type="button" class="btn btn-info">Take this action</button>
<button type="button" class="btn btn-default">Or do this</button>
</p>
</div>
<div class="alert alert-warning alert-dismissible fade in" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h2>Warning! Proceed with caution!</h2>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p>
<p>
<button type="button" class="btn btn-warning">Take this action</button>
<button type="button" class="btn btn-default">Or do this</button>
</p>
</div>
<div class="alert alert-danger alert-dismissible fade in" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h2>Danger! You got an error!</h2>
<p>Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p>
<p>
<button type="button" class="btn btn-danger">Take this action</button>
<button type="button" class="btn btn-default">Or do this</button>
</p>
</div>
<div id="sg-ancillary-nav-example-background-id">
<ul class="stars-ancillary-nav pull-right">
<li>
<a href="">Home</a>
</li>
<span class="stars-ancillary-nav-divider-lines"> | </span>
<li>
<a href="">ALERT</a>
</li>
<span class="stars-ancillary-nav-divider-lines"> | </span>
<li>
<a href="">Ephesoft</a>
</li>
<span class="stars-ancillary-nav-divider-lines"> | </span>
<li>
<a class="stars-no-text-decoration" href="">
<span class="glyphicon glyphicon-bell text-warning-brighter"></span>
<span class="stars-notification-badge">3</span>
</a>
<a href="">John Doe</a>
</li>
<span class="stars-ancillary-nav-divider-lines"> | </span>
<li>
<a href="">Contact Us</a>
</li>
<span class="stars-ancillary-nav-divider-lines"> | </span>
<li>
<a href="">Logout</a>
</li>
</ul>
<div class="stars-expand-parent-of-float"></div>
</div><ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Library</a></li>
<li class="active">Data</li>
</ol><div class="stars-root-body-layout">
<!-- Left nav expanded: START -->
<div class="stars-left-nav stars-left-nav-expanded" id="stars-left-nav-expanded-id">
<div onClick="toggleLeftRightNav('stars-left-nav-expanded-id', 'stars-left-nav-collapsed-id');" class="stars-small-window-controller-bar stars-clickable-window-controller-bar">
<button onClick="toggleLeftRightNav('stars-left-nav-expanded-id', 'stars-left-nav-collapsed-id'); event.stopPropagation();" class="stars-small-window-controller-bar-button stars-small-window-controller-bar-minimize-left-horizontally-button">
<span class="stars-icon"></span>
</button>
</div>
<div class="panel-group">
<!-- Panel: START -->
<div class="panel">
<div class="panel-heading heading-for-bodiless-panel">
<h1 class="panel-title">Advanced Search</h1>
</div>
<div class="nested-panel">
<div class="row">
<div class="col-xs-12">
<!-- Panel group: START -->
<div class="panel-group">
<div class="panel">
<div class="panel-heading collapsed" data-toggle="collapse" href="#expanded-left-nav-panel-1-heading-id">
<h1 class="panel-title">
Panel heading
</h1>
</div>
<div class="collapse" id="expanded-left-nav-panel-1-heading-id">
<div class="panel-body">
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 molli.
</div>
</div>
</div>
<div class="panel">
<div class="panel-heading collapsed" data-toggle="collapse" href="#expanded-left-nav-panel-2-heading-id">
<h1 class="panel-title">
Panel heading
</h1>
</div>
<div class="collapse" id="expanded-left-nav-panel-2-heading-id">
<div class="panel-body">
Molli aute irure dolor in reprehenderit in voluptate velit esse
cupidatat cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat non proident, sunt in culpa qui officia deserunt duis.
</div>
</div>
</div>
</div>
<!-- Panel group: END -->
</div>
</div>
</div>
</div>
<!-- Panel: END -->
</div>
</div>
<!-- Left nav expanded: END -->
<!-- Left nav collapsed: START -->
<div class="stars-left-nav stars-left-nav-collapsed" id="stars-left-nav-collapsed-id">
<div onClick="toggleLeftRightNav('stars-left-nav-collapsed-id', 'stars-left-nav-expanded-id');" class="stars-small-window-controller-bar stars-clickable-window-controller-bar">
<button onClick="toggleLeftRightNav('stars-left-nav-collapsed-id', 'stars-left-nav-expanded-id'); event.stopPropagation();" class="stars-small-window-controller-bar-button stars-small-window-controller-bar-maximize-right-horizontally-button">
<span class="stars-icon"></span>
</button>
</div>
<div class="panel">
<div class="panel-body stars-left-nav-collapsed-hit-area" onclick="toggleLeftRightNav('stars-left-nav-collapsed-id', 'stars-left-nav-expanded-id');">
<span class="glyphicon glyphicon-search"></span>
</div>
</div>
</div>
<!-- Left nav collapsed: END -->
<div class="stars-main">
<div class="stars-main-body">
</div>
</div>
<!-- Right nav expanded: START -->
<div class="stars-right-nav stars-right-nav-expanded" id="stars-right-nav-expanded-id">
<div onClick="toggleLeftRightNav('stars-right-nav-expanded-id', 'stars-right-nav-collapsed-id');" class="stars-small-window-controller-bar stars-clickable-window-controller-bar">
<button onClick="toggleLeftRightNav('stars-right-nav-expanded-id', 'stars-right-nav-collapsed-id'); event.stopPropagation();" class="stars-small-window-controller-bar-button stars-small-window-controller-bar-minimize-right-horizontally-button pull-left">
<span class="stars-icon"></span>
</button>
</div>
<div class="panel-group">
<!-- Panel: START -->
<div class="panel">
<div class="panel-heading heading-for-bodiless-panel">
<h1 class="panel-title">Filter Results</h1>
</div>
<div class="nested-panel">
<div class="row">
<div class="col-xs-12">
<!-- Panel group: START -->
<div class="panel-group">
<div class="panel">
<div class="panel-heading collapsed" data-toggle="collapse" href="#expanded-right-nav-panel-1-heading-id">
<h1 class="panel-title">
Panel heading
</h1>
</div>
<div class="collapse" id="expanded-right-nav-panel-1-heading-id">
<div class="panel-body">
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 molli.
</div>
</div>
</div>
<div class="panel">
<div class="panel-heading collapsed" data-toggle="collapse" href="#expanded-right-nav-panel-2-heading-id">
<h1 class="panel-title">
Panel heading
</h1>
</div>
<div class="collapse" id="expanded-right-nav-panel-2-heading-id">
<div class="panel-body">
Molli aute irure dolor in reprehenderit in voluptate velit esse
cupidatat cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat non proident, sunt in culpa qui officia deserunt duis.
</div>
</div>
</div>
</div>
<!-- Panel group: END -->
</div>
</div>
</div>
</div>
<!-- Panel: END -->
</div>
</div>
<!-- Right nav expanded: END -->
<!-- Right nav collapsed: START -->
<div class="stars-right-nav stars-right-nav-collapsed" id="stars-right-nav-collapsed-id">
<div onClick="toggleLeftRightNav('stars-right-nav-collapsed-id', 'stars-right-nav-expanded-id');" class="stars-small-window-controller-bar stars-clickable-window-controller-bar">
<button onClick="toggleLeftRightNav('stars-right-nav-collapsed-id', 'stars-right-nav-expanded-id'); event.stopPropagation();" class="stars-small-window-controller-bar-button stars-small-window-controller-bar-maximize-left-horizontally-button pull-left">
<span class="stars-icon"></span>
</button>
</div>
<div class="panel">
<div class="panel-body stars-right-nav-collapsed-hit-area" onclick="toggleLeftRightNav('stars-right-nav-collapsed-id', 'stars-right-nav-expanded-id');">
<span class="glyphicon glyphicon-filter"></span>
</div>
</div>
</div>
<!-- Right nav collapsed: END -->
</div>
<script>
function toggleLeftRightNav ( passedElementToHide, passedElementToShow ) {
$( "#"+passedElementToShow ).toggle();
$( "#"+passedElementToHide ).toggle();
}
</script>Compartments are used for grouping together related elements.
Compartments are made up of sub-compartments. Sub-compartments, as a UI pattern, should be able to act on one another.
.stars-compartment to create a compartment
Simply wrap Bootstrap's grid system directly inside of a div classed with .stars-compartment.
Use the col-xs-* column class variant to prevent wrapping of compartments.
| Class | Description | Apply to |
|---|---|---|
.collapse-all-sub-compartments |
Collapses padding of all sub-compartments. | Apply to div classed with .stars-compartment |
.collapse-sub-compartment |
Collapses padding of an individual sub-compartment. | Apply to div classed with Bootstrap's .col-* |
.collapse-sub-compartment added to the left side sub-compartment
<div class="stars-compartment">
<div class="row">
<div class="col-xs-4">col-xs-4 (sub-compartment)</div>
<div class="col-xs-4">col-xs-4 (sub-compartment)</div>
<div class="col-xs-4">col-xs-4 (sub-compartment)</div>
</div>
<div class="row">
<div class="col-xs-4">col-xs-4 (sub-compartment)</div>
<div class="col-xs-4">col-xs-4 (sub-compartment)</div>
<div class="col-xs-4">col-xs-4 (sub-compartment)</div>
</div>
</div>Fixed position popovers, used as persistent companion windows for keeping content available for when you need it.
<button type="button" class="btn btn-default" data-fixed-popover-launcher="sg-stars-bottom-right-small-sized-fixed-popover-example-id">
Small bottom right
</button>
<div class="stars-small-sized-fixed-popover hidden" data-fixed-popover-placement="bottom right" id="sg-stars-bottom-right-small-sized-fixed-popover-example-id">
<div class="stars-window-controller-bar">
<span class="stars-window-controller-bar-title">Title here</span>
<button type="button" class="stars-window-controller-bar-button stars-window-controller-bar-close-button" data-element-to-hide="sg-stars-bottom-right-small-sized-fixed-popover-example-id">
<span class="glyphicon"></span>
</button>
<button type="button" class="stars-window-controller-bar-button stars-window-controller-bar-minimize-down-vertically-button" data-element-to-hide="sg-stars-bottom-right-small-sized-fixed-popover-panel-example-id">
<span class="stars-icon"></span>
</button>
</div>
<div class="panel" id="sg-stars-bottom-right-small-sized-fixed-popover-panel-example-id">
<div class="panel-heading">
<h1 class="panel-title">
Fixed popover heading
</h1>
</div>
<div class="collapse in">
<div class="panel-body">
<h2>Easily available content here</h2>
<p>
Molli aute irure dolor in reprehenderit in voluptate velit esse
cupidatat cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat non proident, sunt in culpa qui officia deserunt duis.
</p>
<h3>H3 level heading</h3>
<p>
Molli aute irure dolor in reprehenderit in voluptate velit esse
cupidatat cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat non proident, sunt in culpa qui officia deserunt duis.
</p>
<p>
Molli aute irure dolor in reprehenderit in voluptate velit esse
cupidatat cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat non proident, sunt in culpa qui officia deserunt duis.
</p>
<h3>H3 level heading</h3>
<p>
Molli aute irure dolor in reprehenderit in voluptate velit esse
cupidatat cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat non proident, sunt in culpa qui officia deserunt duis.
</p>
<p>
Molli aute irure dolor in reprehenderit in voluptate velit esse
cupidatat cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat non proident, sunt in culpa qui officia deserunt duis.
</p>
<p>
Molli aute irure dolor in reprehenderit in voluptate velit esse
cupidatat cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat non proident, sunt in culpa qui officia deserunt duis.
</p>
</div>
</div>
</div>
</div>
<!-- -->
<button type="button" class="btn btn-default" data-fixed-popover-launcher="sg-stars-bottom-right-medium-sized-fixed-popover-example-id">
Medium bottom right
</button>
<div class="stars-medium-sized-fixed-popover hidden" data-fixed-popover-placement="bottom right" id="sg-stars-bottom-right-medium-sized-fixed-popover-example-id">
<div class="stars-window-controller-bar">
<span class="stars-window-controller-bar-title">Title here</span>
<button type="button" class="stars-window-controller-bar-button stars-window-controller-bar-close-button" data-element-to-hide="sg-stars-bottom-right-medium-sized-fixed-popover-example-id">
<span class="glyphicon"></span>
</button>
<button type="button" class="stars-window-controller-bar-button stars-window-controller-bar-minimize-down-vertically-button" data-element-to-hide="sg-stars-bottom-right-medium-sized-fixed-popover-panel-example-id">
<span class="stars-icon"></span>
</button>
</div>
<div class="panel" id="sg-stars-bottom-right-medium-sized-fixed-popover-panel-example-id">
<div class="panel-heading">
<h1 class="panel-title">
Fixed popover heading
</h1>
</div>
<div class="collapse in">
<div class="panel-body">
<h2>Easily available content here</h2>
<p>
Molli aute irure dolor in reprehenderit in voluptate velit esse
cupidatat cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat non proident, sunt in culpa qui officia deserunt duis.
</p>
<h3>H3 level heading</h3>
<p>
Molli aute irure dolor in reprehenderit in voluptate velit esse
cupidatat cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat non proident, sunt in culpa qui officia deserunt duis.
</p>
<p>
Molli aute irure dolor in reprehenderit in voluptate velit esse
cupidatat cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat non proident, sunt in culpa qui officia deserunt duis.
</p>
<h3>H3 level heading</h3>
<p>
Molli aute irure dolor in reprehenderit in voluptate velit esse
cupidatat cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat non proident, sunt in culpa qui officia deserunt duis.
</p>
<p>
Molli aute irure dolor in reprehenderit in voluptate velit esse
cupidatat cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat non proident, sunt in culpa qui officia deserunt duis.
</p>
<p>
Molli aute irure dolor in reprehenderit in voluptate velit esse
cupidatat cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat non proident, sunt in culpa qui officia deserunt duis.
</p>
<p>
Molli aute irure dolor in reprehenderit in voluptate velit esse
cupidatat cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat non proident, sunt in culpa qui officia deserunt duis.
</p>
<p>
Molli aute irure dolor in reprehenderit in voluptate velit esse
cupidatat cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat non proident, sunt in culpa qui officia deserunt duis.
</p>
</div>
</div>
</div>
</div>
<!-- -->
<button type="button" class="btn btn-default" data-fixed-popover-launcher="sg-stars-bottom-right-large-sized-fixed-popover-example-id">
Large bottom right
</button>
<div class="stars-large-sized-fixed-popover hidden" data-fixed-popover-placement="bottom right" id="sg-stars-bottom-right-large-sized-fixed-popover-example-id">
<div class="stars-window-controller-bar">
<span class="stars-window-controller-bar-title">Title here</span>
<button type="button" class="stars-window-controller-bar-button stars-window-controller-bar-close-button" data-element-to-hide="sg-stars-bottom-right-large-sized-fixed-popover-example-id">
<span class="glyphicon"></span>
</button>
<button type="button" class="stars-window-controller-bar-button stars-window-controller-bar-minimize-down-vertically-button" data-element-to-hide="sg-stars-bottom-right-large-sized-fixed-popover-panel-example-id">
<span class="stars-icon"></span>
</button>
</div>
<div class="panel" id="sg-stars-bottom-right-large-sized-fixed-popover-panel-example-id">
<div class="panel-heading">
<h1 class="panel-title">
Fixed popover heading
</h1>
</div>
<div class="collapse in">
<div class="panel-body main-panel-body">
<h2>Easily available content here</h2>
<p>
Molli aute irure dolor in reprehenderit in voluptate velit esse
cupidatat cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat non proident, sunt in culpa qui officia deserunt duis.
</p>
<h3>H3 level heading</h3>
<p>
Molli aute irure dolor in reprehenderit in voluptate velit esse
cupidatat cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat non proident, sunt in culpa qui officia deserunt duis.
</p>
<p>
Molli aute irure dolor in reprehenderit in voluptate velit esse
cupidatat cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat non proident, sunt in culpa qui officia deserunt duis.
</p>
<h3>H3 level heading</h3>
<p>
Molli aute irure dolor in reprehenderit in voluptate velit esse
cupidatat cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat non proident, sunt in culpa qui officia deserunt duis.
</p>
<p>
Molli aute irure dolor in reprehenderit in voluptate velit esse
cupidatat cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat non proident, sunt in culpa qui officia deserunt duis.
</p>
<p>
Molli aute irure dolor in reprehenderit in voluptate velit esse
cupidatat cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat non proident, sunt in culpa qui officia deserunt duis.
</p>
<p>
Molli aute irure dolor in reprehenderit in voluptate velit esse
cupidatat cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat non proident, sunt in culpa qui officia deserunt duis.
</p>
<p>
Molli aute irure dolor in reprehenderit in voluptate velit esse
cupidatat cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat non proident, sunt in culpa qui officia deserunt duis.
</p>
<p>
Molli aute irure dolor in reprehenderit in voluptate velit esse
cupidatat cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat non proident, sunt in culpa qui officia deserunt duis.
</p>
<p>
Molli aute irure dolor in reprehenderit in voluptate velit esse
cupidatat cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat non proident, sunt in culpa qui officia deserunt duis.
</p>
</div>
</div>
</div>
</div>
<script>
/* launch */
$('[data-fixed-popover-launcher="sg-stars-bottom-right-small-sized-fixed-popover-example-id"]').on("click", function() {
$("#sg-stars-bottom-right-small-sized-fixed-popover-example-id").toggleClass("hidden");
});
/* close */
$('[data-element-to-hide="sg-stars-bottom-right-small-sized-fixed-popover-example-id"]').on("click", function() {
$("#sg-stars-bottom-right-small-sized-fixed-popover-example-id").toggleClass("hidden");
});
/* minimize */
$('[data-element-to-hide="sg-stars-bottom-right-small-sized-fixed-popover-panel-example-id"]').on("click", function() {
$("#sg-stars-bottom-right-small-sized-fixed-popover-panel-example-id").toggleClass("hidden");
$(this).toggleClass('stars-window-controller-bar-minimize-down-vertically-button stars-window-controller-bar-maximize-up-vertically-button');
});
/* */
/* launch */
$('[data-fixed-popover-launcher="sg-stars-bottom-right-medium-sized-fixed-popover-example-id"]').on("click", function() {
$("#sg-stars-bottom-right-medium-sized-fixed-popover-example-id").toggleClass("hidden");
});
/* close */
$('[data-element-to-hide="sg-stars-bottom-right-medium-sized-fixed-popover-example-id"]').on("click", function() {
$("#sg-stars-bottom-right-medium-sized-fixed-popover-example-id").toggleClass("hidden");
});
/* minimize */
$('[data-element-to-hide="sg-stars-bottom-right-medium-sized-fixed-popover-panel-example-id"]').on("click", function() {
$("#sg-stars-bottom-right-medium-sized-fixed-popover-panel-example-id").toggleClass("hidden");
$(this).toggleClass('stars-window-controller-bar-minimize-down-vertically-button stars-window-controller-bar-maximize-up-vertically-button');
});
/* */
/* launch */
$('[data-fixed-popover-launcher="sg-stars-bottom-right-large-sized-fixed-popover-example-id"]').on("click", function() {
$("#sg-stars-bottom-right-large-sized-fixed-popover-example-id").toggleClass("hidden");
});
/* close */
$('[data-element-to-hide="sg-stars-bottom-right-large-sized-fixed-popover-example-id"]').on("click", function() {
$("#sg-stars-bottom-right-large-sized-fixed-popover-example-id").toggleClass("hidden");
});
/* minimize */
$('[data-element-to-hide="sg-stars-bottom-right-large-sized-fixed-popover-panel-example-id"]').on("click", function() {
$("#sg-stars-bottom-right-large-sized-fixed-popover-panel-example-id").toggleClass("hidden");
$(this).toggleClass('stars-window-controller-bar-minimize-down-vertically-button stars-window-controller-bar-maximize-up-vertically-button');
});
</script>
<ul class="nav nav-pills">
<li>
<a data-target="#">Home</a>
</li>
<li class="active">
<a data-target="#">Profile</a>
</li>
<li>
<a data-target="#">News</a>
</li>
<li>
<a data-target="#">Messages</a>
</li>
<li>
<a data-target="#">About</a>
</li>
<li>
<a data-target="#">Media</a>
</li>
<li>
<a data-target="#">Case Studies</a>
</li>
<li>
<a data-target="#">Contact Us</a>
</li>
</ul><nav class="navbar navbar-default navbar-static-top">
<ul class="nav navbar-nav">
<li class="dropdown active">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Stores and Meal Services <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li class="active"><a href="#">Subpage</a></li>
<li><a href="#">Subpage</a></li>
<li><a href="#">Subpage</a></li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Corporations <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">Subpage</a></li>
<li><a href="#">Subpage</a></li>
<li><a href="#">Subpage</a></li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Store Monitoring <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">Subpage</a></li>
<li><a href="#">Subpage</a></li>
<li><a href="#">Subpage</a></li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Reauthorization <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">Subpage</a></li>
<li><a href="#">Subpage</a></li>
<li><a href="#">Subpage</a></li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Compliance <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">Subpage</a></li>
<li><a href="#">Subpage</a></li>
<li><a href="#">Subpage</a></li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Person <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">Subpage</a></li>
<li><a href="#">Subpage</a></li>
<li><a href="#">Subpage</a></li>
</ul>
</li>
<li class="stars-navbar-nav-item-with-no-dropdown"><a href="#">Searches</a></li>
<li class="stars-navbar-nav-item-with-no-dropdown"><a href="#">My List</a></li>
</ul>
</nav>
<script>
$(".stars-navbar-nav-item-with-no-dropdown > a").on("click", function() {
$(this).parent().siblings().removeClass("active");
$(this).parent().addClass("active");
});
$(".dropdown-menu li a").on("click", function() {
$(this).parent().parent().parent().siblings().removeClass("active");
$(this).parent().parent().parent().addClass("active");
// Remove ON state from all sibling dropdown items, and set ON state to the clicked item.
$(this).parent().siblings().removeClass("active");
$(this).parent().addClass("active");
// Remove the ON state from any first cousin menu items
$(this).parent().parent().parent().siblings().children().children().removeClass("active");
});
</script><nav>
<ul class="pagination">
<li>
<a href="#">
<span class="glyphicon glyphicon-step-backward"></span>
</a>
</li>
<li>
<a href="#">
<span class="glyphicon glyphicon-menu-left"></span>
</a>
</li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li>
<a href="#">
<span class="glyphicon glyphicon-menu-right"></span>
</a>
</li>
<li>
<a href="#">
<span class="glyphicon glyphicon-step-forward"></span>
</a>
</li>
</ul>
</nav>Panels are basic building block containers for most of the user interface.
| Class | Description | Apply to |
|---|---|---|
.main-panel-heading |
Adds extra padding to a panel-heading. Used in main areas. | Apply to div classed with .panel-heading |
.main-panel-body |
Adds extra padding to a panel-body. Used in main areas. | Apply to div classed with .panel-body |
.heading-for-bodiless-panel |
Sets styling of panel-headings that do not have a panel-body. | Apply to div classed with .panel-heading |
.main-panel-heading and .main-panel-body
Panel-body content needs some matching padding too.
Lorem ipsum dolor sit amet, consectetur adipiscing 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
data-toggle="collapse" or just data-toggle="" to a panel-heading to style the panel-heading like this.
.stars-main-header and .stars-main-body namespace, by default are styled differently than panel-headings in sidebars.data-toggle="", with no value, in the panel-heading..heading-for-bodiless-panel
.stars-main-header and .stars-main-body namespace.
.heading-for-bodiless-panel nulls the collapsible heading styles of the panel-heading.<div class="stars-left-nav">
<div class="panel">
<div class="panel-heading">
<h1 class="panel-title"><span class="glyphicon glyphicon-search"></span> Advanced Search</h1>
</div>
<div class="panel-body">
Panel content
</div>
<div class="nested-panel">
<div class="row">
<div class="col-xs-6">
<!-- Attachment: START -->
<div class="panel-group" id="advanced-search-panel-group-id">
<div class="panel">
<div class="panel-heading" data-toggle="collapse" data-parent="#advanced-search-panel-group-id" href="#locate-by-fns-number-collapser-id">
<h1 class="panel-title">
Strict panel example
</h1>
</div>
<div class="collapse in" id="locate-by-fns-number-collapser-id">
<div class="panel-body">
Panel content
</div>
</div>
</div>
<div class="panel">
<div class="panel-heading" data-toggle="collapse" data-parent="#advanced-search-panel-group-id" href="#search-by-specific-criteria-collapser-id">
<h1 class="panel-title">
Strict panel example
</h1>
</div>
<div class="collapse in" id="search-by-specific-criteria-collapser-id">
<div class="panel-body">
Panel content
</div>
</div>
</div>
</div>
<!-- Attachment: END -->
</div>
<div class="col-xs-6">
<!-- Attachment: START -->
<div class="panel-group">
<div class="panel">
<div class="panel-heading" data-toggle="collapse" href="#lenient-panel-example-collapser-id-1">
<h1 class="panel-title">
Lenient panel example
</h1>
</div>
<div class="collapse in" id="lenient-panel-example-collapser-id-1">
<div class="panel-body">
Panel content
</div>
</div>
</div>
<div class="panel">
<div class="panel-heading" data-toggle="collapse" href="#lenient-panel-example-collapser-id-2">
<h1 class="panel-title">
Lenient panel example
</h1>
</div>
<div class="collapse in" id="lenient-panel-example-collapser-id-2">
<div class="panel-body">
Panel content
</div>
</div>
</div>
</div>
<!-- Attachment: END -->
</div>
</div>
<div class="row">
<div class="col-xs-12">
<!-- Attachment: START -->
<div class="panel-group">
<div class="panel">
<div class="panel-heading collapsed" data-toggle="collapse" href="#lenient-panel-example-collapser-id-5">
<h1 class="panel-title">
<strong>Default closed</strong> lenient panel example
</h1>
</div>
<div class="collapse" id="lenient-panel-example-collapser-id-5">
<div class="panel-body">
Panel content
</div>
</div>
</div>
<div class="panel">
<div class="panel-heading collapsed" data-toggle="collapse" href="#lenient-panel-example-collapser-id-6">
<h1 class="panel-title">
<strong>Default closed</strong> lenient panel example
</h1>
</div>
<div class="collapse" id="lenient-panel-example-collapser-id-6">
<div class="panel-body">
Panel content
</div>
</div>
</div>
</div>
<!-- Attachment: END -->
<!-- Attachment: START -->
<div class="panel-group">
<div class="panel">
<div class="panel-heading collapsed" data-toggle="collapse" href="#lenient-panel-example-collapser-id-7">
<h1 class="panel-title">
<strong>Default closed</strong> lenient panel example
</h1>
</div>
<div class="collapse" id="lenient-panel-example-collapser-id-7">
<div class="panel-body">
Panel content
</div>
</div>
</div>
<div class="panel">
<div class="panel-heading collapsed" data-toggle="collapse" href="#lenient-panel-example-collapser-id-8">
<h1 class="panel-title">
<strong>Default closed</strong> lenient panel example
</h1>
</div>
<div class="collapse" id="lenient-panel-example-collapser-id-8">
<div class="panel-body">
Panel content
</div>
</div>
</div>
</div>
<!-- Attachment: END -->
<!-- Attachment: START -->
<div class="panel-group">
<div class="panel">
<div class="panel-heading collapsed" data-toggle="collapse" href="#lenient-panel-example-collapser-id-9">
<h1 class="panel-title">
<strong>Default closed</strong> lenient panel example
</h1>
</div>
<div class="collapse" id="lenient-panel-example-collapser-id-9">
<div class="panel-body">
Panel content
</div>
</div>
</div>
<div class="panel">
<div class="panel-heading collapsed" data-toggle="collapse" href="#lenient-panel-example-collapser-id-10">
<h1 class="panel-title">
<strong>Default closed</strong> lenient panel example
</h1>
</div>
<div class="collapse" id="lenient-panel-example-collapser-id-10">
<div class="panel-body">
Panel content
</div>
</div>
</div>
</div>
<!-- Attachment: END -->
</div>
</div>
</div>
</div>
</div>Add small overlays of content to any element for housing secondary information.
Notice the arrow color on the bottom positioned popovers, the colors automatically change to match the context color.
<div class="stars-basic-grid">
<div class="row stars-min-150px-tall">
<div class="col-xs-6 stars-valign-middle">
<button type="button" class="btn btn-default pull-left" data-toggle="popover stars-small-sized-popover sg-stars-right-side-popover-example" data-placement="right">
Right popover
</button>
<div class="stars-small-sized-popover-container" id="sg-stars-right-side-popover-container-example-id"></div>
</div>
<div class="col-xs-6 stars-valign-middle">
<button type="button" class="btn btn-default pull-right" data-toggle="popover stars-small-sized-popover sg-stars-left-side-popover-example" data-placement="left">
Left popover
</button>
<div class="stars-small-sized-popover-container" id="sg-stars-left-side-popover-container-example-id"></div>
</div>
</div>
<div class="row stars-min-150px-tall">
<div class="col-xs-6 stars-valign-top">
<button type="button" class="btn btn-default center-block" data-toggle="popover stars-small-sized-popover sg-stars-bottom-side-popover-example" data-placement="bottom">
Bottom popover
</button>
<div class="stars-small-sized-popover-container" id="sg-stars-bottom-side-popover-container-example-id"></div>
</div>
<div class="col-xs-6 stars-valign-bottom">
<button type="button" class="btn btn-default center-block" data-toggle="popover stars-small-sized-popover sg-stars-top-side-popover-example" data-placement="top">
Top popover
</button>
<div class="stars-small-sized-popover-container" id="sg-stars-top-side-popover-container-example-id"></div>
</div>
</div>
</div>
<hr>
<div class="stars-basic-grid">
<div class="row stars-min-150px-tall">
<div class="col-xs-12 stars-valign-middle">
<button type="button" class="btn btn-default center-block" data-toggle="popover stars-small-sized-popover sg-stars-small-sized-popover-example" data-placement="top">
Small sized popover
</button>
<div class="stars-small-sized-popover-container" id="sg-stars-small-sized-popover-container-example-id"></div>
</div>
</div>
<div class="row stars-min-150px-tall">
<div class="col-xs-12 stars-valign-middle">
<button type="button" class="btn btn-default center-block" data-toggle="popover stars-medium-sized-popover sg-stars-medium-sized-popover-example" data-placement="top">
Medium sized popover
</button>
<div class="stars-medium-sized-popover-container" id="sg-stars-medium-sized-popover-container-example-id"></div>
</div>
</div>
<div class="row stars-min-150px-tall">
<div class="col-xs-12 stars-valign-middle">
<button type="button" class="btn btn-default center-block" data-toggle="popover stars-large-sized-popover sg-stars-large-sized-popover-example" data-placement="top">
Large sized popover
</button>
<div class="stars-large-sized-popover-container" id="sg-stars-large-sized-popover-container-example-id"></div>
</div>
</div>
</div>
<hr>
<div class="stars-basic-grid stars-remove-basic-grid-borders">
<div class="row">
<div class="col-xs-12">
<div class="stars-basic-grid stars-remove-basic-grid-borders">
<div class="row stars-min-100px-tall">
<div class="col-xs-3 stars-valign-bottom">
<button type="button" class="btn btn-default center-block" data-toggle="popover stars-small-sized-popover sg-stars-popover-primary-example" data-placement="top">
Primary message
</button>
<div class="stars-small-sized-popover-container stars-primary-popover" id="sg-stars-primary-message-popover-container-example-id"></div>
</div>
<div class="col-xs-3 stars-valign-bottom">
<button type="button" class="btn btn-default center-block" data-toggle="popover stars-small-sized-popover sg-stars-popover-attention-example" data-placement="top">
Attention message
</button>
<div class="stars-small-sized-popover-container stars-attention-popover" id="sg-stars-attention-message-popover-container-example-id"></div>
</div>
<div class="col-xs-3 stars-valign-bottom">
<button type="button" class="btn btn-default center-block" data-toggle="popover stars-small-sized-popover sg-stars-popover-success-example" data-placement="top">
Success message
</button>
<div class="stars-small-sized-popover-container stars-success-popover" id="sg-stars-success-message-popover-container-example-id"></div>
</div>
<div class="col-xs-3 stars-valign-bottom">
<button type="button" class="btn btn-default center-block" data-toggle="popover stars-small-sized-popover sg-stars-popover-info-example" data-placement="top">
Info message
</button>
<div class="stars-small-sized-popover-container stars-info-popover" id="sg-stars-info-message-popover-container-example-id"></div>
</div>
<div class="col-xs-3 stars-valign-bottom">
<button type="button" class="btn btn-default center-block" data-toggle="popover stars-small-sized-popover sg-stars-popover-warning-example" data-placement="top">
Warning message
</button>
<div class="stars-small-sized-popover-container stars-warning-popover" id="sg-stars-warning-message-popover-container-example-id"></div>
</div>
<div class="col-xs-3 stars-valign-bottom">
<button type="button" class="btn btn-default center-block" data-toggle="popover stars-small-sized-popover sg-stars-popover-danger-example" data-placement="top">
Danger message
</button>
<div class="stars-small-sized-popover-container stars-danger-popover" id="sg-stars-danger-message-popover-container-example-id"></div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<p id="sg-bg-info" class="bg-info">
Notice the arrow color on the bottom positioned popovers, the colors automatically change to match the context color.
</p>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="stars-basic-grid stars-remove-basic-grid-borders">
<div class="row stars-min-100px-tall">
<div class="col-xs-3 stars-valign-top">
<button type="button" class="btn btn-default center-block" data-toggle="popover stars-small-sized-popover sg-stars-popover-primary-example" data-placement="bottom">
Primary message
</button>
<div class="stars-small-sized-popover-container stars-primary-popover" id="sg-stars-primary-message-popover-container-example-id"></div>
</div>
<div class="col-xs-3 stars-valign-top">
<button type="button" class="btn btn-default center-block" data-toggle="popover stars-small-sized-popover sg-stars-popover-attention-example" data-placement="bottom">
Attention message
</button>
<div class="stars-small-sized-popover-container stars-attention-popover" id="sg-stars-attention-message-popover-container-example-id"></div>
</div>
<div class="col-xs-3 stars-valign-top">
<button type="button" class="btn btn-default center-block" data-toggle="popover stars-small-sized-popover sg-stars-popover-success-example" data-placement="bottom">
Success message
</button>
<div class="stars-small-sized-popover-container stars-success-popover" id="sg-stars-success-message-popover-container-example-id"></div>
</div>
<div class="col-xs-3 stars-valign-top">
<button type="button" class="btn btn-default center-block" data-toggle="popover stars-small-sized-popover sg-stars-popover-info-example" data-placement="bottom">
Info message
</button>
<div class="stars-small-sized-popover-container stars-info-popover" id="sg-stars-info-message-popover-container-example-id"></div>
</div>
<div class="col-xs-3 stars-valign-top">
<button type="button" class="btn btn-default center-block" data-toggle="popover stars-small-sized-popover sg-stars-popover-warning-example" data-placement="bottom">
Warning message
</button>
<div class="stars-small-sized-popover-container stars-warning-popover" id="sg-stars-warning-message-popover-container-example-id"></div>
</div>
<div class="col-xs-3 stars-valign-top">
<button type="button" class="btn btn-default center-block" data-toggle="popover stars-small-sized-popover sg-stars-popover-danger-example" data-placement="bottom">
Danger message
</button>
<div class="stars-small-sized-popover-container stars-danger-popover" id="sg-stars-danger-message-popover-container-example-id"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Example popover content -->
<div class="hidden" id="stars-small-sized-popover-example-id">
<div class="row">
<div class="col-xs-12">
Here's some popover content.
Ullamco laboris nisi ut aliquip ex ea commodo velit ullamco consequat.
Duis aute irure dolor in reprehenderit.
</div>
</div>
<div class="row">
<div class="col-xs-12">
<button type="button" class="btn btn-default">Do it!</button>
<button type="button" class="btn btn-link">or not</button>
</div>
</div>
</div>
<div class="hidden" id="stars-medium-sized-popover-example-id">
<div class="row">
<div class="col-xs-12">
Here's some popover content.
Ullamco laboris nisi ut aliquip ex ea commodo velit ullamco consequat.
Duis aute irure dolor in reprehenderit.
</div>
</div>
<div class="row">
<div class="col-xs-12">
<button type="button" class="btn btn-default">Do it!</button>
<button type="button" class="btn btn-link">or not</button>
</div>
</div>
</div>
<div class="hidden" id="stars-large-sized-popover-example-id">
<div class="row">
<div class="col-xs-12">
Here's some popover content.
Ullamco laboris nisi ut aliquip ex ea commodo velit ullamco consequat.
Duis aute irure dolor in reprehenderit.
Orem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut la.
</div>
</div>
<div class="row">
<div class="col-xs-12">
<button type="button" class="btn btn-default">Do it!</button>
<button type="button" class="btn btn-link">or not</button>
</div>
</div>
</div>
<!-- ************************ -->
<div class="hidden" id="stars-left-side-popover-example-id">
<div class="row">
<div class="col-xs-12">
Here's some popover content.
Ullamco laboris nisi ut aliquip ex ea commodo velit ullamco consequat.
Duis aute irure dolor in reprehenderit.
</div>
</div>
<div class="row">
<div class="col-xs-12">
<button type="button" class="btn btn-default">Do it!</button>
<button type="button" class="btn btn-link">or not</button>
</div>
</div>
</div>
<div class="hidden" id="stars-right-side-popover-example-id">
<div class="row">
<div class="col-xs-12">
Here's some popover content.
Ullamco laboris nisi ut aliquip ex ea commodo velit ullamco consequat.
Duis aute irure dolor in reprehenderit.
</div>
</div>
<div class="row">
<div class="col-xs-12">
<button type="button" class="btn btn-default">Do it!</button>
<button type="button" class="btn btn-link">or not</button>
</div>
</div>
</div>
<div class="hidden" id="stars-top-side-popover-example-id">
<div class="row">
<div class="col-xs-12">
Here's some popover content.
Ullamco laboris nisi ut aliquip ex ea commodo velit ullamco consequat.
Duis aute irure dolor in reprehenderit.
</div>
</div>
<div class="row">
<div class="col-xs-12">
<button type="button" class="btn btn-default">Do it!</button>
<button type="button" class="btn btn-link">or not</button>
</div>
</div>
</div>
<div class="hidden" id="stars-bottom-side-popover-example-id">
<div class="row">
<div class="col-xs-12">
Here's some popover content.
Ullamco laboris nisi ut aliquip ex ea commodo velit ullamco consequat.
Duis aute irure dolor in reprehenderit.
</div>
</div>
<div class="row">
<div class="col-xs-12">
<button type="button" class="btn btn-default">Do it!</button>
<button type="button" class="btn btn-link">or not</button>
</div>
</div>
</div>
<!-- ************************ -->
<div class="hidden" id="stars-popover-primary-example-id">
<div class="row">
<div class="col-xs-12">
Here's some popover content.
Ullamco laboris nisi ut aliquip ex ea commodo velit ullamco consequat.
Duis aute irure dolor in reprehenderit.
</div>
</div>
<div class="row">
<div class="col-xs-12">
<button type="button" class="btn btn-default">Do it!</button>
<button type="button" class="btn btn-link">or not</button>
</div>
</div>
</div>
<div class="hidden" id="stars-popover-attention-example-id">
<div class="row">
<div class="col-xs-12">
Here's some popover content.
Ullamco laboris nisi ut aliquip ex ea commodo velit ullamco consequat.
Duis aute irure dolor in reprehenderit.
</div>
</div>
<div class="row">
<div class="col-xs-12">
<button type="button" class="btn btn-default">Do it!</button>
<button type="button" class="btn btn-link">or not</button>
</div>
</div>
</div>
<div class="hidden" id="stars-popover-success-example-id">
<div class="row">
<div class="col-xs-12">
Here's some popover content.
Ullamco laboris nisi ut aliquip ex ea commodo velit ullamco consequat.
Duis aute irure dolor in reprehenderit.
</div>
</div>
<div class="row">
<div class="col-xs-12">
<button type="button" class="btn btn-default">Do it!</button>
<button type="button" class="btn btn-link">or not</button>
</div>
</div>
</div>
<div class="hidden" id="stars-popover-info-example-id">
<div class="row">
<div class="col-xs-12">
Here's some popover content.
Ullamco laboris nisi ut aliquip ex ea commodo velit ullamco consequat.
Duis aute irure dolor in reprehenderit.
</div>
</div>
<div class="row">
<div class="col-xs-12">
<button type="button" class="btn btn-default">Do it!</button>
<button type="button" class="btn btn-link">or not</button>
</div>
</div>
</div>
<div class="hidden" id="stars-popover-warning-example-id">
<div class="row">
<div class="col-xs-12">
Here's some popover content.
Ullamco laboris nisi ut aliquip ex ea commodo velit ullamco consequat.
Duis aute irure dolor in reprehenderit.
</div>
</div>
<div class="row">
<div class="col-xs-12">
<button type="button" class="btn btn-default">Do it!</button>
<button type="button" class="btn btn-link">or not</button>
</div>
</div>
</div>
<div class="hidden" id="stars-popover-danger-example-id">
<div class="row">
<div class="col-xs-12">
Here's some popover content.
Ullamco laboris nisi ut aliquip ex ea commodo velit ullamco consequat.
Duis aute irure dolor in reprehenderit.
</div>
</div>
<div class="row">
<div class="col-xs-12">
<button type="button" class="btn btn-default">Do it!</button>
<button type="button" class="btn btn-link">or not</button>
</div>
</div>
</div>
<script>
$(function(){
$('[data-toggle="popover stars-small-sized-popover sg-stars-small-sized-popover-example"]').popover({
container: '#sg-stars-small-sized-popover-container-example-id',
html : true,
title : 'Small Sized Popover',
content: function() {
return $('#stars-small-sized-popover-example-id').html();
}
});
});
$(function(){
$('[data-toggle="popover stars-medium-sized-popover sg-stars-medium-sized-popover-example"]').popover({
container: '#sg-stars-medium-sized-popover-container-example-id',
html : true,
title : 'Medium Sized Popover',
content: function() {
return $('#stars-medium-sized-popover-example-id').html();
}
});
});
$(function(){
$('[data-toggle="popover stars-large-sized-popover sg-stars-large-sized-popover-example"]').popover({
container: '#sg-stars-large-sized-popover-container-example-id',
html : true,
title : 'Large Sized Popover',
content: function() {
return $('#stars-large-sized-popover-example-id').html();
}
});
});
/**********/
$(function(){
$('[data-toggle="popover stars-small-sized-popover sg-stars-right-side-popover-example"]').popover({
container: '#sg-stars-right-side-popover-container-example-id',
html : true,
title : 'Right Side Popover',
content: function() {
return $('#stars-right-side-popover-example-id').html();
}
});
});
$(function(){
$('[data-toggle="popover stars-small-sized-popover sg-stars-left-side-popover-example"]').popover({
container: '#sg-stars-left-side-popover-container-example-id',
html : true,
title : 'Left Side Popover',
content: function() {
return $('#stars-left-side-popover-example-id').html();
}
});
});
$(function(){
$('[data-toggle="popover stars-small-sized-popover sg-stars-top-side-popover-example"]').popover({
container: '#sg-stars-top-side-popover-container-example-id',
html : true,
title : 'Top Side Popover',
content: function() {
return $('#stars-top-side-popover-example-id').html();
}
});
});
$(function(){
$('[data-toggle="popover stars-small-sized-popover sg-stars-bottom-side-popover-example"]').popover({
container: '#sg-stars-bottom-side-popover-container-example-id',
html : true,
title : 'Bottom Side Popover',
content: function() {
return $('#stars-bottom-side-popover-example-id').html();
}
});
});
/**********/
$(function(){
$('[data-toggle="popover stars-small-sized-popover sg-stars-popover-primary-example"]').popover({
container: '#sg-stars-primary-message-popover-container-example-id',
html : true,
title : 'Primary Messaged Popover',
content: function() {
return $('#stars-popover-primary-example-id').html();
}
});
});
$(function(){
$('[data-toggle="popover stars-small-sized-popover sg-stars-popover-attention-example"]').popover({
container: '#sg-stars-attention-message-popover-container-example-id',
html : true,
title : 'Attention Messaged Popover',
content: function() {
return $('#stars-popover-attention-example-id').html();
}
});
});
$(function(){
$('[data-toggle="popover stars-small-sized-popover sg-stars-popover-success-example"]').popover({
container: '#sg-stars-success-message-popover-container-example-id',
html : true,
title : 'Success Messaged Popover',
content: function() {
return $('#stars-popover-success-example-id').html();
}
});
});
$(function(){
$('[data-toggle="popover stars-small-sized-popover sg-stars-popover-info-example"]').popover({
container: '#sg-stars-info-message-popover-container-example-id',
html : true,
title : 'Info Messaged Popover',
content: function() {
return $('#stars-popover-info-example-id').html();
}
});
});
$(function(){
$('[data-toggle="popover stars-small-sized-popover sg-stars-popover-warning-example"]').popover({
container: '#sg-stars-warning-message-popover-container-example-id',
html : true,
title : 'Warning Messaged Popover',
content: function() {
return $('#stars-popover-warning-example-id').html();
}
});
});
$(function(){
$('[data-toggle="popover stars-small-sized-popover sg-stars-popover-danger-example"]').popover({
container: '#sg-stars-danger-message-popover-container-example-id',
html : true,
title : 'Danger Messaged Popover',
content: function() {
return $('#stars-popover-danger-example-id').html();
}
});
});
</script>
<button type="button" class="btn btn-default" id="sg-toggle-unbordered-perimeter-stacked-nav-button-id-1">Toggle perimeter border</button>
<br><br>
<ul class="nav nav-pills nav-stacked" id="sg-nav-stacked-example-id-1">
<li>
<a data-target="#">Nav item</a>
</li>
<li class="active">
<a data-target="#">Nav item</a>
</li>
<li>
<a data-target="#">Nav item</a>
</li>
<li>
<a data-target="#">Nav item</a>
</li>
</ul>Use tabs to segment a fixed number of sections.
<ul class="nav nav-tabs">
<li class="active">
<a data-target="#sg-tab-example-section-a" data-toggle="tab">Section A</a>
</li>
<li>
<a data-target="#sg-tab-example-section-b" data-toggle="tab">Section B</a>
</li>
<li>
<a data-target="#sg-tab-example-section-c" data-toggle="tab">Section C</a>
</li>
<li>
<a data-target="#sg-tab-example-section-d" data-toggle="tab">Section D</a>
</li>
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
<div id="sg-tab-content-example" class="tab-content">
<div class="tab-pane active in" id="sg-tab-example-section-a">
Tab content A
</div>
<div class="tab-pane" id="sg-tab-example-section-b">
Tab content B
</div>
<div class="tab-pane" id="sg-tab-example-section-c">
Tab content C
</div>
<div class="tab-pane" id="sg-tab-example-section-d">
Tab content D
</div>
</div>
<script>
function hideSubnav() {
$("#sg-tab-content-example").hide();
}
function showSubnav() {
$("#sg-tab-content-example").show();
}
$(function() {
$('.nav.nav-pills li').click( function() {
$(this).addClass('active').siblings().removeClass('active');
});
});
</script>Helpful tooltip information for applying to buttons and links.
Tight pants next level keffiyeh you probably haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel have a terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan whatever keytar, scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral.
<p>
Tight pants next level keffiyeh <a href="#" data-toggle="tooltip" title="" data-original-title="Default tooltip">you probably</a> haven't
heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable
quinoa 8-bit american apparel <a href="#" data-toggle="tooltip" title="Another tooltip">have a</a> terry richardson vinyl chambray. Beard
stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really
ironic artisan <a href="#" data-toggle="tooltip" title="" data-original-title="Another one here too">whatever keytar</a>, scenester
farm-to-table banksy Austin <a href="#" data-toggle="tooltip" title="" data-original-title="The last tip!">twitter handle</a> freegan
cred raw denim single-origin coffee viral.
</p>
<script>
$(function () {
$('[data-toggle="tooltip"]').tooltip();
})
</script>
<style>
a[data-toggle="tooltip"] {
white-space:nowrap;
}
</style>Window controller bars are used for controlling windows.
.pull-left to left align buttons inside of a window controller bar.event.stopPropagation();
on the event handler of the nested buttons to allow successful propagation of both the button's events and the bar's events.
.stars-clickable-window-controller-bar modifier adds an hover state to the entire bar..stars-small-window-controller-bar variant<div class="stars-window-controller-bar">
<span class="stars-window-controller-bar-title">Title optional</span>
<button type="button" class="stars-window-controller-bar-button stars-window-controller-bar-close-button">
<span class="glyphicon"></span>
</button>
<button type="button" class="stars-window-controller-bar-button stars-window-controller-bar-minimize-left-horizontally-button">
<span class="stars-icon"></span>
</button>
<button type="button" class="stars-window-controller-bar-button stars-window-controller-bar-maximize-right-horizontally-button">
<span class="stars-icon"></span>
</button>
<button type="button" class="stars-window-controller-bar-button stars-window-controller-bar-minimize-right-horizontally-button">
<span class="stars-icon"></span>
</button>
<button type="button" class="stars-window-controller-bar-button stars-window-controller-bar-maximize-left-horizontally-button">
<span class="stars-icon"></span>
</button>
<button type="button" class="stars-window-controller-bar-button stars-window-controller-bar-minimize-down-vertically-button">
<span class="stars-icon"></span>
</button>
<button type="button" class="stars-window-controller-bar-button stars-window-controller-bar-maximize-up-vertically-button">
<span class="stars-icon"></span>
</button>
<button type="button" class="stars-window-controller-bar-button stars-window-controller-bar-minimize-up-vertically-button">
<span class="stars-icon"></span>
</button>
<button type="button" class="stars-window-controller-bar-button stars-window-controller-bar-maximize-down-vertically-button">
<span class="stars-icon"></span>
</button>
</div>
<h3><code class="sg-inline-code" id="sg-inline-code">.stars-<span id="sg-modifier-text-color">clickable</span>-window-controller-bar</code> modifier adds an hover state to the entire bar.</h3>
<br>
<div class="stars-window-controller-bar stars-clickable-window-controller-bar">
<span class="stars-window-controller-bar-title">Title optional</span>
<button type="button" class="stars-window-controller-bar-button stars-window-controller-bar-minimize-left-horizontally-button">
<span class="stars-icon"></span>
</button>
</div>
<hr>
<h3><code class="sg-inline-code" id="sg-inline-code">.stars-<em>small</em>-window-controller-bar</code> variant</h3>
<br>
<div class="stars-small-window-controller-bar">
<span class="stars-small-window-controller-bar-title">Title optional</span>
<button type="button" class="stars-small-window-controller-bar-button stars-small-window-controller-bar-close-button">
<span class="glyphicon"></span>
</button>
<button type="button" class="stars-small-window-controller-bar-button stars-small-window-controller-bar-minimize-left-horizontally-button">
<span class="stars-icon"></span>
</button>
<button type="button" class="stars-small-window-controller-bar-button stars-small-window-controller-bar-maximize-right-horizontally-button">
<span class="stars-icon"></span>
</button>
<button type="button" class="stars-small-window-controller-bar-button stars-small-window-controller-bar-minimize-right-horizontally-button">
<span class="stars-icon"></span>
</button>
<button type="button" class="stars-small-window-controller-bar-button stars-small-window-controller-bar-maximize-left-horizontally-button">
<span class="stars-icon"></span>
</button>
<button type="button" class="stars-small-window-controller-bar-button stars-small-window-controller-bar-minimize-down-vertically-button">
<span class="stars-icon"></span>
</button>
<button type="button" class="stars-small-window-controller-bar-button stars-small-window-controller-bar-maximize-up-vertically-button">
<span class="stars-icon"></span>
</button>
<button type="button" class="stars-small-window-controller-bar-button stars-small-window-controller-bar-minimize-up-vertically-button">
<span class="stars-icon"></span>
</button>
<button type="button" class="stars-small-window-controller-bar-button stars-small-window-controller-bar-maximize-down-vertically-button">
<span class="stars-icon"></span>
</button>
</div>
Headings and body copy used in main areas.
Here's a leading paragrph that stands out from the rest of the body copy. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing 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.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numq
Dolor sit amet, consectetur adipiscing 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.
Consectetur adipiscing 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.
Totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt.
Architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui.
Voluptatem sequi nesciunt eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia sit aspernatur aut odit aut fugit.
Luptatem sequi eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Enim ipsam voluptatem quia sit aut odit aut aspernatur fugit.
Nesciunt oluptatem sequi eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Enim ipsam voluptatem quia sit aut odit aut fugit aspernatur.
Watch your line length: Anything wider than 640px for a single-column of text, set at our font size, will make reading uncomfortable.
<div class="stars-main-body" id="sg-main-document-text-flow-main-body">
<div class="panel">
<div class="panel-body main-panel-body">
<h1>H1 level heading with lead copy</h1>
<p class="lead">
Here's a leading paragrph that stands out from the rest of the body copy.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing 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.
</p>
<p>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas
sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit
amet, consectetur, adipisci velit, sed quia non numq
</p>
<h1>H1 with subheading <small>Here's your subheading</small></h1>
<p>
Dolor sit amet, consectetur adipiscing 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.
</p>
<h1>H1 with <em>no</em> subheading</h1>
<p>
Consectetur adipiscing 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.
</p>
<h2>H2 level heading</h2>
<p>
Totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas
sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
voluptatem sequi nesciunt.
</p>
<h3>H3 level heading</h3>
<p>
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia
consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Totam rem aperiam,
eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt.
</p>
<hr>
<h1>H1 with no content of its own</h1>
<h2>H2 level heading</h2>
<p>
Architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui.
</p>
<h2>H2 with no content of its own</h2>
<h3>H3 level heading</h3>
<p>
Voluptatem sequi nesciunt eaque ipsa quae ab illo inventore veritatis et quasi
architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
sit aspernatur aut odit aut fugit.
</p>
<hr>
<h3>H3 level heading for a list <em>followed by a paragraph</em></h3>
<ul>
<li>Lorem ipsum dolor sit amet nesciunt olupt atem explicabo vitae dii atae nim ipsam volup tatem qui vitae dice ipsam voluptatem quia arch itecto tatem volup sit aspernatur aut odit aut.</li>
<li>Sequi nesciunt eaque ipsa quae ui vitae dice ipsam voluptatem quia arch itec.</li>
<li>
Illo inventore ve quae ui vitae dice ipsam voluptatem quia arch itec ritatis et
<ul>
<li>Beatae vitae quae ui vitae dice ipsam voluptatem quia arch itec dicta sunt</li>
<li>Nesciunt eaque ipsa quae ui vitae dice ipsam voluptatem quia arch quae</li>
<li>Quae equi nesciunt eaque ip quae ui vitae dice ipsam voluptatem quia arc</li>
</ul>
</li>
<li>Eaque vitae sun dic quae ui vitae dice ipsam voluptatem quia arch itec ta</li>
<li>Totam rem aperiam, sunt to beatae vitae dicta sunt explica eatae eaque ipsa</li>
</ul>
<p>
Luptatem sequi eaque ipsa quae ab illo inventore veritatis et quasi
architecto beatae vitae dicta sunt explicabo. Enim ipsam voluptatem quia
sit aut odit aut aspernatur fugit.
</p>
<h3>H3 level heading for a paragraph <em>followed by a list</em></h3>
<p>
Nesciunt oluptatem sequi eaque ipsa quae ab illo inventore veritatis et quasi
architecto beatae vitae dicta sunt explicabo. Enim ipsam voluptatem quia
sit aut odit aut fugit aspernatur.
</p>
<ul>
<li>Lorem ipsum dolor sit amet loro</li>
<li>Sequi nesciunt eaque ipsa quae</li>
<li>
Illo inventore veritatis et quasi
<ul>
<li>Beatae vitae dicta sunt te io</li>
<li>Nesciunt eaque ipsa quae</li>
<li>Quae equi nesciunt eaque ipsa</li>
</ul>
</li>
<li>Eaque vitae sun dicta, sono io</li>
<li>Totam rem aperiam, eaque ipsa</li>
</ul>
<hr>
<ul>
<li>Lorem ipsum dolor sit amet loro</li>
<li>Sequi nesciunt eaque ipsa quae</li>
<li>Eaque vitae sun dicta, sono io</li>
</ul>
<h1>H1 heading for a list, directly after a list</h1>
<ul>
<li>Lorem ipsum dolor sit amet loro</li>
<li>Sequi nesciunt eaque ipsa quae</li>
<li>Eaque vitae sun dicta, sono io</li>
</ul>
<h2>H2 heading for a list, directly after a list</h2>
<ul>
<li>Lorem ipsum dolor sit amet loro</li>
<li>Sequi nesciunt eaque ipsa quae</li>
<li>Eaque vitae sun dicta, sono io</li>
</ul>
<h3>H3 heading for a list, directly after a list</h3>
<ul>
<li>Lorem ipsum dolor sit amet loro</li>
<li>Sequi nesciunt eaque ipsa quae</li>
<li>Eaque vitae sun dicta, sono io</li>
</ul>
<hr>
<h3>H3 heading for a description list</h3>
<dl>
<dt>Felis euismod sempe</dt>
<dd>A description list is perfect for defining terms. Ecati cupiditate non provident, similique sunt.</dd>
<dt>Euismod</dt>
<dd>Vestibulum id ligula dicta portame porta ipsum vitae dolor nesciunt. Sem malesuada magna mole euis eget felis euis mod semper equi nesciunt eaque ipsa queget lacinia odio sem nec elit.</dd>
<dd>Donec id elit non mi porta gravida at eget metus. Saepe eveniet ut et voluptates repudiandae sint.</dd>
<dt>Malesuada porta</dt>
<dd>Etiam porta sem malesuada ta gravida at eget metu eveniet ut et volup magna mollis euismod.</dd>
</dl>
</div>
</div>
<p id="sg-bg-info" class="bg-info">
<strong>Watch your line length:</strong> Anything wider than 640px for a single-column of text, set at our font size, will make reading uncomfortable.
</p>
</div>
Use these classes to help modify your layouts, they'll proof helpful if in a bind.
They all use !important, to generally, guarantee precedence.
| Class | Description | Apply to | By Bootstrap |
|---|---|---|---|
.stars-expand-parent-of-float |
Prevents parent of floated elements from collapsing. | Apply to an empty div. The div should be located after the last floated element. | |
.stars-valign-top | .stars-valign-middle | .stars-valign-bottom |
Vertically aligns content inside of a display type table-cell. | Apply to the col-* element of a basic grid or apply to any element of display type table-cell. | |
.stars-top-valign-floats | .stars-middle-valign-floats | .stars-middle-valign-floats |
Vertically aligns content inside of a floated element. | Nest the desired content inside of its own div and apply one of the classes to the div. | |
.stars-remove-padding |
Removes all padding from an element. | Apply to any element. | |
.stars-remove-margin |
Removes all margins from an element. | Apply to any element. | |
.stars-display-block |
Sets the display to type block. | Apply to any element. | |
.stars-no-text-decoration |
Removes any text decoration. | Apply to any text element. | |
.stars-display-table | .stars-display-table-row | .stars-display-table-cell |
Sets display type to the correlating parts of a table. | Apply to any element. | |
.stars-width-100-percent |
Sets width to 100 percent. | Apply to any element. | |
.stars-height-100-percent |
Sets height to 100 percent. | Apply to any element. | |
.pull-left | .pull-right |
Floats an element left or right. | Apply to an element that needs aligning. | |
.center-block |
Sets an element to display: block and centers via margin. | Apply to an element that needs centering. | |
.show | .hidden |
Forces an element to be shown or hidden. | Apply to an element that needs showing or hiding. | |
.invisible |
Forces an element to be invisible, though the space it occupies is not affected. | Apply to an element that needs to be invisible. |