Bootstrap 3 Tutorial

Bootstrap 3 Panels

Last modified on: October 28, 2024

<div class="flex-shrink-0 flex flex-col relative items-end">
<div>
<div class="pt-0">
<div class="gizmo-bot-avatar flex h-8 w-8 items-center justify-center overflow-hidden rounded-full">&nbsp;</div>
</div>
</div>
</div>
<div class="group/conversation-turn relative flex w-full min-w-0 flex-col agent-turn">
<div class="flex-col gap-1 md:gap-3">
<div class="flex max-w-full flex-col flex-grow">
<div class="min-h-8 text-message flex w-full flex-col items-end gap-2 whitespace-normal break-words [.text-message+&amp;]:mt-5" dir="auto" data-message-author-role="assistant" data-message-id="6f3552f5-0090-4aab-a3b1-0ef20b56562d" data-message-model-slug="gpt-4o-mini">
<div class="flex w-full flex-col gap-1 empty:hidden first:pt-[3px]">
<div class="markdown prose w-full break-words dark:prose-invert light">
<h3>Bootstrap 3: Panels</h3>
<p><strong>Panels</strong> in Bootstrap 3 are versatile components that are used to display content in a structured way, similar to cards or containers. They are useful for organizing information, creating section headers, and presenting content with an optional heading and footer. Panels can also include various elements like text, images, buttons, and more.</p>
<hr />
<h3>Basic Usage of Panels</h3>
<p>To create a panel, use the <code>.panel</code> class along with a few additional classes to define its structure and appearance. A typical panel consists of a panel heading, a panel body, and an optional footer.</p>
<h4>Example of a Basic Panel</h4>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;title&gt;Bootstrap 3 Panel Example&lt;/title&gt;
    &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;div class="container"&gt;
    &lt;h2&gt;Bootstrap 3 Panels&lt;/h2&gt;

&lt;div class="panel panel-default"&gt;
        &lt;div class="panel-heading"&gt;Panel Heading&lt;/div&gt;
        &lt;div class="panel-body"&gt;
            &lt;p&gt;This is some content inside the panel.&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="panel-footer"&gt;Panel Footer&lt;/div&gt;
    &lt;/div&gt;

&lt;div class="panel panel-primary"&gt;
        &lt;div class="panel-heading"&gt;Primary Panel&lt;/div&gt;
        &lt;div class="panel-body"&gt;
            &lt;p&gt;This panel uses the primary color theme.&lt;/p&gt;
        &lt;/div&gt;
    &lt;/div&gt;

&lt;div class="panel panel-success"&gt;
        &lt;div class="panel-heading"&gt;Success Panel&lt;/div&gt;
        &lt;div class="panel-body"&gt;
            &lt;p&gt;This panel indicates a successful operation.&lt;/p&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"&gt;&lt;/script&gt;
&lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
</div>
</div>
</div>
</div>
<hr />
<h3>Key Features of Bootstrap 3 Panels</h3>
<ol>
<li><strong>Panel Heading</strong>: Use the <code>.panel-heading</code> class to create a header for your panel.</li>
<li><strong>Panel Body</strong>: The main content area of the panel is defined by the <code>.panel-body</code> class.</li>
<li><strong>Panel Footer</strong>: An optional footer can be added using the <code>.panel-footer</code> class.</li>
<li><strong>Color Themes</strong>: Bootstrap offers various panel classes like <code>.panel-default</code>, <code>.panel-primary</code>, <code>.panel-success</code>, <code>.panel-warning</code>, and <code>.panel-danger</code> to indicate different types of content.</li>
<li><strong>Responsive</strong>: Panels automatically adjust their width based on the viewport size, making them suitable for responsive design.</li>
</ol>
<hr />
<h3>Example with List Group Inside a Panel</h3>
<p>You can also combine panels with list groups to create more complex structures:</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;div class="panel panel-info"&gt;
    &lt;div class="panel-heading"&gt;Info Panel with List Group&lt;/div&gt;
    &lt;div class="panel-body"&gt;
        &lt;div class="list-group"&gt;
            &lt;a href="#" class="list-group-item"&gt;List Group Item 1&lt;/a&gt;
            &lt;a href="#" class="list-group-item"&gt;List Group Item 2&lt;/a&gt;
            &lt;a href="#" class="list-group-item"&gt;List Group Item 3&lt;/a&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<hr />
<h3>&nbsp;</h3>
</div>
</div>
</div>
</div>
</div>
</div>
<h3>Conclusion</h3>
<p>Bootstrap 3 Panels are a powerful way to present information in a clear and structured format. Their versatility allows you to combine them with other components for enhanced functionality, making them suitable for various applications in web development. Whether you need a simple information box or a complex content structure, panels can help you achieve a professional look and feel.</p>

Web Technology View More