Panels

Panels are bordered boxes with optional headers and footers — perfect for wrapping sections of content.

Basic Panel

<div class="panel panel-default">
    <div class="panel-body">
        This is a basic panel.
    </div>
</div>

Panel with Header

<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">Panel Title</h3>
    </div>
    <div class="panel-body">
        Panel content goes here.
    </div>
</div>

Panel with Footer

<div class="panel panel-default">
    <div class="panel-body">Content</div>
    <div class="panel-footer">Panel footer</div>
</div>

Panel Colors

<div class="panel panel-primary">...</div>
<div class="panel panel-success">...</div>
<div class="panel panel-info">...</div>
<div class="panel panel-warning">...</div>
<div class="panel panel-danger">...</div>

Panel with Table

<div class="panel panel-default">
    <div class="panel-heading">User List</div>
    <table class="table">
        <thead>
            <tr><th>Name</th><th>Email</th></tr>
        </thead>
        <tbody>
            <tr><td>Alice</td><td>alice@example.com</td></tr>
            <tr><td>Bob</td><td>bob@example.com</td></tr>
        </tbody>
    </table>
</div>

Panel with List Group

<div class="panel panel-default">
    <div class="panel-heading">Tasks</div>
    <div class="panel-body">
        <p>Your tasks for today:</p>
    </div>
    <ul class="list-group">
        <li class="list-group-item">Complete tutorial</li>
        <li class="list-group-item">Review code</li>
        <li class="list-group-item">Deploy app</li>
    </ul>
</div>