Singapore | May 2-5, 2018

  AOSpine

While not always necessary, sometimes you need to put your DOM in a box. For those situations, try the panel component.

Basic example

By default, all the .panel does is apply some basic border and padding to contain some content.

Basic panel example
Copy 
 class="panel panel-default">
                                   class="panel-body">
                                        Basic panel example

Panel with heading

Easily add a heading container to your panel with .panel-heading. You may also include any

-
with a .panel-title class to add a pre-styled heading.

For proper link coloring, be sure to place links in headings within .panel-title.

Panel heading without title
Panel content

Panel title

Panel content
Copy 
 class="panel panel-default">
                                   class="panel-heading">Panel heading without title
class="panel-body"> Panel content

class="panel panel-default"> class="panel-heading"> class="panel-title">Panel title
class="panel-body"> Panel content

Wrap buttons or secondary text in .panel-footer. Note that panel footers do not inherit colors and borders when using contextual variations as they are not meant to be in the foreground.

Panel content
Panel footer
Copy 
 class="panel panel-default">
                                   class="panel-body">
                                        Panel content
class="panel-footer">Panel footer

Contextual alternatives

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
Copy 
 class="panel panel-primary">...
class="panel panel-success">... class="panel panel-info">... class="panel panel-warning">... class="panel panel-danger">...

With tables

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

Panel heading

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
Copy 
 class="panel panel-default">
                                  
                                   class="panel-heading">Panel heading
class="panel-body">

...

 class="table"> ...

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

Panel heading
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
Copy 
 class="panel panel-default">
                                  
                                   class="panel-heading">Panel heading
class="table"> ...

With list groups

Easily include full-width list groups within any panel.

Panel heading

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.

Copy 
 class="panel panel-default">
                                  
                                   class="panel-heading">Panel heading
class="panel-body">

...

 class="list-group"> class="list-group-item">Cras justo odio class="list-group-item">Dapibus ac facilisis in class="list-group-item">Morbi leo risus class="list-group-item">Porta ac consectetur ac class="list-group-item">Vestibulum at eros
Get A Free Quote / Need a Help ? Contact Us