Panels

Stacking options

Use to create various container types. A panel can be broken up into a .panel, .panel-heading, .panel-title, panel-body and .panel-footer. Only the .panel is required. All the rest are optional.

Code

Padded content:

<div class="panel panel-default">
	<div class="panel-body">
		<p>Content</p>
	</div>
</div>

Full-width content:

<div class="panel panel-default">
	<table class="table">
		<caption class="wb-inv">Caption text</caption>
		<thead>
			<tr>
				<th>Table header</th>
				<th>Table header</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>Table data</td>
				<td>Table data</td>
			</tr>
			<tr>
				<td>Table data</td>
				<td>Table data</td>
			</tr>
		</tbody>
	</table>
</div>

Padded plus full-width content:

<div class="panel panel-default">
	<div class="panel-body">
		<p>Content</p>
	</div>
	<table class="table">
		<caption class="wb-inv">
			Caption  text
		</caption>
		<thead>
			<tr>
				<th>Table header</th>
				<th>Table header</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>Table data</td>
				<td>Table data</td>
			</tr>
			<tr>
				<td>Table data</td>
				<td>Table data</td>
			</tr>
		</tbody>
	</table>
</div>

Add a heading and/or footer:

<div class="panel panel-default">
	<header class="panel-heading">
		<h3 class="panel-title">Panel title</h3>
	</header>
	<div class="panel-body">
		<p>Content</p>
	</div>
	<footer class="panel-footer">Panel footer</footer>
</div>

Panel appearences

Default panel

Use to spotlight general information/actions within a self-contained box.

Panel title

Panel content

Primary panel

Use to spotlight general information/actions within a self-contained box.

Panel title

Panel content

Success panel

Use to spotlight correct information/actions within a self-contained box.

Panel title

Panel content

Info panel

Use to spotlight specialized information/actions within a self-contained box.

Panel title

Panel content

Warning panel

Use to spotlight warning information/actions within a self-contained box.

Panel title

Panel content

Danger panel

Use to spotlight dangerous information/actions within a self-contained box.

Panel title

Panel content

Code

Default panel

Use to spotlight general information/actions within a self-contained box.

<section class="panel panel-default mrgn-bttm-0">
	<header class="panel-heading">
		<h3 class="panel-title">Panel title</h3>
	</header>
	<div class="panel-body">
		<p>Panel content</p>
	</div>
</section>

Primary panel

Use to spotlight general information/actions within a self-contained box.

<section class="panel panel-primary mrgn-bttm-0">
	<header class="panel-heading">
		<h3 class="panel-title">Panel title</h3>
	</header>
	<div class="panel-body">
		<p>Panel content</p>
	</div>
</section>

Success panel

Use to spotlight correct information/actions within a self-contained box.

<section class="panel panel-success mrgn-bttm-0">
	<header class="panel-heading">
		<h3 class="panel-title">Panel title</h3>
	</header>
	<div class="panel-body">
		<p>Panel content</p>
	</div>
</section>

Info panel

Use to spotlight specialized information/actions within a self-contained box.

<section class="panel panel-info mrgn-bttm-0">
	<header class="panel-heading">
		<h3 class="panel-title">Panel title</h3>
	</header>
	<div class="panel-body">
		<p>Panel content</p>
	</div>
</section>

Warning panel

Use to spotlight warning information/actions within a self-contained box.

<section class="panel panel-warning mrgn-bttm-0">
	<header class="panel-heading">
		<h3 class="panel-title">Panel title</h3>
	</header>
	<div class="panel-body">
		<p>Panel content</p>
	</div>
</section>

Danger panel

Use to spotlight dangerous information/actions within a self-contained box.

<section class="panel panel-danger mrgn-bttm-0">
	<header class="panel-heading">
		<h3 class="panel-title">Panel title</h3>
	</header>
	<div class="panel-body">
		<p>Panel content</p>
	</div>
</section>

Reference

Web Experience Toolkit Style Guide - Panels