Modals put a focused dialog on top of the page for confirmations, forms, previews and long reads. Each example below pairs a trigger with its dialog: sizes, centering, scrolling, static backdrops, fullscreen variants and ready-made dialogs you can drop into Yaraly Labs.
1Basic modal
A trigger button and a dialog with header, body and footer. Close it with the X, the footer button, Esc or a click on the backdrop.
<button type="button" class="btn btn-primary" data-ui-toggle="modal" data-ui-target="#modal-996">Open modal</button>
<div class="modal fade" id="modal-996" tabindex="-1" aria-labelledby="modal-996-label" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title text-lg" id="modal-996-label">Good food brings people together</h2>
<button type="button" class="btn-close" data-ui-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p class="mb-0">Clear prices, honest advice and no surprises along the way.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-ui-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>2Static backdrop
With a static backdrop the dialog stays open when the user clicks outside it or presses Esc - use it when an explicit choice is required.
<button type="button" class="btn btn-outline-primary" data-ui-toggle="modal" data-ui-target="#modal-997"><i class="bi bi-lock-fill" aria-hidden="true"></i> Static backdrop</button>
<div class="modal fade" id="modal-997" tabindex="-1" aria-labelledby="modal-997-label" aria-hidden="true" data-ui-backdrop="static" data-ui-keyboard="false">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title text-lg" id="modal-997-label">Finish this step first</h2>
<button type="button" class="btn-close" data-ui-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>We listen first, then build a plan around what you actually need.</p>
<p class="small text-muted mb-0">Clicking the backdrop will not close this dialog.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-ui-dismiss="modal">Not now</button>
<button type="button" class="btn btn-primary">I understand</button>
</div>
</div>
</div>
</div>3Vertically centered
Add <code>.modal-dialog-centered</code> to place the dialog in the middle of the viewport.
<button type="button" class="btn btn-secondary" data-ui-toggle="modal" data-ui-target="#modal-998">Centered dialog</button>
<div class="modal fade" id="modal-998" tabindex="-1" aria-labelledby="modal-998-label" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title text-lg" id="modal-998-label">Right in the middle</h2>
<button type="button" class="btn-close" data-ui-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p class="mb-0">We measure success by how many guests come back and tell their friends.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-ui-dismiss="modal">Got it</button>
</div>
</div>
</div>
</div>4Scrollable body
<code>.modal-dialog-scrollable</code> keeps header and footer visible and scrolls only the body - ideal for terms or long notes.
<button type="button" class="btn btn-primary" data-ui-toggle="modal" data-ui-target="#modal-999"><i class="bi bi-file-earmark-text-fill" aria-hidden="true"></i> Read the terms</button>
<div class="modal fade" id="modal-999" tabindex="-1" aria-labelledby="modal-999-label" aria-hidden="true">
<div class="modal-dialog modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title text-lg" id="modal-999-label">Terms of service</h2>
<button type="button" class="btn-close" data-ui-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<h3 class="h6">1. Three pasta shapes to make at home</h3>
<p>Book a table online in seconds, or call us for groups of eight or more. We keep things simple, so you can focus on what matters to you. Our menu changes with the seasons and the best produce from nearby farms. Our sommelier has paired each dish with wines from small family vineyards.</p>
<h3 class="h6">2. Our chef's guide to seasonal autumn produce</h3>
<p>Order for pickup or delivery and enjoy the same dishes at home. Bread is baked every morning and pasta is rolled by hand in our kitchen. Our team has done this many times, so you never have to guess. Thousands of guests already trust us, and we work hard to keep it that way.</p>
<h3 class="h6">3. Vegan dishes worth crossing town for</h3>
<p>Children are always welcome, with a menu made just for them. Friendly people answer your questions quickly, by phone, chat or email. We listen first, then build a plan around what you actually need. We have been feeding this neighbourhood for over a decade, and we still love it.</p>
<h3 class="h6">4. Five things we learned this year</h3>
<p>Every detail is handled by people who care about getting it right. Start in minutes and get help from a real person whenever you need it. We keep things simple, so you can focus on what matters to you. Cooking classes on Saturday mornings teach you our favourite recipes.</p>
<h3 class="h6">5. How to choose the right dish</h3>
<p>Our menu changes with the seasons and the best produce from nearby farms. Children are always welcome, with a menu made just for them. Private dining rooms seat up to forty guests for birthdays and business dinners. Our team has done this many times, so you never have to guess.</p>
<h3 class="h6">6. The small habits that make a big difference</h3>
<p>Our terrace is open from spring to autumn, with heaters for cooler evenings. Every dish is cooked to order, so tell us if you would like anything changed. Thousands of guests already trust us, and we work hard to keep it that way. Book a table online in seconds, or call us for groups of eight or more.</p>
<h3 class="h6">7. Our favourite tips for busy weeks</h3>
<p>Vegan, vegetarian and gluten-free dishes are marked clearly on every menu. Bread is baked every morning and pasta is rolled by hand in our kitchen. Our sommelier has paired each dish with wines from small family vineyards.</p>
<h3 class="h6">8. The story of our wood-fired oven</h3>
<p>We measure success by how many guests come back and tell their friends. Order for pickup or delivery and enjoy the same dishes at home. Clear prices, honest advice and no surprises along the way. Children are always welcome, with a menu made just for them.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-ui-dismiss="modal">Decline</button>
<button type="button" class="btn btn-primary" data-ui-dismiss="modal">Accept</button>
</div>
</div>
</div>
</div>5Small modal
<code>.modal-sm</code> for quick questions that need little space.
<a class="btn btn-link" data-ui-toggle="modal" href="#modal-1000" role="button">Open a small modal from a link</a>
<div class="modal fade" id="modal-1000" tabindex="-1" aria-labelledby="modal-1000-label" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title text-lg" id="modal-1000-label">Quick question</h2>
<button type="button" class="btn-close" data-ui-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p class="mb-0">Keep the dashboard settings for next time?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-sm btn-outline-secondary" data-ui-dismiss="modal">No</button>
<button type="button" class="btn btn-sm btn-primary" data-ui-dismiss="modal">Yes</button>
</div>
</div>
</div>
</div>6Large modal with a table
<code>.modal-lg</code> gives tables and multi-column content room to breathe.
<button type="button" class="btn btn-outline-secondary" data-ui-toggle="modal" data-ui-target="#modal-1001"><i class="bi bi-table" aria-hidden="true"></i> View price list</button>
<div class="modal fade" id="modal-1001" tabindex="-1" aria-labelledby="modal-1001-label" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title text-lg" id="modal-1001-label">Price list</h2>
<button type="button" class="btn-close" data-ui-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="table-responsive">
<table class="table table-striped align-middle mb-0">
<thead>
<tr>
<th scope="col">Item</th>
<th scope="col">Category</th>
<th scope="col" class="text-end">Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Chef's tasting plate</td>
<td>Specials</td>
<td class="text-end">$44.00</td>
</tr>
<tr>
<td>Wood-fired pizza</td>
<td>Mains</td>
<td class="text-end">$17.00</td>
</tr>
<tr>
<td>Chocolate tart</td>
<td>Desserts</td>
<td class="text-end">$8.00</td>
</tr>
<tr>
<td>Espresso martini</td>
<td>Drinks</td>
<td class="text-end">$12.00</td>
</tr>
<tr>
<td>Grilled salmon</td>
<td>Mains</td>
<td class="text-end">$28.99</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-ui-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>7Extra large modal
<code>.modal-xl</code> fits a full card grid - for galleries, comparisons or dashboards in a dialog.
<button type="button" class="btn btn-primary" data-ui-toggle="modal" data-ui-target="#modal-1002">Browse services</button>
<div class="modal fade" id="modal-1002" tabindex="-1" aria-labelledby="modal-1002-label" aria-hidden="true">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title text-lg" id="modal-1002-label">Our services</h2>
<button type="button" class="btn-close" data-ui-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="row g-3">
<div class="col-md-4">
<div class="card h-full">
<img src="https://images.unsplash.com/photo-1559339352-11d035aa65de?auto=format&fit=crop&w=1200&h=800&q=70" class="card-img-top" alt="Private events">
<div class="card-body">
<h3 class="h6 card-title">Catering</h3>
<p class="card-text small">We keep things simple, so you can focus on what matters to you.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card h-full">
<img src="https://images.unsplash.com/photo-1625862692743-3f57873bb37c?auto=format&fit=crop&w=1200&h=800&q=70" class="card-img-top" alt="Dine-in">
<div class="card-body">
<h3 class="h6 card-title">Takeaway</h3>
<p class="card-text small">Clear prices, honest advice and no surprises along the way.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card h-full">
<img src="https://images.unsplash.com/photo-1551632436-cbf8dd35adfa?auto=format&fit=crop&w=1200&h=800&q=70" class="card-img-top" alt="Catering">
<div class="card-body">
<h3 class="h6 card-title">Cooking classes</h3>
<p class="card-text small">Bread is baked every morning and pasta is rolled by hand in our kitchen.</p>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-ui-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>8Fullscreen modal
<code>.modal-fullscreen</code> covers the whole viewport - good for editors or immersive previews.
<button type="button" class="btn btn-dark" data-ui-toggle="modal" data-ui-target="#modal-1003"><i class="bi bi-fullscreen" aria-hidden="true"></i> Fullscreen</button>
<div class="modal fade" id="modal-1003" tabindex="-1" aria-labelledby="modal-1003-label" aria-hidden="true">
<div class="modal-dialog modal-fullscreen">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title text-lg" id="modal-1003-label">Focus mode</h2>
<button type="button" class="btn-close" data-ui-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="container py-6" style="max-width:720px">
<h3 class="h4">A table for every occasion</h3>
<p class="lead">Every detail is handled by people who care about getting it right.</p>
<p>Our terrace is open from spring to autumn, with heaters for cooler evenings. Friendly people answer your questions quickly, by phone, chat or email. Cooking classes on Saturday mornings teach you our favourite recipes.</p>
<p>Every dish is cooked to order, so tell us if you would like anything changed. Our menu changes with the seasons and the best produce from nearby farms. Order for pickup or delivery and enjoy the same dishes at home. Our team has done this many times, so you never have to guess.</p>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-ui-dismiss="modal">Exit focus mode</button>
</div>
</div>
</div>
</div>9Fullscreen below a breakpoint
<code>.modal-fullscreen-md-down</code> is a normal dialog on desktops and a full screen sheet on phones.
<button type="button" class="btn btn-outline-dark" data-ui-toggle="modal" data-ui-target="#modal-1004"><i class="bi bi-phone-fill" aria-hidden="true"></i> Responsive fullscreen</button>
<div class="modal fade" id="modal-1004" tabindex="-1" aria-labelledby="modal-1004-label" aria-hidden="true">
<div class="modal-dialog modal-fullscreen-md-down">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title text-lg" id="modal-1004-label">Adapts to the screen</h2>
<button type="button" class="btn-close" data-ui-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>Thousands of guests already trust us, and we work hard to keep it that way.</p>
<p class="mb-0">Resize the window below 768 px to see the full screen version.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-ui-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>10Sign-in form
A compact login form inside a centered dialog, with labels, a remember-me checkbox and a full width submit button.
<button type="button" class="btn btn-primary" data-ui-toggle="modal" data-ui-target="#modal-1005"><i class="bi bi-box-arrow-in-right" aria-hidden="true"></i> Sign in</button>
<div class="modal fade" id="modal-1005" tabindex="-1" aria-labelledby="modal-1005-label" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header border-0 pb-0">
<h2 class="modal-title text-lg" id="modal-1005-label">Welcome back</h2>
<button type="button" class="btn-close" data-ui-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form>
<div class="mb-4">
<label for="login-email-1006" class="form-label">Email address</label>
<input type="email" class="form-control" id="login-email-1006" placeholder="you@example.com" autocomplete="email">
</div>
<div class="mb-4">
<label for="login-pass-1007" class="form-label">Password</label>
<input type="password" class="form-control" id="login-pass-1007" autocomplete="current-password">
</div>
<div class="flex justify-between items-center mb-4">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="login-remember-1008">
<label class="form-check-label" for="login-remember-1008">Remember me</label>
</div>
<a href="#" class="small">Forgot password?</a>
</div>
<button type="submit" class="btn btn-primary w-full">Sign in</button>
</form>
</div>
<div class="modal-footer justify-center border-0 pt-0">
<span class="small text-muted">New to Yaraly Labs? <a href="#">Create an account</a></span>
</div>
</div>
</div>
</div>11Sign-up form with validation
A <code>.needs-validation</code> form in a modal: required fields show feedback when the user submits.
<button type="button" class="btn btn-success" data-ui-toggle="modal" data-ui-target="#modal-1009"><i class="bi bi-person-plus-fill" aria-hidden="true"></i> Create account</button>
<div class="modal fade" id="modal-1009" tabindex="-1" aria-labelledby="modal-1009-label" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title text-lg" id="modal-1009-label">Create your account</h2>
<button type="button" class="btn-close" data-ui-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form class="needs-validation" novalidate>
<div class="mb-4">
<label for="su-name-1010" class="form-label">Full name</label>
<input type="text" class="form-control" id="su-name-1010" required>
<div class="invalid-feedback">
Please enter your name.
</div>
</div>
<div class="mb-4">
<label for="su-email-1011" class="form-label">Email</label>
<input type="email" class="form-control" id="su-email-1011" required>
<div class="invalid-feedback">
Please enter a valid email.
</div>
</div>
<div class="form-check mb-4">
<input class="form-check-input" type="checkbox" id="su-terms-1012" required>
<label class="form-check-label" for="su-terms-1012">I agree to the terms</label>
<div class="invalid-feedback">
You must agree before continuing.
</div>
</div>
<button class="btn btn-success w-full" type="submit">Create account</button>
</form>
</div>
</div>
</div>
</div>12Delete confirmation
A small centered danger dialog with an icon, a clear question and two unambiguous buttons.
<button type="button" class="btn btn-outline-danger" data-ui-toggle="modal" data-ui-target="#modal-1013"><i class="bi bi-trash-fill" aria-hidden="true"></i> Delete item</button>
<div class="modal fade" id="modal-1013" tabindex="-1" aria-labelledby="modal-1013-label" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-sm">
<div class="modal-content text-center">
<div class="modal-body p-6">
<div class="display-6 text-danger-emphasis mb-2">
<i class="bi bi-exclamation-octagon-fill" aria-hidden="true"></i>
</div>
<h2 class="h5" id="modal-1013-label">Delete Truffle pasta?</h2>
<p class="small text-muted mb-0">This removes it for everyone and cannot be undone.</p>
</div>
<div class="modal-footer flex-nowrap p-0">
<button type="button" class="btn btn-link link-secondary no-underline col-6 m-0 rounded-none border-e" data-ui-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-link link-danger font-semibold no-underline col-6 m-0 rounded-none" data-ui-dismiss="modal">Delete</button>
</div>
</div>
</div>
</div>13Image lightbox
A thumbnail opens a large borderless modal with the full image and a caption.
<button type="button" class="btn p-0 border-0" data-ui-toggle="modal" data-ui-target="#modal-1014" aria-label="Open image"><img src="https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?auto=format&fit=crop&w=1200&h=800&q=70" class="img-thumbnail" style="max-width:220px" alt="Private events"></button>
<div class="modal fade" id="modal-1014" tabindex="-1" aria-label="Private events" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-centered">
<div class="modal-content bg-dark text-white border-0">
<div class="modal-body p-0 relative">
<button type="button" class="btn-close btn-close-white absolute top-0 end-0 m-4" data-ui-dismiss="modal" aria-label="Close"></button>
<img src="https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?auto=format&fit=crop&w=1200&h=800&q=70" class="img-fluid w-full rounded-t-md" alt="Private events">
</div>
<div class="p-4 small">
<i class="bi bi-camera-fill" aria-hidden="true"></i> Book a table online in seconds, or call us for groups of eight or more.
</div>
</div>
</div>
</div>14Tabs inside a modal
Group related settings with tabs so the dialog stays short.
<button type="button" class="btn btn-outline-primary" data-ui-toggle="modal" data-ui-target="#modal-1015"><i class="bi bi-gear-fill" aria-hidden="true"></i> Preferences</button>
<div class="modal fade" id="modal-1015" tabindex="-1" aria-labelledby="modal-1015-label" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title text-lg" id="modal-1015-label">Preferences</h2>
<button type="button" class="btn-close" data-ui-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<ul class="nav nav-tabs mb-4" role="tablist">
<li class="nav-item" role="presentation"><button class="nav-link active" id="mt-1016-tab" data-ui-toggle="tab" data-ui-target="#mt-1016" type="button" role="tab" aria-controls="mt-1016" aria-selected="true">General</button></li>
<li class="nav-item" role="presentation"><button class="nav-link" id="mt-1017-tab" data-ui-toggle="tab" data-ui-target="#mt-1017" type="button" role="tab" aria-controls="mt-1017" aria-selected="false">Alerts</button></li>
<li class="nav-item" role="presentation"><button class="nav-link" id="mt-1018-tab" data-ui-toggle="tab" data-ui-target="#mt-1018" type="button" role="tab" aria-controls="mt-1018" aria-selected="false">Privacy</button></li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="mt-1016" role="tabpanel" aria-labelledby="mt-1016-tab" tabindex="0">
<p class="mb-0">We listen first, then build a plan around what you actually need.</p>
</div>
<div class="tab-pane fade" id="mt-1017" role="tabpanel" aria-labelledby="mt-1017-tab" tabindex="0">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="mt-1016-sw" checked>
<label class="form-check-label" for="mt-1016-sw">Email me about updates</label>
</div>
</div>
<div class="tab-pane fade" id="mt-1018" role="tabpanel" aria-labelledby="mt-1018-tab" tabindex="0">
<p class="mb-0">We measure success by how many guests come back and tell their friends.</p>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-ui-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save</button>
</div>
</div>
</div>
</div>15Toggle between modals
A button inside the first dialog opens the second one - handy for multi-step flows without stacking dialogs.
<button type="button" class="btn btn-primary" data-ui-toggle="modal" data-ui-target="#modal-1019">Start step 1</button>
<div class="modal fade" id="modal-1019" tabindex="-1" aria-labelledby="modal-1019-label" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title text-lg" id="modal-1019-label">Step 1 of 2</h2>
<button type="button" class="btn-close" data-ui-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p class="mb-0">Vegan, vegetarian and gluten-free dishes are marked clearly on every menu.</p>
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="button" data-ui-target="#modal-1020" data-ui-toggle="modal">Continue <i class="bi bi-arrow-right" aria-hidden="true"></i></button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="modal-1020" tabindex="-1" aria-labelledby="modal-1020-label" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title text-lg" id="modal-1020-label">Step 2 of 2</h2>
<button type="button" class="btn-close" data-ui-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p class="mb-0">Start in minutes and get help from a real person whenever you need it.</p>
</div>
<div class="modal-footer">
<button class="btn btn-outline-secondary" type="button" data-ui-target="#modal-1019" data-ui-toggle="modal"><i class="bi bi-arrow-left" aria-hidden="true"></i> Back</button>
<button class="btn btn-success" type="button" data-ui-dismiss="modal">Finish</button>
</div>
</div>
</div>
</div>16Newsletter sign-up
A header-less promotional dialog with a big icon and an inline email form.
<button type="button" class="btn btn-warning" data-ui-toggle="modal" data-ui-target="#modal-1021"><i class="bi bi-envelope-paper-fill" aria-hidden="true"></i> Subscribe</button>
<div class="modal fade" id="modal-1021" tabindex="-1" aria-labelledby="modal-1021-label" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content text-center p-4">
<div class="text-end">
<button type="button" class="btn-close" data-ui-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body pt-0">
<div class="display-5 text-primary-ink mb-4">
<i class="bi bi-envelope-heart-fill" aria-hidden="true"></i>
</div>
<h2 class="h4" id="modal-1021-label">Get the Yaraly Labs digest</h2>
<p class="text-muted">Private dining rooms seat up to forty guests for birthdays and business dinners.</p>
<form class="flex flex-col sm:flex-row gap-2">
<label for="nl-email-1022" class="sr-only">Email address</label>
<input type="email" class="form-control" id="nl-email-1022" placeholder="you@example.com">
<button class="btn btn-primary whitespace-nowrap" type="submit">Join now</button>
</form>
<p class="small text-muted mt-4 mb-0">One email a month. Unsubscribe any time.</p>
</div>
</div>
</div>
</div>17Product quick view
A two-column dialog: image on the left, price, rating and add-to-cart on the right; stacks on phones.
<button type="button" class="btn btn-outline-dark" data-ui-toggle="modal" data-ui-target="#modal-1023"><i class="bi bi-eye" aria-hidden="true"></i> Quick view</button>
<div class="modal fade" id="modal-1023" tabindex="-1" aria-labelledby="modal-1023-label" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title text-lg" id="modal-1023-label">Slow-cooked lamb</h2>
<button type="button" class="btn-close" data-ui-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="row g-4 items-center">
<div class="col-md-6">
<img src="../assets/img/product-9.svg" class="img-fluid rounded-md" alt="Slow-cooked lamb">
</div>
<div class="col-md-6">
<span class="badge text-bg-secondary mb-2">Specials</span>
<p class="text-2xl font-bold mb-1">$31.99</p>
<p class="text-warning-emphasis mb-2"><i class="bi bi-star-fill" aria-hidden="true"></i><i class="bi bi-star-fill" aria-hidden="true"></i><i class="bi bi-star-fill" aria-hidden="true"></i><i class="bi bi-star-fill" aria-hidden="true"></i><i class="bi bi-star-half" aria-hidden="true"></i> <span class="text-muted small">(262 reviews)</span></p>
<p class="text-muted">Our sommelier has paired each dish with wines from small family vineyards.</p>
<div class="flex gap-2">
<label for="qv-qty-1024" class="sr-only">Quantity</label>
<input type="number" class="form-control" id="qv-qty-1024" value="1" min="1" style="max-width:5rem">
<button type="button" class="btn btn-primary grow"><i class="bi bi-cart-plus-fill" aria-hidden="true"></i> Add to cart</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>18Grid inside the body
Use <code>.container-fluid</code> and rows in the modal body to lay out content in columns.
<button type="button" class="btn btn-info" data-ui-toggle="modal" data-ui-target="#modal-1025"><i class="bi bi-grid-fill" aria-hidden="true"></i> Grid layout</button>
<div class="modal fade" id="modal-1025" tabindex="-1" aria-labelledby="modal-1025-label" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title text-lg" id="modal-1025-label">Plan overview</h2>
<button type="button" class="btn-close" data-ui-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="container-fluid">
<div class="row g-3">
<div class="col-md-4">
<div class="p-4 bg-surface-3 rounded-md h-full">
<div class="text-xl text-primary-ink">
<i class="bi bi-lightning-charge-fill" aria-hidden="true"></i>
</div>
<h3 class="h6">Vegan options</h3>
<p class="small mb-0">We have been feeding this neighbourhood for over a decade, and we still love it.</p>
</div>
</div>
<div class="col-md-4">
<div class="p-4 bg-surface-3 rounded-md h-full">
<div class="text-xl text-primary-ink">
<i class="bi bi-shield-check" aria-hidden="true"></i>
</div>
<h3 class="h6">Kid friendly</h3>
<p class="small mb-0">Our menu changes with the seasons and the best produce from nearby farms.</p>
</div>
</div>
<div class="col-md-4">
<div class="p-4 bg-surface-3 rounded-md h-full">
<div class="text-xl text-primary-ink">
<i class="bi bi-graph-up" aria-hidden="true"></i>
</div>
<h3 class="h6">Local ingredients</h3>
<p class="small mb-0">Bread is baked every morning and pasta is rolled by hand in our kitchen.</p>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-ui-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>19Success dialog
Confirm a completed action with a large check mark, a summary and a single next step.
<button type="button" class="btn btn-success" data-ui-toggle="modal" data-ui-target="#modal-1026"><i class="bi bi-credit-card-fill" aria-hidden="true"></i> Pay $316.97</button>
<div class="modal fade" id="modal-1026" tabindex="-1" aria-labelledby="modal-1026-label" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content text-center">
<div class="modal-body p-12">
<div class="display-3 text-success-emphasis mb-4">
<i class="bi bi-check-circle-fill" aria-hidden="true"></i>
</div>
<h2 class="h4" id="modal-1026-label">Payment received</h2>
<p class="text-muted mb-1">Order #TX-4853 is confirmed.</p>
<p class="small text-muted">A receipt is on its way to your inbox.</p>
<button type="button" class="btn btn-success px-6" data-ui-dismiss="modal">Continue</button>
</div>
</div>
</div>
</div>20Share dialog
Social share buttons plus a read-only link with a copy button.
<button type="button" class="btn btn-outline-primary" data-ui-toggle="modal" data-ui-target="#modal-1027"><i class="bi bi-share-fill" aria-hidden="true"></i> Share</button>
<div class="modal fade" id="modal-1027" tabindex="-1" aria-labelledby="modal-1027-label" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title text-lg" id="modal-1027-label">Share this page</h2>
<button type="button" class="btn-close" data-ui-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="flex justify-around mb-6 text-center">
<a href="#" class="link-body-emphasis no-underline"><span class="block text-2xl"><i class="bi bi-envelope-fill" aria-hidden="true"></i></span><small>Email</small></a><a href="#" class="link-body-emphasis no-underline"><span class="block text-2xl"><i class="bi bi-chat-dots-fill" aria-hidden="true"></i></span><small>Message</small></a><a href="#" class="link-body-emphasis no-underline"><span class="block text-2xl"><i class="bi bi-megaphone-fill" aria-hidden="true"></i></span><small>Post</small></a><a href="#" class="link-body-emphasis no-underline"><span class="block text-2xl"><i class="bi bi-qr-code" aria-hidden="true"></i></span><small>QR code</small></a>
</div>
<label for="share-link-1028" class="form-label small">Page link</label>
<div class="input-group">
<input type="text" class="form-control" id="share-link-1028" value="example.com/yaraly-labs/271" readonly>
<button class="btn btn-outline-secondary" type="button" data-demo-copy="example.com/yaraly-labs/271"><i class="bi bi-copy" aria-hidden="true"></i> Copy</button>
</div>
</div>
</div>
</div>
</div>