Panels

<div class="panel panel-flat border-accent panel-border-top">
  <div class="panel-heading">Top custom border</div>
  <div class="panel-body">Aenean ligulabh, molestie vierra. mattis diam velacus tincidunt elementum. Sediae adipiscing turpis. Donec vest blum justo a.</div>
</div>

		

Bottom custom border

---

<div class="panel panel-flat border-accent panel-border-bottom">
  <div class="panel-heading">Bottom custom border</div>
  <div class="panel-body">Aenean ligulabh, molestie vierra. mattis diam velacus tincidunt elementum. Sediae adipiscing turpis. Donec vest blum justo a.</div>
</div>

		

Left custom border

---

<div class="panel panel-flat border-accent panel-border-left">
  <div class="panel-heading">Left custom border</div>
  <div class="panel-body">Aenean ligulabh, molestie vierra. mattis diam velacus tincidunt elementum. Sediae adipiscing turpis. Donec vest blum justo a.</div>
</div>
		

Right custom border

---

<div class="panel panel-flat border-accent panel-border-right">
  <div class="panel-heading">Right custom border</div>
  <div class="panel-body">Aenean ligulabh, molestie vierra. mattis diam velacus tincidunt elementum. Sediae adipiscing turpis. Donec vest blum justo a.</div>
</div>
		

<div class="panel panel-flat border-accent panel-border-top">
  <div class="panel-heading">Basic size</div>
  <div class="panel-body">Aenean ligulabh, molestie vierra. mattis diam velacus tincidunt elementum. Sediae adipiscing turpis. Donec vest blum justo a.</div>
</div>

Basic size 02

---

<div class="panel panel-flat border-accent panel-border-left">
  <div class="panel-heading">Basic size</div>
  <div class="panel-body">Aenean ligulabh, molestie vierra. mattis diam velacus tincidunt elementum. Sediae adipiscing turpis. Donec vest blum justo a.</div>
</div>
        

Large size 01

---

<div class="panel panel-flat border-accent panel-border-top border-lg">
  <div class="panel-heading">Large size</div>
  <div class="panel-body">Aenean ligulabh, molestie vierra. mattis diam velacus tincidunt elementum. Sediae adipiscing turpis. Donec vest blum justo a.</div>
</div>
        

Large size 02

---

<div class="panel panel-flat border-accent panel-border-left border-lg">
  <div class="panel-heading">Large size</div>
  <div class="panel-body">Aenean ligulabh, molestie vierra. mattis diam velacus tincidunt elementum. Sediae adipiscing turpis. Donec vest blum justo a.</div>
</div>
        

Extra large size 01

---

<div class="panel panel-flat border-accent panel-border-top border-xl">
  <div class="panel-heading">Extra large size</div>
  <div class="panel-body">Aenean ligulabh, molestie vierra. mattis diam velacus tincidunt elementum. Sediae adipiscing turpis. Donec vest blum justo a.</div>
</div>
        

Extra large size 02

---

<div class="panel panel-flat border-accent panel-border-left border-xl">
  <div class="panel-heading">Extra large size</div>
  <div class="panel-body">Aenean ligulabh, molestie vierra. mattis diam velacus tincidunt elementum. Sediae adipiscing turpis. Donec vest blum justo a.</div>
</div>
        

<div class="panel panel-flat">
  <div class="panel-heading">Flat panel</div>
  <div class="panel-body">Aenean ligulabh, molestie vierra. mattis diam velacus tincidunt elementum. Sediae adipiscing turpis. Donec vest.</div>
</div>
		

White panel

---

<div class="panel">
  <div class="panel-heading">White panel</div>
  <div class="panel-body">Aenean ligulabh, molestie vierra. mattis diam velacus tincidunt elementum. Sediae adipiscing turpis. Donec vest.</div>
</div>
        

Default panel

---

<div class="panel panel-default">
  <div class="panel-heading">Default panel</div>
  <div class="panel-body">Aenean ligulabh, molestie vierra. mattis diam velacus tincidunt elementum. Sediae adipiscing turpis. Donec vest.</div>
</div>
        

Primary panel

---

<div class="panel">
  <div class="panel-heading bg-primary">Primary panel</div>
  <div class="panel-body">Aenean ligulabh, molestie vierra. mattis diam velacus tincidunt elementum. Sediae adipiscing turpis. Donec vest.</div>
</div>
        

Success panel

---

<div class="panel">
  <div class="panel-heading bg-success">Success panel</div>
  <div class="panel-body">Aenean ligulabh, molestie vierra. mattis diam velacus tincidunt elementum. Sediae adipiscing turpis. Donec vest.</div>
</div>
        

Info panel

---

<div class="panel">
  <div class="panel-heading bg-info">Info panel</div>
  <div class="panel-body">Aenean ligulabh, molestie vierra. mattis diam velacus tincidunt elementum. Sediae adipiscing turpis. Donec vest.</div>
</div>
        

Warning panel

---

<div class="panel">
  <div class="panel-heading bg-warning">Warning panel</div>
  <div class="panel-body">Aenean ligulabh, molestie vierra. mattis diam velacus tincidunt elementum. Sediae adipiscing turpis. Donec vest.</div>
</div>
        

Danger panel

---

<div class="panel">
  <div class="panel-heading bg-danger">Danger panel</div>
  <div class="panel-body">Aenean ligulabh, molestie vierra. mattis diam velacus tincidunt elementum. Sediae adipiscing turpis. Donec vest.</div>
</div>
        

<div class="panel panel-default border-silver">
  <div class="panel-heading">Custom panel border</div>
  <div class="panel-body">Aenean ligulabh, molestie vierra. mattis diam velacus tincidunt elementum. Sediae adipiscing turpis. Donec vest blum justo a diam.</div>
</div>
		

Primary panel

---

<div class="panel border-primary">
  <div class="panel-heading bg-primary">Primary panel</div>
  <div class="panel-body">Aenean ligulabh, molestie vierra. mattis diam velacus tincidunt elementum. Sediae adipiscing turpis. Donec vest blum justo a diam ul.</div>
</div>
        

Success panel

---

<div class="panel border-success">
  <div class="panel-heading bg-success">Success panel</div>
  <div class="panel-body">Aenean ligulabh, molestie vierra. mattis diam velacus tincidunt elementum. Sediae adipiscing turpis. Donec vest.</div>
</div>
        

Info panel

---

<div class="panel border-info">
  <div class="panel-heading bg-info">Info panel</div>
  <div class="panel-body">Aenean ligulabh, molestie vierra. mattis diam velacus tincidunt elementum. Sediae adipiscing turpis. Donec vest.</div>
</div>
        

Warning panel

---

<div class="panel border-warning">
  <div class="panel-heading bg-warning">Warning panel</div>
  <div class="panel-body">Aenean ligulabh, molestie vierra. mattis diam velacus tincidunt elementum. Sediae adipiscing turpis. Donec vest.</div>
</div>
        

Danger panel

---

<div class="panel border-danger">
  <div class="panel-heading bg-danger">Danger panel</div>
  <div class="panel-body">Aenean ligulabh, molestie vierra. mattis diam velacus tincidunt elementum. Sediae adipiscing turpis. Donec vest.</div>
</div>
        

<div class="panel bg-accent">
  <div class="panel-heading">Default panel</div>
  <div class="panel-body">Aenean ligulabh, molestie vierra. mattis diam velacus tincidunt elementum. Sediae adipiscing turpis. Donec vest blum justo a diam ul.</div>
</div>
		

Primary panel

---

<div class="panel bg-primary">
  <div class="panel-heading">Primary panel</div>
  <div class="panel-body">Aenean ligulabh, molestie vierra. mattis diam velacus tincidunt elementum. Sediae adipiscing turpis. Donec vest.</div>
</div>
        

Success panel

---

<div class="panel bg-success">
  <div class="panel-heading">Success panel</div>
  <div class="panel-body">Aenean ligulabh, molestie vierra. mattis diam velacus tincidunt elementum. Sediae adipiscing turpis. Donec vest.</div>
</div>
        

Info panel

---

<div class="panel bg-info">
  <div class="panel-heading">Info panel</div>
  <div class="panel-body">Aenean ligulabh, molestie vierra. mattis diam velacus tincidunt elementum. Sediae adipiscing turpis. Donec vest.</div>
</div>
        

Warning panel

---

<div class="panel bg-warning">
  <div class="panel-heading">Warning panel</div>
  <div class="panel-body">Aenean ligulabh, molestie vierra. mattis diam velacus tincidunt elementum. Sediae adipiscing turpis. Donec vest.</div>
</div>
        

Danger panel

---

<div class="panel bg-danger">
  <div class="panel-heading">Danger panel</div>
  <div class="panel-body">Aenean ligulabh, molestie vierra. mattis diam velacus tincidunt elementum. Sediae adipiscing turpis. Donec vest.</div>
</div>
        

<div class="panel panel-default mr-50 ml-50">
  <div class="panel-heading">Panel heading without title</div>
  <div class="panel-body">
    <p>Aenean ligulabh, molestie vierra. mattis diam velacus tincidunt elementum. Sediae adipiscing turpis. Donec vest blum justo a diam ultricies</p>
  </div>
  <div class="table-responsive">
    <table class="table">
      <thead>
        <tr>
          <th class="color-night">#</th>
          <th class="color-night">First Name</th>
          <th class="color-night">Last Name</th>
          <th class="color-night">Username</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>Mark</td>
          <td>Otto</td>
          <td>@Harry</td>
        </tr>
        <tr>
          <td>2</td>
          <td>Jacob</td>
          <td>Thornton</td>
          <td>@Jordan</td>
        </tr>
        <tr>
          <td>3</td>
          <td>Larry</td>
          <td>the Bird</td>
          <td>@Vicky</td>
        </tr>
        <tr>
          <td>4</td>
          <td>Monica</td>
          <td>Manager</td>
          <td>@Elizabeth</td>
        </tr>
        <tr>
          <td>5</td>
          <td>John</td>
          <td>Townsend</td>
          <td>@David</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>
        

Panel title

---

<div class="panel panel-default mr-50 ml-50">
  <div class="panel-heading">Panel title</div>
  <div class="table-responsive">
    <table class="table">
      <thead>
        <tr>
          <th class="color-night">#</th>
          <th class="color-night">First Name</th>
          <th class="color-night">Last Name</th>
          <th class="color-night">Username</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>Mark</td>
          <td>Otto</td>
          <td>@Harry</td>
        </tr>
        <tr>
          <td>2</td>
          <td>Jacob</td>
          <td>Thornton</td>
          <td>@Jordan</td>
        </tr>
        <tr>
          <td>3</td>
          <td>Larry</td>
          <td>the Bird</td>
          <td>@Vicky</td>
        </tr>
        <tr>
          <td>4</td>
          <td>Monica</td>
          <td>Manager</td>
          <td>@Elizabeth</td>
        </tr>
        <tr>
          <td>5</td>
          <td>John</td>
          <td>Townsend</td>
          <td>@David</td>
        </tr>
        <tr>
          <td>6</td>
          <td>Thomas</td>
          <td>Roberts</td>
          <td>@Justin</td>
        </tr>
        <tr>
          <td>7</td>
          <td>Aaron</td>
          <td>James</td>
          <td>@Gaby</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>