Basic Panel

<div class="panel panel-default">
  <div class="panel-body">A Basic Panel</div>
</div>

Panel Heading

The .panel-heading class adds a heading to the panel:

<div class="panel panel-default">
  <div class="panel-body">A Basic Panel</div>
</div>

Panel Footer

The .panel-footer class adds a footer to the panel:

Panel Group

To group many panels together, wrap a <div> with class .panel-group around them. The .panel-group class clears the bottom-margin of each panel:

<div class="panel-group">
        <div class="panel panel-default">
          <div class="panel-body">Panel Content</div>
        </div>
        <div class="panel panel-default">
          <div class="panel-body">Panel Content</div>
        </div>
      </div>

Panels with Contextual Classes

To color the panel, use contextual classes (.panel-default, .panel-primary, .panel-success, .panel-info, .panel-warning, or .panel-danger):

<div class="panel panel-primary">
      <div class="panel-heading">Panel with panel-primary class</div>
      <div class="panel-body">Panel Content</div>
    </div>

Collapsible Panel

Colapsible Panel

<div class="panel-group">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h4 class="panel-title">
            <a data-toggle="collapse" href="#collapse1">Collapsible panel</a>
          </h4>
        </div>
        <div id="collapse1" class="panel-collapse collapse">
          <div class="panel-body">Panel Body</div>
          <div class="panel-footer">Panel Footer</div>
        </div>
      </div>
    </div>

Collapsible List Group

<div class="panel-group">
        <div class="panel panel-default">
          <div class="panel-heading">
            <h4 class="panel-title">
                      <a data-toggle="collapse" href="#collapse2">Collapsible list group</a>
                    </h4>
          </div>
          <div id="collapse2" class="panel-collapse collapse">
            <ul class="list-group">
              <li class="list-group-item">One</li>
              <li class="list-group-item">Two</li>
              <li class="list-group-item">Three</li>
            </ul>
            <div class="panel-footer">Footer</div>
          </div>
        </div>
      </div>
    

Collapsibe Panel Group

In order to hide information, you can use collapsible panel group.

<div class="panel-group" id="accordion">
        <div class="panel panel-default">
          <div class="panel-heading">
            <h4 class="panel-title">
                      <a data-toggle="collapse"  href="#collapse3">Collapsible Group 1</a>
                    </h4>
          </div>
          <div id="collapse3" class="panel-collapse collapse">
            <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing 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>
        </div>
        <div class="panel panel-default">
          <div class="panel-heading">
            <h4 class="panel-title">
                        <a data-toggle="collapse"  href="#collapse4">Collapsible Group 2</a>
                      </h4>
          </div>
          <div id="collapse4" class="panel-collapse collapse">
            <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing 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>
        </div>
        <div class="panel panel-default">
          <div class="panel-heading">
            <h4 class="panel-title">
                          <a data-toggle="collapse"  href="#collapse5">Collapsible Group 3</a>
                        </h4>
          </div>
          <div id="collapse5" class="panel-collapse collapse">
            <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing 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>
        </div>
      </div>

Accordion

Note: The data-parent attribute makes sure that all collapsible elements under the specified parent will be closed when one of the collapsible item is shown.

<div class="panel-group" id="accordion">
        <div class="panel panel-default">
          <div class="panel-heading">
            <h4 class="panel-title">
                      <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Collapsible Group 1</a>
                    </h4>
          </div>
          <div id="collapse3" class="panel-collapse collapse">
            <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing 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>
        </div>
        <div class="panel panel-default">
          <div class="panel-heading">
            <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#accordion" href="#collapse4">Collapsible Group 2</a>
                      </h4>
          </div>
          <div id="collapse4" class="panel-collapse collapse">
            <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing 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>
        </div>
        <div class="panel panel-default">
          <div class="panel-heading">
            <h4 class="panel-title">
                          <a data-toggle="collapse" data-parent="#accordion" href="#collapse5">Collapsible Group 3</a>
                        </h4>
          </div>
          <div id="collapse5" class="panel-collapse collapse">
            <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing 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>
        </div>
      </div>

Popout Premium component

Add surrounding .popout class div to achieve fancy popout effect:

<div class="popout">
      <div class="panel-group " id="accordion">
        <div class="panel panel-default">
          <a data-toggle="collapse" href="#collapse12">
            <div class="panel-heading">
              <h4 class="panel-title">
              Collapsible panel
            </h4>
            </div>
          </a>
          <div id="collapse12" class="panel-collapse collapse">
            <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing 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>
        </div>
        <div class="panel panel-default">
          <a data-toggle="collapse" href="#collapse13">
            <div class="panel-heading">
              <h4 class="panel-title">
                Collapsible panel
              </h4>
            </div>
          </a>
          <div id="collapse13" class="panel-collapse collapse">
            <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing 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>
        </div>
        <div class="panel panel-default">
          <a data-toggle="collapse" href="#collapse14">
            <div class="panel-heading">
              <h4 class="panel-title">
                    Collapsible panel
                  </h4>
            </div>
          </a>
          <div id="collapse14" class="panel-collapse collapse">
            <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing 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>
        </div>
      </div>
    </div>