wiki:plugin:bootswrapper:panel

Panels

Basic panel example


<panel type="default">Basic panel example</panel>

Panel title

Panel content


<panel type="default" title="Panel title">
Panel content
</panel>

Panel title

Panel subtitle

Panel content


<panel type="default" title="Panel title" subtitle="Panel subtitle">
Panel content
</panel>

Like other components, easily make a panel more meaningful to a particular context by adding any of the contextual state classes.

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content


<panel type="primary" title="Panel title">Panel content</panel>
<panel type="success" title="Panel title">Panel content</panel>
<panel type="info" title="Panel title">Panel content</panel>
<panel type="warning" title="Panel title">Panel content</panel>
<panel type="danger" title="Panel title">Panel content</panel>

Add any non-bordered table within a panel for a seamless design. If there is a no-body attribute, we add an extra border to the top of the table for separation.

Panel title

Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter


<panel type="default" title="Panel title" no-body="true">
<panel-body>Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.</panel-body>
^ # ^ First Name ^ Last Name ^ Username ^
^ 1 | Mark       | Otto	     | @mdo     |
^ 2 | Jacob      | Thornton  | @fat     |
^ 3 | Larry      | the Bird  | @twitter |
</panel>

If there is no panel body, the component moves from panel header to table without interruption.

Panel title

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter


<panel type="default" title="Panel title" no-body="true">
^ # ^ First Name ^ Last Name ^ Username ^
^ 1 | Mark       | Otto	     | @mdo     |
^ 2 | Jacob      | Thornton  | @fat     |
^ 3 | Larry      | the Bird  | @twitter |
</panel>

Easily include full-width list groups within any panel.

Panel title

Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.
  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros


<panel type="default" title="Panel title" no-body="true">
<panel-body>Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.</panel-body>
<list-group>
  * Cras justo odio
  * Dapibus ac facilisis in
  * Morbi leo risus
  * Porta ac consectetur ac
  * Vestibulum at eros
</list-group></panel>

Panel title

Panel subtitle

Panel content


<panel type="default" title="Panel title" subtitle="Panel subtitle" icon="glyphicon glyphicon-home">
Panel content
</panel>
Attribute Default Value Allowed Values Description
type default default, primary, success, info, warning, danger Type of panel
title optional Title of panel
subtitle optional Subtitle of panel
icon optional Font icon class (eg. Glyphicon or Font-Awesome)
no-body optional Don't add a panel body. Useful to add other particular tags (or tables) inside a panels
  • wiki/plugin/bootswrapper/panel.txt
  • Last modified: 8 years ago
  • by Giuseppe Di Terlizzi