Panel

A representation of the old bootstrap 3 panels.

  1. Default
  2. Primary
  3. Secondary
  4. Success
  5. Danger
  6. Warning
  7. Info
  8. Light
  9. Dark

Default

Header
This is your normal body of the panel
An example panel footer

Code:

<div class="card">
    <div class="card-header">Header</div>
    <div class="card-body">
        This is your normal body of the panel
    </div>
    <div class="card-footer">
        An example panel footer
    </div>
</div>

Primary

Header
This is your normal body of the panel
An example panel footer

Code:

<div class="card border-primary">
    <div class="card-header bg-primary text-white">Header</div>
    <div class="card-body">
        This is your normal body of the panel
    </div>
    <div class="card-footer">
        An example panel footer
    </div>
</div>

Secondary

Header
This is your normal body of the panel
An example panel footer

Code:

<div class="card border-secondary">
    <div class="card-header bg-secondary text-white">Header</div>
    <div class="card-body">
        This is your normal body of the panel
    </div>
    <div class="card-footer">
        An example panel footer
    </div>
</div>

Success

Header
This is your normal body of the panel
An example panel footer

Code:

<div class="card border-success">
    <div class="card-header bg-success text-white">Header</div>
    <div class="card-body">
        This is your normal body of the panel
    </div>
    <div class="card-footer">
        An example panel footer
    </div>
</div>

Danger

Header
This is your normal body of the panel
An example panel footer

Code:

<div class="card border-danger">
    <div class="card-header bg-danger text-white">Header</div>
    <div class="card-body">
        This is your normal body of the panel
    </div>
    <div class="card-footer">
        An example panel footer
    </div>
</div>

Warning

Header
This is your normal body of the panel
An example panel footer

Code:

<div class="card border-warning">
    <div class="card-header bg-warning">Header</div>
    <div class="card-body">
        This is your normal body of the panel
    </div>
    <div class="card-footer">
        An example panel footer
    </div>
</div>

Info

Header
This is your normal body of the panel
An example panel footer

Code:

<div class="card border-info">
    <div class="card-header bg-info text-white">Header</div>
    <div class="card-body">
        This is your normal body of the panel
    </div>
    <div class="card-footer">
        An example panel footer
    </div>
</div>

Light

Header
This is your normal body of the panel
An example panel footer

Code:

<div class="card">
    <div class="card-header bg-light">Header</div>
    <div class="card-body">
        This is your normal body of the panel
    </div>
    <div class="card-footer">
        An example panel footer
    </div>
</div>

Dark

Header
This is your normal body of the panel
An example panel footer

Code:

<div class="card border-dark">
    <div class="card-header bg-dark text-white">Header</div>
    <div class="card-body">
        This is your normal body of the panel
    </div>
    <div class="card-footer">
        An example panel footer
    </div>
</div>