Bootstrap 5 Tutorial

Bootstrap 5 Modal

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="6e3a6be8-a713-4f4e-91f9-f8d791116dba" 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 5: Modal</h3>
<p>The Modal component in Bootstrap 5 is a versatile overlay dialog that can be used to display additional content, alerts, forms, or other types of information without navigating away from the current page. Modals can enhance the user experience by providing contextual information or prompting for user actions.</p>
<hr />
<h3>Key Features of Bootstrap 5 Modal</h3>
<ol>
<li><strong>Flexible Structure</strong>: Modals can contain any type of content, including text, images, forms, and buttons.</li>
<li><strong>Accessibility</strong>: Designed with accessibility in mind, modals support keyboard navigation and screen readers.</li>
<li><strong>Animation</strong>: Modals feature smooth transitions when opening and closing.</li>
<li><strong>Customizable</strong>: Easily style the modal using Bootstrap's utility classes and custom CSS.</li>
<li><strong>Event Hooks</strong>: Support for custom events when opening and closing, allowing developers to execute specific functions.</li>
</ol>
<hr />
<h3>Example: Creating a Modal in Bootstrap 5</h3>
<p>Here&rsquo;s an example demonstrating how to create a simple Modal using Bootstrap 5:</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 Modal 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 trigger for modal --&gt;
    &lt;button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal"&gt;
        Launch demo modal
    &lt;/button&gt;

&lt;!-- Modal --&gt;
    &lt;div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"&gt;
        &lt;div class="modal-dialog"&gt;
            &lt;div class="modal-content"&gt;
                &lt;div class="modal-header"&gt;
                    &lt;h5 class="modal-title" id="exampleModalLabel"&gt;Modal Title&lt;/h5&gt;
                    &lt;button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"&gt;&lt;/button&gt;
                &lt;/div&gt;
                &lt;div class="modal-body"&gt;
                    This is the body of the modal. You can include any content you like here, such as forms, images, or text.
                &lt;/div&gt;
                &lt;div class="modal-footer"&gt;
                    &lt;button type="button" class="btn btn-secondary" data-bs-dismiss="modal"&gt;Close&lt;/button&gt;
                    &lt;button type="button" class="btn btn-primary"&gt;Save changes&lt;/button&gt;
                &lt;/div&gt;
            &lt;/div&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>Button Trigger</strong>: A button is created with <code>data-bs-toggle="modal"</code> and <code>data-bs-target="#exampleModal"</code> attributes, which trigger the modal to open when clicked.</li>
<li><strong>Modal Structure</strong>: The modal is contained within a <code>&lt;div&gt;</code> with the class <code>modal</code> and an ID that matches the target of the button. The <code>fade</code> class adds a transition effect.</li>
<li><strong>Modal Dialog</strong>: Inside the modal, the <code>modal-dialog</code> class defines the dialog's width and positioning.</li>
<li><strong>Modal Content</strong>: The <code>modal-content</code> class wraps the modal's header, body, and footer.
<ul>
<li><strong>Header</strong>: Contains the title and a close button.</li>
<li><strong>Body</strong>: Contains the main content of the modal.</li>
<li><strong>Footer</strong>: Contains action buttons for the user, such as closing the modal or saving changes.</li>
</ul>
</li>
</ul>
<hr />
<h3>&nbsp;</h3>
</div>
</div>
</div>
</div>
</div>
</div>

Web Technology View More