Rubick Bootstrap HTML Admin Template
Rubick Tailwind HTML Admin Template Rubick

Modal

Blank Modal

  HTMLOpenTag!-- BEGIN: Modal Toggle --HTMLCloseTag HTMLOpenTagdiv class="text-center"HTMLCloseTag HTMLOpenTaga href="javascript:;" data-bs-toggle="modal" data-bs-target="#basic-modal-preview" class="btn btn-primary"HTMLCloseTagShow ModalHTMLOpenTag/aHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag!-- END: Modal Toggle --HTMLCloseTag HTMLOpenTag!-- BEGIN: Modal Content --HTMLCloseTag HTMLOpenTagdiv id="basic-modal-preview" class="modal fade" tabindex="-1" aria-hidden="true"HTMLCloseTag HTMLOpenTagdiv class="modal-dialog"HTMLCloseTag HTMLOpenTagdiv class="modal-content"HTMLCloseTag HTMLOpenTagdiv class="modal-body p-10 text-center"HTMLCloseTag This is totally awesome blank modal! HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag!-- END: Modal Content --HTMLCloseTag  

Modal Size

Programmatically Show/Hide Modal

  HTMLOpenTag!-- BEGIN: Show Modal Toggle --HTMLCloseTag HTMLOpenTagdiv class="text-center"HTMLCloseTag HTMLOpenTaga id="programmatically-show-modal" href="javascript:;" class="btn btn-primary me-1 mb-2"HTMLCloseTagShow ModalHTMLOpenTag/aHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag!-- END: Show Modal Toggle --HTMLCloseTag HTMLOpenTag!-- BEGIN: Modal Content --HTMLCloseTag HTMLOpenTagdiv id="programmatically-modal" class="modal fade" tabindex="-1" aria-hidden="true"HTMLCloseTag HTMLOpenTagdiv class="modal-dialog"HTMLCloseTag HTMLOpenTagdiv class="modal-content"HTMLCloseTag HTMLOpenTagdiv class="modal-body p-10 text-center"HTMLCloseTag HTMLOpenTag!-- BEGIN: Hide Modal Toggle --HTMLCloseTag HTMLOpenTaga id="programmatically-hide-modal" href="javascript:;" class="btn btn-primary me-1"HTMLCloseTagHide ModalHTMLOpenTag/aHTMLCloseTag HTMLOpenTag!-- END: Hide Modal Toggle --HTMLCloseTag HTMLOpenTag!-- BEGIN: Toggle Modal Toggle --HTMLCloseTag HTMLOpenTaga id="programmatically-toggle-modal" href="javascript:;" class="btn btn-primary me-1"HTMLCloseTagToggle ModalHTMLOpenTag/aHTMLCloseTag HTMLOpenTag!-- END: Toggle Modal Toggle --HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag!-- END: Modal Content --HTMLCloseTag  
  let modal = new bootstrap.Modal(cash("#programmatically-modal")[0]); // Show modal cash("#programmatically-show-modal").on("click", function () { modal.show(); }); // Hide modal cash("#programmatically-hide-modal").on("click", function () { modal.hide(); }); // Toggle modal cash("#programmatically-toggle-modal").on("click", function () { modal.toggle(); });  

Warning Modal

  HTMLOpenTag!-- BEGIN: Modal Toggle --HTMLCloseTag HTMLOpenTagdiv class="text-center"HTMLCloseTag HTMLOpenTaga href="javascript:;" data-bs-toggle="modal" data-bs-target="#warning-modal-preview" class="btn btn-primary"HTMLCloseTagShow ModalHTMLOpenTag/aHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag!-- END: Modal Toggle --HTMLCloseTag HTMLOpenTag!-- BEGIN: Modal Content --HTMLCloseTag HTMLOpenTagdiv id="warning-modal-preview" class="modal fade" tabindex="-1" aria-hidden="true"HTMLCloseTag HTMLOpenTagdiv class="modal-dialog"HTMLCloseTag HTMLOpenTagdiv class="modal-content"HTMLCloseTag HTMLOpenTagdiv class="modal-body p-0"HTMLCloseTag HTMLOpenTagdiv class="p-5 text-center"HTMLCloseTag HTMLOpenTagi data-feather="x-circle" class="w-16 h-16 text-theme-12 mx-auto mt-3"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag HTMLOpenTagdiv class="fs-3xl mt-5"HTMLCloseTagOops...HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="text-gray-600 mt-2"HTMLCloseTagSomething went wrong!HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="px-5 pb-8 text-center"HTMLCloseTag HTMLOpenTagbutton type="button" data-bs-dismiss="modal" class="btn w-24 btn-primary"HTMLCloseTagOkHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="p-5 text-center border-top border-gray-200 dark-border-dark-5"HTMLCloseTag HTMLOpenTaga href="" class="text-theme-1 dark-text-theme-10"HTMLCloseTagWhy do I have this issue?HTMLOpenTag/aHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag!-- END: Modal Content --HTMLCloseTag  

Modal With Close Button

  HTMLOpenTag!-- BEGIN: Modal Toggle --HTMLCloseTag HTMLOpenTagdiv class="text-center"HTMLCloseTag HTMLOpenTaga href="javascript:;" data-bs-toggle="modal" data-bs-target="#button-modal-preview" class="btn btn-primary"HTMLCloseTagShow ModalHTMLOpenTag/aHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag!-- END: Modal Toggle --HTMLCloseTag HTMLOpenTag!-- BEGIN: Modal Content --HTMLCloseTag HTMLOpenTagdiv id="button-modal-preview" class="modal fade" tabindex="-1" aria-hidden="true"HTMLCloseTag HTMLOpenTagdiv class="modal-dialog"HTMLCloseTag HTMLOpenTagdiv class="modal-content"HTMLCloseTag HTMLOpenTagdiv class="modal-body p-0"HTMLCloseTag HTMLOpenTaga data-bs-dismiss="modal" href="javascript:;" class="position-absolute end-0 top-0 mt-3 me-3"HTMLCloseTag HTMLOpenTagi data-feather="x" class="w-8 h-8 text-gray-500"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag HTMLOpenTag/aHTMLCloseTag HTMLOpenTagdiv class="p-5 text-center"HTMLCloseTag HTMLOpenTagi data-feather="check-circle" class="w-16 h-16 text-theme-9 mx-auto mt-3"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag HTMLOpenTagdiv class="fs-3xl mt-5"HTMLCloseTagModal ExampleHTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="text-gray-600 mt-2"HTMLCloseTagModal with close buttonHTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="px-5 pb-8 text-center"HTMLCloseTag HTMLOpenTagbutton type="button" data-bs-dismiss="modal" class="btn btn-primary w-24"HTMLCloseTagOkHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag!-- END: Modal Content --HTMLCloseTag  

Static Backdrop Modal

  HTMLOpenTag!-- BEGIN: Modal Toggle --HTMLCloseTag HTMLOpenTagdiv class="text-center"HTMLCloseTag HTMLOpenTaga href="javascript:;" data-bs-toggle="modal" data-bs-target="#static-backdrop-modal-preview" class="btn btn-primary"HTMLCloseTagShow ModalHTMLOpenTag/aHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag!-- END: Modal Toggle --HTMLCloseTag HTMLOpenTag!-- BEGIN: Modal Content --HTMLCloseTag HTMLOpenTagdiv id="static-backdrop-modal-preview" class="modal fade" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-hidden="true"HTMLCloseTag HTMLOpenTagdiv class="modal-dialog"HTMLCloseTag HTMLOpenTagdiv class="modal-content"HTMLCloseTag HTMLOpenTagdiv class="modal-body px-5 py-10"HTMLCloseTag HTMLOpenTagdiv class="text-center"HTMLCloseTag HTMLOpenTagdiv class="mb-5"HTMLCloseTagI will not close if you click outside me. Don't even try to press escape key.HTMLOpenTag/divHTMLCloseTag HTMLOpenTagbutton type="button" data-bs-dismiss="modal" class="btn btn-primary w-24"HTMLCloseTagOkHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag!-- END: Modal Content --HTMLCloseTag  

Overlapping Modal

  HTMLOpenTag!-- BEGIN: Modal Toggle --HTMLCloseTag HTMLOpenTagdiv class="text-center"HTMLCloseTag HTMLOpenTaga href="javascript:;" data-bs-toggle="modal" data-bs-target="#overlapping-modal-preview" class="btn btn-primary"HTMLCloseTagShow ModalHTMLOpenTag/aHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag!-- END: Modal Toggle --HTMLCloseTag HTMLOpenTag!-- BEGIN: Modal Content --HTMLCloseTag HTMLOpenTagdiv id="overlapping-modal-preview" class="modal fade" tabindex="-1" aria-hidden="true"HTMLCloseTag HTMLOpenTagdiv class="modal-dialog"HTMLCloseTag HTMLOpenTagdiv class="modal-content"HTMLCloseTag HTMLOpenTagdiv class="modal-body px-5 py-10"HTMLCloseTag HTMLOpenTagdiv class="text-center"HTMLCloseTag HTMLOpenTagdiv class="mb-5"HTMLCloseTagClick button bellow to show overlapping modal!HTMLOpenTag/divHTMLCloseTag HTMLOpenTag!-- BEGIN: Overlapping Modal Toggle --HTMLCloseTag HTMLOpenTaga href="javascript:;" data-bs-toggle="modal" data-bs-target="#next-overlapping-modal-preview" class="btn btn-primary"HTMLCloseTagShow Overlapping ModalHTMLOpenTag/aHTMLCloseTag HTMLOpenTag!-- END: Overlapping Modal Toggle --HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag!-- BEGIN: Overlapping Modal Content --HTMLCloseTag HTMLOpenTagdiv id="next-overlapping-modal-preview" class="modal fade" tabindex="-1" aria-hidden="true"HTMLCloseTag HTMLOpenTagdiv class="modal-dialog"HTMLCloseTag HTMLOpenTagdiv class="modal-content"HTMLCloseTag HTMLOpenTagdiv class="modal-body text-center"HTMLCloseTag This is totally awesome overlapping modal! HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag!-- END: Overlapping Modal Content --HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag!-- END: Modal Content --HTMLCloseTag  

Header & Footer Modal

Delete Modal

  HTMLOpenTag!-- BEGIN: Modal Toggle --HTMLCloseTag HTMLOpenTagdiv class="text-center"HTMLCloseTag HTMLOpenTaga href="javascript:;" data-bs-toggle="modal" data-bs-target="#delete-modal-preview" class="btn btn-primary"HTMLCloseTagShow ModalHTMLOpenTag/aHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag!-- END: Modal Toggle --HTMLCloseTag HTMLOpenTag!-- BEGIN: Modal Content --HTMLCloseTag HTMLOpenTagdiv id="delete-modal-preview" class="modal fade" tabindex="-1" aria-hidden="true"HTMLCloseTag HTMLOpenTagdiv class="modal-dialog"HTMLCloseTag HTMLOpenTagdiv class="modal-content"HTMLCloseTag HTMLOpenTagdiv class="modal-body p-0"HTMLCloseTag HTMLOpenTagdiv class="p-5 text-center"HTMLCloseTag HTMLOpenTagi data-feather="x-circle" class="w-16 h-16 text-theme-6 mx-auto mt-3"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag HTMLOpenTagdiv class="fs-3xl mt-5"HTMLCloseTagAre you sure?HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="text-gray-600 mt-2"HTMLCloseTagDo you really want to delete these records? HTMLOpenTagbrHTMLCloseTagThis process cannot be undone.HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="px-5 pb-8 text-center"HTMLCloseTag HTMLOpenTagbutton type="button" data-bs-dismiss="modal" class="btn btn-outline-secondary w-24 me-1"HTMLCloseTagCancelHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton type="button" class="btn btn-danger w-24"HTMLCloseTagDeleteHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag!-- END: Modal Content --HTMLCloseTag  

Success Modal

  HTMLOpenTag!-- BEGIN: Modal Toggle --HTMLCloseTag HTMLOpenTagdiv class="text-center"HTMLCloseTag HTMLOpenTaga href="javascript:;" data-bs-toggle="modal" data-bs-target="#success-modal-preview" class="btn btn-primary"HTMLCloseTagShow ModalHTMLOpenTag/aHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag!-- END: Modal Toggle --HTMLCloseTag HTMLOpenTag!-- BEGIN: Modal Content --HTMLCloseTag HTMLOpenTagdiv id="success-modal-preview" class="modal fade" tabindex="-1" aria-hidden="true"HTMLCloseTag HTMLOpenTagdiv class="modal-dialog"HTMLCloseTag HTMLOpenTagdiv class="modal-content"HTMLCloseTag HTMLOpenTagdiv class="modal-body p-0"HTMLCloseTag HTMLOpenTagdiv class="p-5 text-center"HTMLCloseTag HTMLOpenTagi data-feather="check-circle" class="w-16 h-16 text-theme-9 mx-auto mt-3"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag HTMLOpenTagdiv class="fs-3xl mt-5"HTMLCloseTagGood job!HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="text-gray-600 mt-2"HTMLCloseTagYou clicked the button!HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="px-5 pb-8 text-center"HTMLCloseTag HTMLOpenTagbutton type="button" data-bs-dismiss="modal" class="btn btn-primary w-24"HTMLCloseTagOkHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag!-- END: Modal Content --HTMLCloseTag  

Tiny Slider Modal

  HTMLOpenTag!-- BEGIN: Modal Toggle --HTMLCloseTag HTMLOpenTagdiv class="text-center"HTMLCloseTag HTMLOpenTaga href="javascript:;" data-bs-toggle="modal" data-bs-target="#tiny-slider-modal-preview" class="btn btn-primary"HTMLCloseTagShow ModalHTMLOpenTag/aHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag!-- END: Modal Toggle --HTMLCloseTag HTMLOpenTag!-- BEGIN: Modal Content --HTMLCloseTag HTMLOpenTagdiv id="tiny-slider-modal-preview" class="modal fade" tabindex="-1" aria-hidden="true"HTMLCloseTag HTMLOpenTagdiv class="modal-dialog"HTMLCloseTag HTMLOpenTagdiv class="modal-content"HTMLCloseTag HTMLOpenTagdiv class="modal-body"HTMLCloseTag HTMLOpenTagdiv class="mx-6"HTMLCloseTag HTMLOpenTagdiv class="center-mode"HTMLCloseTag HTMLOpenTagdiv class="h-56 px-2"HTMLCloseTag HTMLOpenTagdiv class="h-full image-fit rounded-2 overflow-hidden"HTMLCloseTag HTMLOpenTagimg alt="Rubick Bootstrap HTML Admin Template" src="dist/images/preview-14.jpg" /HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="h-56 px-2"HTMLCloseTag HTMLOpenTagdiv class="h-full image-fit rounded-2 overflow-hidden"HTMLCloseTag HTMLOpenTagimg alt="Rubick Bootstrap HTML Admin Template" src="dist/images/preview-10.jpg" /HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="h-56 px-2"HTMLCloseTag HTMLOpenTagdiv class="h-full image-fit rounded-2 overflow-hidden"HTMLCloseTag HTMLOpenTagimg alt="Rubick Bootstrap HTML Admin Template" src="dist/images/preview-10.jpg" /HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="h-56 px-2"HTMLCloseTag HTMLOpenTagdiv class="h-full image-fit rounded-2 overflow-hidden"HTMLCloseTag HTMLOpenTagimg alt="Rubick Bootstrap HTML Admin Template" src="dist/images/preview-2.jpg" /HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag!-- END: Modal Content --HTMLCloseTag  
Dark Mode