Bootstrap Panels
Bootstrap Panels are used to display content inside bordered boxes with headings, body content, and footers. They help in organizing UI elements like forms, messages, product cards, or grouped sections.
📌 Panels exist in Bootstrap 3. In Bootstrap 4+, they are replaced by Cards.
✅ Basic Panel
Use .panel and .panel-default classes:
🎨 Different Panel Styles
Bootstrap provides contextual color classes:
| Class | Display Type |
|---|---|
panel-default | Standard gray |
panel-primary | Blue theme |
panel-success | Green theme |
panel-info | Light blue |
panel-warning | Orange |
panel-danger | Red |
Example:
📌 Panel with Footer
🔗 Panels with List Group
Useful for displaying grouped information like inbox messages:
🏷 Panels with Tables
📌 Panel Group (Accordion Style)
✔ Summary
| Feature | Supported |
|---|---|
| Basic border+heading content box | ✔️ |
| Contextual color variations | ✔️ |
| Supports tables, list groups, forms | ✔️ |
| Has headers & footers | ✔️ |
| Accordion (collapsible sections) | ✔️ |
