Panels are similar to Bootstrap alerts, but on steroids. Instead of a simple line or two of text, a panel will include a header section, as well as a body. This will give it a more prominent look that will allow it to stand out.
You can have more than just a line of text. This means you can add paragraphs, or even a table of information.
A most basic example of such would be:
<div class="panel panel-default"> <div class="panel-body"> Basic panel example </div> </div>
This example would not have a title section, and be similar in function to a Bootstrap Alert.
Notice that they have a class of
panel for the outside div, and
panel-<color type> for the inner section. The interior div has a class of
panel-body. It does not need to use the color type, as that is determined in the outer div’s class.
Typically however, you would use a panel header. Bootstrap’s website shows their examples with an
H3 tag being used in their panel headers. An example of that code would look like:
<div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">The Title for This Panel</h3> </div> <div class="panel-body"> Generic panel content... </div> </div>
You can further style the panel content by using paragraphs, and other markup text within the panel-body portion.
You can also include a footer for your panel, although it is kinda of rare to see in production. A case where you might want to use this is if you ran into a situation where you were quoting someone, and you wanted to put the source, or a resource link, in the footer to designate who you were attributing the quote/information too.
To your panel, you would add a new div with a class of
panel-footer. This would end of looking something like:
<div class="panel panel-default"> <div class="panel-body"> Generic panel content </div> <div class="panel-footer">My special panel footer</div> </div>
Lists and Tables
Alternately, you can also display lists and tables in the panel body.
You can have a table below the
panel-content, or instead of it.
If there is a section with
panel-content, then a border is added to the section to separate the
panel-content body’s content from the table. The table would be after the close of the
panel-content div. No special classes need to be added to the table.
If there is no div for the panel body, and the table is the content, then the table once again does not need a special class.
A list can be added to a panel in a similar manner. Like with a table, you can have it without adding a special panel class, although it is suggested that you add a class of
list-group to make the content full width.
<ul class="list-group"> <li class="list-group-item">Cras justo odio</li> <li class="list-group-item">Dapibus ac facilisis in</li> <li class="list-group-item">Morbi leo risus</li> <li class="list-group-item">Porta ac consectetur ac</li> <li class="list-group-item">Vestibulum at eros</li> </ul>