Panel
Style  

Basic

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. 
<div class="panel">
  <div class="panel-body">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
  </div>
</div>
    Copy

With title

Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Title
Support panel subtitle
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. 
<div class="panel">
  <div class="panel-title">Title</div>
  <div class="panel-body">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
  </div>
</div>

<div class="panel">
  <div class="panel-title">Title</div>
  <small class="panel-subtitle text-muted">Support panel subtitle</small>
  <div class="panel-body">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
  </div>
</div>
    Copy

With image

100%x180
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Title
100%x180
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Last updated 3 mins ago
100%x180
100%x180
Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Title
Support panel subtitle 100%x180
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Title
Support panel subtitle
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
100%x180 
<div class="row">
  <div class="col-sm-6">
    <div class="panel">
      <img class="panel-img-top" data-src="holder.js/100px180" alt="Panel image cap">
      <div class="panel-body">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
      </div>
    </div>
    <div class="panel">
      <div class="panel-title">Title</div>
      <img class="panel-img" data-src="holder.js/100px180" alt="Panel image cap">
      <div class="panel-body">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
      </div>
    </div>
    <div class="panel">
      <div class="panel-title">Title</div>
      <div class="panel-body">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
        <small class="text-muted">Last updated 3 mins ago</small>
      </div>
      <img class="panel-img-bottom" data-src="holder.js/100px180" alt="Panel image cap">
    </div>
  </div>
  <div class="col-sm-6">
    <div class="panel">
      <img class="panel-img-top" data-src="holder.js/100px180" alt="Panel image cap">
      <div class="panel-title">Title</div>
      <div class="panel-body">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
      </div>
    </div>
    <div class="panel">
      <div class="panel-title">Title</div>
      <small class="panel-subtitle text-muted">Support panel subtitle</small>
      <img class="panel-img" data-src="holder.js/100px180" alt="Panel image cap">
      <div class="panel-body">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
      </div>
    </div>
    <div class="panel">
      <div class="panel-title">Title</div>
      <small class="panel-subtitle text-muted">Support panel subtitle</small>
      <div class="panel-body">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
      </div>
      <img class="panel-img-bottom" data-src="holder.js/100px180" alt="Panel image cap">
    </div>
  </div>
</div>
    Copy

With header and footer

Panel header
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Panel footer
<div class="panel">
  <div class="panel-heading">
    <span class="panel-title">Panel header</span>
  </div>
  <div class="panel-body">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
  </div>
  <div class="panel-footer">Panel footer</div>
</div>
    Copy

Title with Icon

Title icon
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. 
<div class="panel">
  <div class="panel-heading">
    <span class="panel-title"><i class="panel-title-icon fa fa-flask"></i>Title icon</span>
  </div>
  <div class="panel-body">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
  </div>
</div>
    Copy

With list group

Easily include full-width list groups within any panel.

List group
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. 
<div class="panel">
  <div class="panel-heading">
    <span class="panel-title">List group</span>
  </div>
  <div class="panel-body">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
  </div>
  <ul class="list-group">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
  </ul>
</div>
    Copy

With table

Add any non-bordered .table within a panel for a seamless design.

Table
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<div class="panel">
  <div class="panel-heading">
    <span class="panel-title">Table</span>
  </div>
  <table class="table">
    <thead>
      <tr>
        <th>#</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Username</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Mark</td>
        <td>Otto</td>
        <td>@mdo</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>@fat</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Larry</td>
        <td>the Bird</td>
        <td>@twitter</td>
      </tr>
    </tbody>
  </table>
</div>
    Copy

With tabs

Create a panel with tabs by appending a .nav-tabs element to the .panel-heading.

Tabs
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. 
<div class="panel">
  <div class="panel-heading">
    <span class="panel-title">Tabs</span>
    <ul class="nav nav-tabs nav-xs">
      <li class="active"><a href="#" data-toggle="tab">Home</a></li>
      <li><a href="#" data-toggle="tab">Profile</a></li>
      <li><a href="#" data-toggle="tab">More</a></li>
    </ul>
  </div>
  <div class="panel-body">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
  </div>
</div>
    Copy

With buttons

Create a panel with buttons by wrapping .btns or .btn-groups within the .panel-heading-controls element.

Buttons
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. 
<div class="panel">
  <div class="panel-heading">
    <span class="panel-title">Buttons</span>
    <div class="panel-heading-controls">
      <button class="btn btn-xs btn-success btn-outline btn-outline-colorless"><i class="fa fa-check"></i> Apply</button>
      <button class="btn btn-xs btn-danger btn-outline"><i class="fa fa-close"></i></button>
      <div class="btn-group btn-group-xs">
        <button class="btn btn-info dropdown-toggle" type="button" data-toggle="dropdown"><i class="fa fa-cog"></i></button>
        <ul class="dropdown-menu dropdown-menu-right">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
        </ul>
      </div>
    </div>
  </div>
  <div class="panel-body">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
  </div>
</div>
    Copy

With labels

Create a panel with labels by wrapping .label within the .panel-heading-controls element.

Labels
Tag Label Badge
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. 
<div class="panel">
  <div class="panel-heading">
    <span class="panel-title">Labels</span>
    <div class="panel-heading-controls">
      <span class="label label-tag label-success">Tag</span>
      <span class="label label-danger">Label</span>
      <span class="label label-pill label-info">Badge</span>
    </div>
  </div>
  <div class="panel-body">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
  </div>
</div>
    Copy

With alerts

Create a panel with alerts by adding the .panel-alert class to an .alert element and appending it to the .panel.

Alerts
Well done! You successfully read this important alert message.
Heads up! This alert needs your attention, but it's not super important.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. 
<div class="panel">
  <div class="panel-heading">
    <span class="panel-title">Alerts</span>
  </div>
  <div class="px-block-alerts">
    <div class="alert alert-success alert-dark">
      <button type="button" class="close" data-dismiss="alert">×</button>
      <strong>Well done!</strong> You successfully read this important alert message.
    </div>
    <div class="alert alert-info">
      <button type="button" class="close" data-dismiss="alert">×</button>
      <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
    </div>
  </div>
  <div class="panel-body">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
  </div>
</div>
    Copy

With pagination

Create a panel with pagination by wrapping a .pagination element within the .panel-heading-controls element.

Pagination
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. 
<div class="panel">
  <div class="panel-heading">
    <span class="panel-title">Pagination</span>
    <div class="panel-heading-controls">
      <ul class="pagination pagination-xs">
        <li><a href="#">«</a></li>
        <li class="active"><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">»</a></li>
      </ul>
    </div>
  </div>
  <div class="panel-body">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
  </div>
</div>
    Copy

With pager

Create a panel with pager by wrapping a .pager element within the .panel-heading-controls element.

Pager
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. 
<div class="panel">
  <div class="panel-heading">
    <span class="panel-title">Pager</span>
    <div class="panel-heading-controls">
      <ul class="pager pager-xs">
        <li class="disabled"><a href="#">← Older</a></li>
        <li><a href="#">Newer →</a></li>
      </ul>
    </div>
  </div>
  <div class="panel-body">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
  </div>
</div>
    Copy

With progress

Create a panel with progress by wrapping a .progress element within the .panel-heading-controls element.

Progress
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. 
<div class="panel">
  <div class="panel-heading">
    <span class="panel-title">Progress</span>
    <div class="panel-heading-controls" style="width: 30%; max-width: 140px;">
      <div class="progress progress-striped active" style="width: 100%">
        <div class="progress-bar progress-bar-danger" style="width: 60%;"></div>
      </div>
    </div>
  </div>
  <div class="panel-body">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
  </div>
</div>
    Copy

With text

With text
Just some text with link  |  
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. 
<div class="panel">
  <div class="panel-heading">
    <span class="panel-title">With text</span>
    <div class="panel-heading-controls">
      <span class="panel-heading-text"><em>Just some text with <a href="#">link</a></em>&nbsp;&nbsp;|&nbsp;&nbsp;</span>
      <button class="btn btn-xs">Button</button>
    </div>
  </div>
  <div class="panel-body">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
  </div>
</div>
    Copy

With icon

Create a panel with an icon by appending a .panel-heading-icon element to the .panel-heading.

Icon
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. 
<div class="panel">
  <div class="panel-heading">
    <span class="panel-title">Icon</span>
    <div class="panel-heading-icon"><i class="fa fa-inbox"></i></div>
  </div>
  <div class="panel-body">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
  </div>
</div>
    Copy

With input group

Create a panel with an input group by wrapping an .input-group element within the .panel-heading-controls element.

Input group
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. 
<div class="panel">
  <div class="panel-heading">
    <span class="panel-title">Input group</span>
    <div class="panel-heading-controls col-sm-4">
      <form action>
        <div class="input-group input-group-sm">
          <input type="text" class="form-control" placeholder="Search..." name="s">
          <span class="input-group-btn">
            <button class="btn" type="submit">
              <span class="fa fa-search"></span>
            </button>
          </span>
        </div>
      </form>
    </div>
  </div>
  <div class="panel-body">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
  </div>
</div>
    Copy

With input

Create a panel with an input by wrapping a .form-control element within the .panel-heading-controls element.

Input
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. 
<div class="panel">
  <div class="panel-heading">
    <span class="panel-title">Input</span>
    <div class="panel-heading-controls">
      <select class="form-control input-sm custom-select">
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
      </select>
    </div>
  </div>
  <div class="panel-body">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
  </div>
</div>
    Copy

With switcher

Create panel with a switcher by wrapping a .switcher element within the .panel-heading-controls element.

Switcher
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. 
<div class="panel">
  <div class="panel-heading">
    <span class="panel-title">Switcher</span>
    <div class="panel-heading-controls">
      <label for="panel-with-switcher" class="switcher switcher-rounded switcher-sm switcher-primary switcher-blank">
        <input type="checkbox" id="panel-with-switcher" checked>
        <div class="switcher-indicator">
          <div class="switcher-yes">ON</div>
          <div class="switcher-no">OFF</div>
        </div>
      </label>
    </div>
  </div>
  <div class="panel-body">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
  </div>
</div>
    Copy

With wizard

Create a panel with a wizard by adding the .panel-wizard class to a .wizard element and appending it to the .panel.

Wizard
  • 1 Step 1 Description
  • 2 Step 2 Description
  • 3 Step 3 Description
  • 4 Finish Description
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. 
<div class="panel">
  <div class="panel-heading">
    <span class="panel-title">Wizard</span>
  </div>
  <div class="wizard panel-wizard" id="wizard-panel">
    <div class="wizard-wrapper">
      <ul class="wizard-steps">
        <li data-target="#wizard-panel-step1" class="completed">
          <span class="wizard-step-number">1</span>
          <span class="wizard-step-complete"><i class="fa fa-check"></i></span>
          <span class="wizard-step-caption">
            Step 1
            <span class="wizard-step-description">Description</span>
          </span>
        </li>
        <li data-target="#wizard-panel-step2" class="active">
          <span class="wizard-step-number">2</span>
          <span class="wizard-step-complete"><i class="fa fa-check"></i></span>
          <span class="wizard-step-caption">
            Step 2
            <span class="wizard-step-description">Description</span>
          </span>
        </li>
        <li data-target="#wizard-panel-step3">
          <span class="wizard-step-number">3</span>
          <span class="wizard-step-complete"><i class="fa fa-check"></i></span>
          <span class="wizard-step-caption">
            Step 3
            <span class="wizard-step-description">Description</span>
          </span>
        </li>
        <li data-target="#wizard-panel-step4">
          <span class="wizard-step-number">4</span>
          <span class="wizard-step-complete"><i class="fa fa-check"></i></span>
          <span class="wizard-step-caption">
            Finish
            <span class="wizard-step-description">Description</span>
          </span>
        </li>
      </ul>
    </div>
    <div class="wizard-content">
      <div class="wizard-pane" id="wizard-panel-step1"></div>
      <div class="wizard-pane active" id="wizard-panel-step2">
        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.
      </div>
      <div class="wizard-pane" id="wizard-panel-step3"></div>
      <div class="wizard-pane" id="wizard-panel-step4"></div>
    </div>
  </div>
</div>
    Copy
Wizard title
Support panel subtitle
  • 1 Step 1
  • 2 Step 2
  • 3 Step 3
  • 4 Finish
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.
Some body content. 
<div class="panel">
  <div class="panel-title">Wizard title</div>
  <small class="panel-subtitle text-muted">Support panel subtitle</small>
  <div class="wizard panel-wizard" id="wizard-panel2">
    <div class="wizard-wrapper">
      <ul class="wizard-steps">
        <li data-target="#wizard-panel2-step1" class="completed">
          <span class="wizard-step-number">1</span>
          <span class="wizard-step-complete"><i class="fa fa-check"></i></span>
          <span class="wizard-step-caption">Step 1</span>
        </li>
        <li data-target="#wizard-panel2-step2" class="active">
          <span class="wizard-step-number">2</span>
          <span class="wizard-step-complete"><i class="fa fa-check"></i></span>
          <span class="wizard-step-caption">Step 2</span>
        </li>
        <li data-target="#wizard-panel2-step3">
          <span class="wizard-step-number">3</span>
          <span class="wizard-step-complete"><i class="fa fa-check"></i></span>
          <span class="wizard-step-caption">Step 3</span>
        </li>
        <li data-target="#wizard-panel2-step4">
          <span class="wizard-step-number">4</span>
          <span class="wizard-step-complete"><i class="fa fa-check"></i></span>
          <span class="wizard-step-caption">Finish</span>
        </li>
      </ul>
    </div>
    <div class="wizard-content">
      <div class="wizard-pane" id="wizard-panel2-step1"></div>
      <div class="wizard-pane active" id="wizard-panel2-step2">
        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.
      </div>
      <div class="wizard-pane" id="wizard-panel2-step3"></div>
      <div class="wizard-pane" id="wizard-panel2-step4"></div>
    </div>
  </div>
  <div class="panel-body">
    Some body content.
  </div>
</div>
    Copy

Colors

Danger
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Colorful danger
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Dark danger
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Dark colorful danger
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. 
<div class="row">
  <div class="col-md-6">
    <div class="panel panel-danger">
      <div class="panel-heading">
        <span class="panel-title">Danger</span>
        <div class="panel-heading-icon"><i class="fa fa-inbox"></i></div>
      </div>
      <div class="panel-body">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
      </div>
    </div>
    <div class="panel panel-danger panel-body-colorful">
      <div class="panel-heading">
        <span class="panel-title">Colorful danger</span>
        <div class="panel-heading-icon"><i class="fa fa-inbox"></i></div>
      </div>
      <div class="panel-body">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
      </div>
    </div>
  </div>
  <div class="col-md-6">
    <div class="panel panel-danger panel-dark">
      <div class="panel-heading">
        <span class="panel-title">Dark danger</span>
        <div class="panel-heading-icon"><i class="fa fa-inbox"></i></div>
      </div>
      <div class="panel-body">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
      </div>
    </div>
    <div class="panel panel-danger panel-dark panel-body-colorful">
      <div class="panel-heading">
        <span class="panel-title">Dark colorful danger</span>
        <div class="panel-heading-icon"><i class="fa fa-inbox"></i></div>
      </div>
      <div class="panel-body">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
      </div>
    </div>
  </div>
</div>
    Copy
Success
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Colorful success
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Dark success
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Dark colorful success
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. 
<div class="row">
  <div class="col-md-6">
    <div class="panel panel-success">
      <div class="panel-heading">
        <span class="panel-title">Success</span>
        <div class="panel-heading-icon"><i class="fa fa-inbox"></i></div>
      </div>
      <div class="panel-body">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
      </div>
    </div>
    <div class="panel panel-success panel-body-colorful">
      <div class="panel-heading">
        <span class="panel-title">Colorful success</span>
        <div class="panel-heading-icon"><i class="fa fa-inbox"></i></div>
      </div>
      <div class="panel-body">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
      </div>
    </div>
  </div>
  <div class="col-md-6">
    <div class="panel panel-success panel-dark">
      <div class="panel-heading">
        <span class="panel-title">Dark success</span>
        <div class="panel-heading-icon"><i class="fa fa-inbox"></i></div>
      </div>
      <div class="panel-body">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
      </div>
    </div>
    <div class="panel panel-success panel-dark panel-body-colorful">
      <div class="panel-heading">
        <span class="panel-title">Dark colorful success</span>
        <div class="panel-heading-icon"><i class="fa fa-inbox"></i></div>
      </div>
      <div class="panel-body">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
      </div>
    </div>
  </div>
</div>
    Copy
Warning
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Colorful warning
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Dark warning
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Dark colorful warning
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. 
<div class="row">
  <div class="col-md-6">
    <div class="panel panel-warning">
      <div class="panel-heading">
        <span class="panel-title">Warning</span>
        <div class="panel-heading-icon"><i class="fa fa-inbox"></i></div>
      </div>
      <div class="panel-body">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
      </div>
    </div>
    <div class="panel panel-warning panel-body-colorful">
      <div class="panel-heading">
        <span class="panel-title">Colorful warning</span>
        <div class="panel-heading-icon"><i class="fa fa-inbox"></i></div>
      </div>
      <div class="panel-body">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
      </div>
    </div>
  </div>
  <div class="col-md-6">
    <div class="panel panel-warning panel-dark">
      <div class="panel-heading">
        <span class="panel-title">Dark warning</span>
        <div class="panel-heading-icon"><i class="fa fa-inbox"></i></div>
      </div>
      <div class="panel-body">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
      </div>
    </div>
    <div class="panel panel-warning panel-dark panel-body-colorful">
      <div class="panel-heading">
        <span class="panel-title">Dark colorful warning</span>
        <div class="panel-heading-icon"><i class="fa fa-inbox"></i></div>
      </div>
      <div class="panel-body">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
      </div>
    </div>
  </div>
</div>
    Copy
Info
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Colorful info
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Dark info
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Dark colorful info
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. 
<div class="row">
  <div class="col-md-6">
    <div class="panel panel-info">
      <div class="panel-heading">
        <span class="panel-title">Info</span>
        <div class="panel-heading-icon"><i class="fa fa-inbox"></i></div>
      </div>
      <div class="panel-body">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
      </div>
    </div>
    <div class="panel panel-info panel-body-colorful">
      <div class="panel-heading">
        <span class="panel-title">Colorful info</span>
        <div class="panel-heading-icon"><i class="fa fa-inbox"></i></div>
      </div>
      <div class="panel-body">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
      </div>
    </div>
  </div>
  <div class="col-md-6">
    <div class="panel panel-info panel-dark">
      <div class="panel-heading">
        <span class="panel-title">Dark info</span>
        <div class="panel-heading-icon"><i class="fa fa-inbox"></i></div>
      </div>
      <div class="panel-body">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
      </div>
    </div>
    <div class="panel panel-info panel-dark panel-body-colorful">
      <div class="panel-heading">
        <span class="panel-title">Dark colorful info</span>
        <div class="panel-heading-icon"><i class="fa fa-inbox"></i></div>
      </div>
      <div class="panel-body">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
      </div>
    </div>
  </div>
</div>
    Copy
Panel - Transparent
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. 
<div class="row">
  <div class="col-md-6">
    <div class="panel panel-transparent">
      <div class="panel-heading">
        <span class="panel-title">Panel - Transparent</span>
        <div class="panel-heading-icon"><i class="fa fa-inbox"></i></div>
      </div>
      <div class="panel-body">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
      </div>
    </div>
  </div>
</div>
    Copy
SETTINGS
THEMES
1264x180