Bootstrap Panels
Bootstrap 5 Panels are content containers that are flexible and expandable, allowing a wide range of content, contextual backdrop colors, and elegant display choices. Panels are like cards, however, they don’t have any media.
1. Basic Panel
Example Code:
<!DOCTYPE html>
<html>
<head>
<title>Basic Panel</title>
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css”>
</head>
<body class=”container”>
<div class=”panel panel-default”>
<div class=”panel-heading”>Panel Heading</div>
<div class=”panel-body”>
Panel content goes here.
</div>
</div>
</body>
</html>
Output:
Explanation:
• panel panel-default: Creates a panel with default gray border.
• panel-heading: Top heading area of the panel.
• panel-body: Main content area inside the panel.
2. Panel with Footer
Example Code:
<!DOCTYPE html>
<html>
<head>
<title>Basic Panel</title>
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css”>
</head>
<body class=”container”>
<div class=”panel panel-default”>
<div class=”panel-heading”>Panel Heading</div>
<div class=”panel-body”>
Panel content goes here.
</div>
<div class=”panel-footer”>Panel Footer</div>
</div>
</body>
</html>
Output:
Explanation:
• panel-footer: Adds a footer below the content area.
• Good for extra info or action buttons.
3. Contextual Styled Panels (Success, Info, etc.)
Example Success Panel:
<!DOCTYPE html>
<html>
<head>
<title>Basic Panel</title>
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css”>
</head>
<body class=”container”>
<div class=”panel panel-success”>
<div class=”panel-heading”>Success Panel Heading</div>
<div class=”panel-body”>
Success panel content.
</div>
</div>
</body>
</html>
Output:
Example Info Panel:
<!DOCTYPE html>
<html>
<head>
<title>Basic Panel</title>
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css”>
</head>
<body class=”container”>
<div class=”panel panel-info”>
<div class=”panel-heading”>Info Panel Heading</div>
<div class=”panel-body”>
Info panel content.
</div>
</div>
</body>
</html>
Output:
Explanation:
• panel-success: Green theme (used for success messages).
• panel-info: Blue theme (used for information)
• You can also use:
• panel-warning (orange/yellow)
• panel-danger (red)
4. Custom-Styled Panel
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Basic Panel</title>
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css”>
</head>
<body class=”container”>
<div class=”panel panel-default custom-panel”>
<div class=”panel-heading”>Custom Panel Heading</div>
<div class=”panel-body”>
Content in a custom-styled panel.
</div>
</div>
</body>
</html>
CSS:
<style>
.custom-panel {
border-color: #333;
background-color: #f9f9f9;
}
.custom-panel > .panel-heading {
background-color: #333;
color: white;
}
</style>
Output:
Explanation:
• border-color: Makes border dark.
• background-color: Light gray panel background.
• panel-heading styled with dark background and white text.
Conclusion:
• Panels in Bootstrap are useful for grouping content.
• You can add headings, body, footer, and color styles.
• Bootstrap 4+ uses Cards instead of Panels.
Practice Scenarios:
Scenario 1: Create a Warning Panel with Footer
Objective:
Make a yellow panel (panel-warning) with a heading, body, and a footer that says “Last updated 2 days ago”.
Expected Output:
Scenario 2: Create an Info Panel with Two Paragraphs
Objective:
Create a blue info panel (panel-info) with two paragraphs of content inside the body.
Expected Output:
Bootstrap panels are used to group content within a bordered box to highlight or separate different sections of a webpage effectively.
Yes, this Bootstrap training is completely free. You can access all tutorials and learn Bootstrap at your own pace without any charges.
Responsive panels can be achieved by utilizing Bootstrap’s grid system and custom CSS.
Dynamic panels are commonly used for dashboards, collapsible sections, and interactive UI elements.
Bootstrap 5 panels are optimized for modern browsers. For older browsers, consider using Bootstrap 3/4.
Panels have been replaced with cards in Bootstrap 4 and 5. However, you can recreate panel-like features using custom CSS and cards.
Yes, Bootstrap panels are purely CSS-based and do not require JavaScript unless you’re adding interactive elements like collapsibles.
Use the shadow utility classes, such as shadow-sm, shadow, or shadow-lg, to add shadow effects to panels.
Yes, integrate panels with CSS animations or JavaScript libraries like Animate.css or GSAP for enhanced visual effects.
Use Bootstrap’s grid system (e.g., col-md-6, col-sm-12) to define how panels should behave on different devices.
