Panels

Click to preview the Panels demo. View demo

Basic panel styles

Code:

<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 blum justo a diam ultricies pellentesque.</div>
</div>

<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 blum justo a diam ultricies pellentesque.</div>
</div>

<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 blum justo a diam ultricies pellentesque.</div>
</div>

<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 blum justo a diam ultricies pellentesque.</div>
</div>

<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 blum justo a diam ultricies pellentesque.</div>
</div>

<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 blum justo a diam ultricies pellentesque.</div>
</div>

<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 blum justo a diam ultricies pellentesque.</div>
</div>

<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 blum justo a diam ultricies pellentesque.</div>
</div>

<div class="panel panel-default border-silver">
  <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 ultricies pellentesque.</div>
</div>

<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 ultricies pellentesque.</div>
</div>

<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 blum justo a diam ultricies pellentesque.</div>
</div>

<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 blum justo a diam ultricies pellentesque.</div>
</div>

<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 blum justo a diam ultricies pellentesque.</div>
</div>

<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 blum justo a diam ultricies pellentesque.</div>
</div>

Bordered panels

Code:

<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 diam ultricies pellentesque.</div>
</div>

<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 diam ultricies pellentesque.</div>
</div>

<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 diam ultricies pellentesque.</div>
</div>

<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 diam ultricies pellentesque.</div>
</div>

Panel borders

Code:

<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 diam ultricies pellentesque.</div>
</div>

<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 diam ultricies pellentesque.</div>
</div>

<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 diam ultricies pellentesque.</div>
</div>

<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 diam ultricies pellentesque.</div>
</div>

<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 diam ultricies pellentesque.</div>
</div>

<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 diam ultricies pellentesque.</div>
</div>

Border size

Code:

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

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

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

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

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

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

Solid panels

Code:

<div class="panel panel-default">
  <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 pellentesque.Quisque mattis diam vel lacus tincidunt elementum. Nullam dictum felis eorem ipsum dolor sit amet.</p>
  </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>@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>