Bootstrap panels are box-like components that are used to place HTML components. You might want to display a box with rounded corners and a light-colored border around it. This is the component you should use in such cases.

Here's an example panel:

<div class="panel panel-default">
  <div class="panel-body">
    I am inside a box!
  </div>
</div>

This produces the following result in the browser:

The panel component becomes more interesting when you add a header and a footer to it. Yes, you read it right. Panels come with custom-designed headers and footers to create widget-like elements. If you see it carefully, you will find that the text goes inside a .panel-body element. We will now add headers and footers to the following panel:

<div class="panel panel-default">
  <div class="panel-heading">
    Widget 1
  </div>
  <div class="panel-body">
    I am inside a box!
  </div>
  <div class="panel-footer">
    by Syed Fazle Rahman...