Bootstrap Panels

This chapter will discuss about Bootstrap panels. Panel component are used when you want to put your DOM component in a box. To get a basic panel, just add class .panel to the <div> element. Also add class .panel-default to this element as shown in the following example:

Panel with tables

To get a non-bordered table within a panel, use class .table within the panel. Suppose there is a <div> containing .panel-body, we add an extra border to the top of the table for separation. If there is no <div> containing .panel-body, then the component moves from panel header to table without interruption.

Panel with Listgroups

You can include list groups within any panel. Create a panel by adding class .panel to the <div> element. Also add class .panel-default to this element. Now within this panel include your list groups. You can learn to create a list group from chapter List Groups.