Loading...

Modal

Modal View

Create a modal view using Bootstrap by adding a <div class="modal"> container. Use .modal-dialog and .modal-content to structure the modal, and trigger it with buttons or links using data-bs-toggle="modal".

Default Modal

Display a default modal using Bootstrap by adding a <div class="modal fade"> structure. Trigger it with a button or link using data-bs-toggle="modal" and data-bs-target="#defaultModal" for a live demo experience.

Static backdrop

Create a static backdrop modal using Bootstrap by adding the data-bs-backdrop="static" attribute to your modal. This prevents the modal from closing when clicking outside of it.

Scrolling long content

Handle long content in a Bootstrap modal by adding .modal-dialog-scrollable to the <div class="modal-dialog">. This allows the modal body to scroll while keeping the header and footer fixed.

Vertically centered

Center a Bootstrap modal vertically by adding .modal-dialog-centered to the <div class="modal-dialog">. This aligns the modal in the middle of the viewport.

Tooltips and popovers

Enable tooltips and popovers inside a Bootstrap modal by initializing them with data-bs-toggle="tooltip" or data-bs-toggle="popover". This allows interactive elements within the modal to display additional information.

Fullscreen Modal

Create a fullscreen modal in Bootstrap by adding the .modal-fullscreen class to the <div class="modal-dialog">. This expands the modal to cover the entire viewport.

Modal Size

Adjust the size of a Bootstrap modal by adding size-specific classes like .modal-sm for small, .modal-lg for large, or .modal-xl for extra-large to the <div class="modal-dialog">.

Fullscreen Modals Example

Handle long content in a Bootstrap modal by adding .modal-dialog-scrollable to the <div class="modal-dialog">. This allows the modal body to scroll while keeping the header and footer fixed.

Class Availability
.modal-fullscreen Always
.modal-fullscreen-sm-down 576px
.modal-fullscreen-md-down 768px
.modal-fullscreen-lg-down 992px
.modal-fullscreen-xl-down 1200px
.modal-fullscreen-xxl-down 1400px
Draggable Modal

Make a Bootstrap modal draggable by adding the data-draggable="true" attribute to the <div class="modal"> element. This allows users to move the modal around the screen.

Animated Modal

Choose an animation from the dropdown and click Show Modal to see the Bootstrap modal open with a smooth animation effect.

Preview Settings

Theme Layouts

Defines the admin panel's layout style, allowing you to choose from different design options.

Color Mode

Choose if app's appearance should be light or dark, or follow your computer's settings.

RTL Mode

Toggle between LTR and RTL layouts to support different language directions.

Preset Themes

Choose a preset theme from out theme library.

Sidebar Colors

Sets the sidebar color scheme. Options include light, dark, or gradient styles.

Navbar Positions Options

Sets the navbar position: sticky, static, or hidden.

Navbar Type Options

Sets the navbar style: default, dark, transparent, or glass.

Font Options

Sets the fonts for headings and body text.

Font Size Options

Sets the font size: sm, md, or lg.

Rounded Options

Sets the border radius size: xs, sm, md, lg, or xl.

Container Options

Defines the container style: fluid (full-width) or boxed (fixed width).

Loader Options

Sets the page loader visibility: hidden or visible.