Panels

The most basic panels can be...

<div class="panel">
  <div class="panel-body">Body</div>
</div>

The basic panel can further be enhanced with contextual variations

<div class="panel panel-primary">
  <div class="panel-body">Body</div>
</div>

You can add headers...

<div class="panel panel-primary">
  <div class="panel-heading">Header</div>
  <div class="panel-body">Body</div>
</div>

And footers...

<div class="panel panel-primary">
  <div class="panel-heading">Header</div>
  <div class="panel-body">Body</div>
  <div class="panel-footer">Footer</div>
</div>

And links in headers...

<div class="panel panel-primary">
  <div class="panel-heading">
    <h4>Header</h4>
    <div class="options">
      <a href="#"><i class="fa fa-cog"></i></a>
    </div>
  </div>
  <div class="panel-body">Body</div>
</div>

Make the panels collapsible by with a panel-collapse option

<div class="panel panel-primary">
  <div class="panel-heading">
    <h4>Header</h4>
    <div class="options">
      <a class="panel-collapse" href="#">
        <i class="fa fa-chevron-down"></i></a>
    </div>
  </div>
  <div class="panel-body">Body</div>
</div>

And icons...

<div class="panel panel-primary">
  <div class="panel-heading">
    <h4><i class="fa fa-cloud"></i> Header</h4>
  </div>
  <div class="panel-body">Body</div>
</div>

And tabs in the options...

<div class="panel panel-primary">
  <div class="panel-heading">
  <h4>Header</h4>
  <div class="options">
    <ul class="nav nav-tabs">
      <li class="active">
        <a href="#home1" data-toggle="tab">Home</a>
      </li>
      <li>
        <a href="#profile1" data-toggle="tab">Profile</a>
      </li>
      <li>
        <a href="#messages1" data-toggle="tab">Messages</a>
      </li>
    </ul>
  </div>
</div>
<div class="panel-body">
  <div class="tab-content">
    <div class="tab-pane active" id="home1">Lorem ...</div>
    <div class="tab-pane" id="profile1">Lorem ...</div>
    <div class="tab-pane" id="messages1">Lorem ...</div>
  </div>
</div>
</div>

And headers as tabs...

<div class="panel panel-primary">
  <div class="panel-heading">
    <ul class="nav nav-tabs">
      <li class="active">
        <a href="#home1" data-toggle="tab">Home</a>
      </li>
      <li>
        <a href="#profile1" data-toggle="tab">Profile</a>
      </li>
      <li>
        <a href="#messages1" data-toggle="tab">Messages</a>
      </li>
    </ul>
  </h4>
    <div class="options">
      <a href="#"><i class="fa fa-cogs"></i></a>
    </div>
  </div>
  <div class="panel-body">
    <div class="tab-content">
      <div class="tab-pane active" id="home8">Lorem ...</div>
      <div class="tab-pane" id="profile8">Lorem ...</div>
      <div class="tab-pane" id="messages8">Lorem ...</div>
    </div>
  </div>
</div>

Dropdowns can also be placed in tabs

<div class="panel panel-primary">
  <div class="panel-heading">
    <h4>Primary</h4>
    <div class="options">
      <ul class="nav nav-tabs">
        <li class="active">
          <a href="#home1" data-toggle="tab">Home</a>
        </li>
        <li>
          <a href="#profile1" data-toggle="tab">Profile</a>
        </li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Something</a></li>
            <li><a href="#">Something Else</a></li>
            <li class="divider"></li>
            <li><a href="#">And one more thing</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
  <div class="panel-body">
    <div class="tab-content">
      <div class="tab-pane active" id="home1">Lorem...</div>
      <div class="tab-pane" id="profile1">Lorem...</div>
    </div>
  </div>
</div>

Simply change the panel classes for style variations like this...

<div class="panel">
  <div class="panel-heading">
  <h4><i class="fa fa-cloud"></i> Header</h4>
  <div class="options">
    <ul class="nav nav-tabs">
      <li class="active">
        <a href="#home1" data-toggle="tab">Home</a>
      </li>
      <li>
        <a href="#profile1" data-toggle="tab">Profile</a>
      </li>
      <li>
        <a href="#messages1" data-toggle="tab">Messages</a>
      </li>
    </ul>
  </div>
</div>
<div class="panel-body">
  <div class="tab-content">
    <div class="tab-pane active" id="home1">Lorem ...</div>
    <div class="tab-pane" id="profile1">Lorem ...</div>
    <div class="tab-pane" id="messages1">Lorem ...</div>
  </div>
</div>
</div>

And adding the .gray class will be like...

<div class="panel panel-gray">
  <div class="panel-heading">
  <h4><i class="fa fa-cloud icon-highlight icon-highlight-primary"></i> Header</h4>
  <div class="options">
    <ul class="nav nav-tabs">
      <li class="active">
        <a href="#home1" data-toggle="tab">Home</a>
      </li>
      <li>
        <a href="#profile1" data-toggle="tab">Profile</a>
      </li>
      <li>
        <a href="#messages1" data-toggle="tab">Messages</a>
      </li>
    </ul>
  </div>
</div>
<div class="panel-body">
  <div class="tab-content">
    <div class="tab-pane active" id="home1">Lorem ...</div>
    <div class="tab-pane" id="profile1">Lorem ...</div>
    <div class="tab-pane" id="messages1">Lorem ...</div>
  </div>
</div>
</div>