Bootstrap 5 Tutorial

Bootstrap 5 Offcanvas

Last modified on: October 27, 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="2b5e4036-9ad5-4df4-b9ae-3b3390b96318" data-message-model-slug="gpt-4o">
<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 5: Offcanvas</h3>
<p>The Offcanvas component in Bootstrap 5 creates hidden sidebars that slide in from the left, right, top, or bottom of the screen. They are commonly used for navigation menus, additional options, or any auxiliary content that doesn&rsquo;t need to be displayed on the main page until triggered.</p>
<hr />
<h3>Key Features of Bootstrap 5 Offcanvas</h3>
<ol>
<li><strong>Hidden Sidebar Content</strong>: Offcanvas allows content to be hidden off-screen until triggered.</li>
<li><strong>Responsive</strong>: Works well on both desktop and mobile, ideal for menus or filters on smaller screens.</li>
<li><strong>Customizable Placement</strong>: Supports top, right, bottom, and left placements.</li>
<li><strong>Easy JavaScript API</strong>: Includes an API for programmatic control of showing and hiding the component.</li>
</ol>
<hr />
<h3>Example: Basic Offcanvas in Bootstrap 5</h3>
<p>Here&rsquo;s an example of creating a simple Offcanvas sidebar on the right side of the screen.</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;!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.0"&gt;
    &lt;title&gt;Bootstrap 5 Offcanvas Example&lt;/title&gt;
    &lt;link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;!-- Button to open Offcanvas --&gt;
    &lt;button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample"&gt;
        Open Offcanvas
    &lt;/button&gt;

&lt;!-- Offcanvas Component --&gt;
    &lt;div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel"&gt;
        &lt;div class="offcanvas-header"&gt;
            &lt;h5 class="offcanvas-title" id="offcanvasExampleLabel"&gt;Offcanvas Sidebar&lt;/h5&gt;
            &lt;button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"&gt;&lt;/button&gt;
        &lt;/div&gt;
        &lt;div class="offcanvas-body"&gt;
            &lt;p&gt;This is an offcanvas sidebar. You can add any content here, including navigation links, forms, or other interactive elements.&lt;/p&gt;
            &lt;ul class="list-group"&gt;
                &lt;li class="list-group-item"&gt;Item 1&lt;/li&gt;
                &lt;li class="list-group-item"&gt;Item 2&lt;/li&gt;
                &lt;li class="list-group-item"&gt;Item 3&lt;/li&gt;
            &lt;/ul&gt;
        &lt;/div&gt;
    &lt;/div&gt;

&lt;script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h3>Explanation of the Code</h3>
<ul>
<li><strong>Trigger Button</strong>: The button includes <code>data-bs-toggle="offcanvas"</code> and <code>data-bs-target="#offcanvasExample"</code> to open the sidebar.</li>
<li><strong>Offcanvas Element</strong>: This component has the class <code>offcanvas-end</code> to place it on the right side. The <code>id</code> attribute matches the <code>data-bs-target</code> on the button, linking them.</li>
<li><strong>Content</strong>: The Offcanvas component includes a header with a title and close button and a body section for adding additional content.</li>
<li><strong>JavaScript Initialization</strong>: Bootstrap&rsquo;s JavaScript API automatically enables the functionality, so no extra scripts are needed.</li>
</ul>
<hr />
<h3>&nbsp;</h3>
</div>
</div>
</div>
</div>
</div>
</div>

Web Technology View More