Slide Over

Pages

Users

Russell Crowe

russellcrowe@left4code.com

Johnny Depp

johnnydepp@left4code.com

Leonardo DiCaprio

leonardodicaprio@left4code.com

Sylvester Stallone

sylvesterstallone@left4code.com

Products

Blank Slide Over

Show example code

Show Slide Over

  HTMLOpenTag!-- BEGIN: Slide Over Toggle --HTMLCloseTag HTMLOpenTagdiv class="text-center"HTMLCloseTag HTMLOpenTaga href="javascript:;" data-toggle="modal" data-target="#basic-slide-over-preview" class="btn btn-primary"HTMLCloseTagShow Slide OverHTMLOpenTag/aHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag!-- END: Slide Over Toggle --HTMLCloseTag HTMLOpenTag!-- BEGIN: Slide Over Content --HTMLCloseTag HTMLOpenTagdiv id="basic-slide-over-preview" class="modal modal-slide-over" tabindex="-1" aria-hidden="true"HTMLCloseTag HTMLOpenTagdiv class="modal-dialog"HTMLCloseTag HTMLOpenTagdiv class="modal-content"HTMLCloseTag HTMLOpenTagdiv class="modal-header p-5"HTMLCloseTag HTMLOpenTagh2 class="font-medium text-base mr-auto"HTMLCloseTagBlank Slide OverHTMLOpenTag/h2HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="modal-body"HTMLCloseTag This is totally awesome blank slide over! HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag!-- END: Slide Over Content --HTMLCloseTag

Slide Over Size

Show example code

Show Small Slide Over Show Medium Slide Over Show Large Slide Over Show Superlarge Slide Over

  HTMLOpenTagdiv class="text-center"HTMLCloseTag HTMLOpenTag!-- BEGIN: Small Slide Over Toggle --HTMLCloseTag HTMLOpenTaga href="javascript:;" data-toggle="modal" data-target="#small-slide-over-size-preview" class="btn btn-primary mr-1 mb-2"HTMLCloseTagShow Small Slide OverHTMLOpenTag/aHTMLCloseTag HTMLOpenTag!-- END: Small Slide Over Toggle --HTMLCloseTag HTMLOpenTag!-- BEGIN: Medium Slide Over Toggle --HTMLCloseTag HTMLOpenTaga href="javascript:;" data-toggle="modal" data-target="#medium-slide-over-size-preview" class="btn btn-primary mr-1 mb-2"HTMLCloseTagShow Medium Slide OverHTMLOpenTag/aHTMLCloseTag HTMLOpenTag!-- END: Medium Slide Over Toggle --HTMLCloseTag HTMLOpenTag!-- BEGIN: Large Slide Over Toggle --HTMLCloseTag HTMLOpenTaga href="javascript:;" data-toggle="modal" data-target="#large-slide-over-size-preview" class="btn btn-primary mr-1 mb-2"HTMLCloseTagShow Large Slide OverHTMLOpenTag/aHTMLCloseTag HTMLOpenTag!-- END: Large Slide Over Toggle --HTMLCloseTag HTMLOpenTag!-- BEGIN: Super Large Slide Over Toggle --HTMLCloseTag HTMLOpenTaga href="javascript:;" data-toggle="modal" data-target="#superlarge-slide-over-size-preview" class="btn btn-primary mr-1 mb-2"HTMLCloseTagShow Superlarge Slide OverHTMLOpenTag/aHTMLCloseTag HTMLOpenTag!-- END: Super Large Slide Over Toggle --HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag!-- BEGIN: Small Slide Over Content --HTMLCloseTag HTMLOpenTagdiv id="small-slide-over-size-preview" class="modal modal-slide-over" tabindex="-1" aria-hidden="true"HTMLCloseTag HTMLOpenTagdiv class="modal-dialog modal-sm"HTMLCloseTag HTMLOpenTagdiv class="modal-content"HTMLCloseTag HTMLOpenTagdiv class="modal-header p-5"HTMLCloseTag HTMLOpenTagh2 class="font-medium text-base mr-auto"HTMLCloseTagSmall Slide OverHTMLOpenTag/h2HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="modal-body"HTMLCloseTag This is totally awesome small slide over! HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag!-- END: Small Slide Over Content --HTMLCloseTag HTMLOpenTag!-- BEGIN: Medium Slide Over Content --HTMLCloseTag HTMLOpenTagdiv id="medium-slide-over-size-preview" class="modal modal-slide-over" tabindex="-1" aria-hidden="true"HTMLCloseTag HTMLOpenTagdiv class="modal-dialog"HTMLCloseTag HTMLOpenTagdiv class="modal-content"HTMLCloseTag HTMLOpenTagdiv class="modal-header p-5"HTMLCloseTag HTMLOpenTagh2 class="font-medium text-base mr-auto"HTMLCloseTagMedium Slide OverHTMLOpenTag/h2HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="modal-body"HTMLCloseTag This is totally awesome medium slide over! HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag!-- END: Medium Slide Over Content --HTMLCloseTag HTMLOpenTag!-- BEGIN: Large Slide Over Content --HTMLCloseTag HTMLOpenTagdiv id="large-slide-over-size-preview" class="modal modal-slide-over" tabindex="-1" aria-hidden="true"HTMLCloseTag HTMLOpenTagdiv class="modal-dialog modal-lg"HTMLCloseTag HTMLOpenTagdiv class="modal-content"HTMLCloseTag HTMLOpenTagdiv class="modal-header p-5"HTMLCloseTag HTMLOpenTagh2 class="font-medium text-base mr-auto"HTMLCloseTagLarge Slide OverHTMLOpenTag/h2HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="modal-body"HTMLCloseTag This is totally awesome large slide over! HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag!-- END: Large Slide Over Content --HTMLCloseTag HTMLOpenTag!-- BEGIN: Super Large Slide Over Content --HTMLCloseTag HTMLOpenTagdiv id="superlarge-slide-over-size-preview" class="modal modal-slide-over" tabindex="-1" aria-hidden="true"HTMLCloseTag HTMLOpenTagdiv class="modal-dialog modal-xl"HTMLCloseTag HTMLOpenTagdiv class="modal-content"HTMLCloseTag HTMLOpenTagdiv class="modal-header p-5"HTMLCloseTag HTMLOpenTagh2 class="font-medium text-base mr-auto"HTMLCloseTagSuperlarge Slide OverHTMLOpenTag/h2HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="modal-body"HTMLCloseTag This is totally awesome superlarge slide over! HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag!-- END: Super Large Slide Over Content --HTMLCloseTag

Programmatically Show/Hide Slide Over

Show example code

Show Slide Over

  HTMLOpenTag!-- BEGIN: Show Slide Over Toggle --HTMLCloseTag HTMLOpenTagdiv class="text-center"HTMLCloseTag HTMLOpenTaga id="programmatically-show-slide-over" href="javascript:;" class="btn btn-primary mr-1 mb-2"HTMLCloseTagShow Slide OverHTMLOpenTag/aHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag!-- END: Show Slide Over Toggle --HTMLCloseTag HTMLOpenTag!-- BEGIN: Slide Over Content --HTMLCloseTag HTMLOpenTagdiv id="programmatically-slide-over" class="modal modal-slide-over" tabindex="-1" aria-hidden="true"HTMLCloseTag HTMLOpenTagdiv class="modal-dialog"HTMLCloseTag HTMLOpenTagdiv class="modal-content"HTMLCloseTag HTMLOpenTagdiv class="modal-header p-5"HTMLCloseTag HTMLOpenTagh2 class="font-medium text-base mr-auto"HTMLCloseTagProgrammatically Show/Hide Slide OverHTMLOpenTag/h2HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="modal-body p-10 text-center"HTMLCloseTag HTMLOpenTag!-- BEGIN: Hide Slide Over Toggle --HTMLCloseTag HTMLOpenTaga id="programmatically-hide-slide-over" href="javascript:;" class="btn btn-primary mr-1"HTMLCloseTagHide Slide OverHTMLOpenTag/aHTMLCloseTag HTMLOpenTag!-- END: Hide Slide Over Toggle --HTMLCloseTag HTMLOpenTag!-- BEGIN: Toggle Slide Over Toggle --HTMLCloseTag HTMLOpenTaga id="programmatically-toggle-slide-over" href="javascript:;" class="btn btn-primary mr-1 mt-2 sm:mt-0"HTMLCloseTagToggle Slide OverHTMLOpenTag/aHTMLCloseTag HTMLOpenTag!-- END: Toggle Slide Over Toggle --HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag!-- END: Slide Over Content --HTMLCloseTag

  // Show slide over cash('#programmatically-show-slide-over').on('click', function() { cash('#programmatically-slide-over').modal('show') }) // Hide slide over cash('#programmatically-hide-slide-over').on('click', function() { cash('#programmatically-slide-over').modal('hide') }) // Toggle slide over cash('#programmatically-toggle-slide-over').on('click', function() { cash('#programmatically-slide-over').modal('toggle') })

Slide Over With Close Button

Show example code

Show Slide Over

  HTMLOpenTag!-- BEGIN: Modal Toggle --HTMLCloseTag HTMLOpenTagdiv class="text-center"HTMLCloseTag HTMLOpenTaga href="javascript:;" data-toggle="modal" data-target="#button-slide-over-preview" class="btn btn-primary"HTMLCloseTagShow Slide OverHTMLOpenTag/aHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag!-- END: Modal Toggle --HTMLCloseTag HTMLOpenTag!-- BEGIN: Modal Content --HTMLCloseTag HTMLOpenTagdiv id="button-slide-over-preview" class="modal modal-slide-over" data-backdrop="static" tabindex="-1" aria-hidden="true"HTMLCloseTag HTMLOpenTagdiv class="modal-dialog"HTMLCloseTag HTMLOpenTagdiv class="modal-content"HTMLCloseTag HTMLOpenTaga data-dismiss="modal" href="javascript:;"HTMLCloseTag HTMLOpenTagi data-feather="x" class="w-8 h-8 text-gray-500"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag HTMLOpenTag/aHTMLCloseTag HTMLOpenTagdiv class="modal-header p-5"HTMLCloseTag HTMLOpenTagh2 class="font-medium text-base mr-auto"HTMLCloseTagSlide Over With Close ButtonHTMLOpenTag/h2HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="modal-body"HTMLCloseTag This is totally awesome slide over with close button! HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag!-- END: Modal Content --HTMLCloseTag

Overlapping Slide Over

Show example code

Show Slide Over

  HTMLOpenTag!-- BEGIN: Slide Over Toggle --HTMLCloseTag HTMLOpenTagdiv class="text-center"HTMLCloseTag HTMLOpenTaga href="javascript:;" data-toggle="modal" data-target="#overlapping-slide-over-preview" class="btn btn-primary"HTMLCloseTagShow Slide OverHTMLOpenTag/aHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag!-- END: Slide Over Toggle --HTMLCloseTag HTMLOpenTag!-- BEGIN: Slide Over Content --HTMLCloseTag HTMLOpenTagdiv id="overlapping-slide-over-preview" class="modal modal-slide-over" tabindex="-1" aria-hidden="true"HTMLCloseTag HTMLOpenTagdiv class="modal-dialog"HTMLCloseTag HTMLOpenTagdiv class="modal-content"HTMLCloseTag HTMLOpenTagdiv class="modal-header p-5"HTMLCloseTag HTMLOpenTagh2 class="font-medium text-base mr-auto"HTMLCloseTagOverlapping Slide OverHTMLOpenTag/h2HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="modal-body px-5 py-10"HTMLCloseTag HTMLOpenTagdiv class="text-center"HTMLCloseTag HTMLOpenTagdiv class="mb-5"HTMLCloseTagClick button bellow to show overlapping slide over!HTMLOpenTag/divHTMLCloseTag HTMLOpenTag!-- BEGIN: Overlapping Slide Over Toggle --HTMLCloseTag HTMLOpenTaga href="javascript:;" data-toggle="modal" data-target="#next-overlapping-slide-over-preview" class="btn btn-primary"HTMLCloseTagShow Overlapping Slide OverHTMLOpenTag/aHTMLCloseTag HTMLOpenTag!-- END: Overlapping Slide Over Toggle --HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag!-- BEGIN: Overlapping Slide Over Content --HTMLCloseTag HTMLOpenTagdiv id="next-overlapping-slide-over-preview" class="modal modal-slide-over" tabindex="-1" aria-hidden="true"HTMLCloseTag HTMLOpenTagdiv class="modal-dialog"HTMLCloseTag HTMLOpenTagdiv class="modal-content"HTMLCloseTag HTMLOpenTagdiv class="modal-header p-5"HTMLCloseTag HTMLOpenTagh2 class="font-medium text-base mr-auto"HTMLCloseTagOverlapping Slide OverHTMLOpenTag/h2HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="modal-body text-center"HTMLCloseTag This is totally awesome overlapping slide over! HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag!-- END: Overlapping Slide Over Content --HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag!-- END: Slide Over Content --HTMLCloseTag

Header & Footer Slide Over

Show example code

Show Slide Over

  HTMLOpenTag!-- BEGIN: Slide Over Toggle --HTMLCloseTag HTMLOpenTagdiv class="text-center"HTMLCloseTag HTMLOpenTaga href="javascript:;" data-toggle="modal" data-target="#header-footer-slide-over-preview" class="btn btn-primary"HTMLCloseTagShow Slide OverHTMLOpenTag/aHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag!-- END: Slide Over Toggle --HTMLCloseTag HTMLOpenTag!-- BEGIN: Slide Over Content --HTMLCloseTag HTMLOpenTagdiv id="header-footer-slide-over-preview" class="modal modal-slide-over" data-backdrop="static" tabindex="-1" aria-hidden="true"HTMLCloseTag HTMLOpenTagdiv class="modal-dialog"HTMLCloseTag HTMLOpenTagdiv class="modal-content"HTMLCloseTag HTMLOpenTaga data-dismiss="modal" href="javascript:;"HTMLCloseTag HTMLOpenTagi data-feather="x" class="w-8 h-8 text-gray-500"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag HTMLOpenTag/aHTMLCloseTag HTMLOpenTag!-- BEGIN: Slide Over Header --HTMLCloseTag HTMLOpenTagdiv class="modal-header"HTMLCloseTag HTMLOpenTagh2 class="font-medium text-base mr-auto"HTMLCloseTagBroadcast MessageHTMLOpenTag/h2HTMLCloseTag HTMLOpenTagbutton class="btn btn-outline-secondary hidden sm:flex"HTMLCloseTag HTMLOpenTagi data-feather="file" class="w-4 h-4 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Download Docs HTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagdiv class="dropdown sm:hidden"HTMLCloseTag HTMLOpenTaga class="dropdown-toggle w-5 h-5 block" href="javascript:;" aria-expanded="false"HTMLCloseTag HTMLOpenTagi data-feather="more-horizontal" class="w-5 h-5 text-gray-600 dark:text-gray-600"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag HTMLOpenTag/aHTMLCloseTag HTMLOpenTagdiv class="dropdown-menu w-40"HTMLCloseTag HTMLOpenTagdiv class="dropdown-menu__content box dark:bg-dark-1 p-2"HTMLCloseTag HTMLOpenTaga href="javascript:;" class="flex items-center p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"HTMLCloseTag HTMLOpenTagi data-feather="file" class="w-4 h-4 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Download Docs HTMLOpenTag/aHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag!-- END: Slide Over Header --HTMLCloseTag HTMLOpenTag!-- BEGIN: Slide Over Body --HTMLCloseTag HTMLOpenTagdiv class="modal-body"HTMLCloseTag HTMLOpenTagdivHTMLCloseTag HTMLOpenTaglabel for="modal-form-1" class="form-label"HTMLCloseTagFromHTMLOpenTag/labelHTMLCloseTag HTMLOpenTaginput id="modal-form-1" type="text" class="form-control" placeholder="example@gmail.com"HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="mt-3"HTMLCloseTag HTMLOpenTaglabel for="modal-form-2" class="form-label"HTMLCloseTagToHTMLOpenTag/labelHTMLCloseTag HTMLOpenTaginput id="modal-form-2" type="text" class="form-control" placeholder="example@gmail.com"HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="mt-3"HTMLCloseTag HTMLOpenTaglabel for="modal-form-3" class="form-label"HTMLCloseTagSubjectHTMLOpenTag/labelHTMLCloseTag HTMLOpenTaginput id="modal-form-3" type="text" class="form-control" placeholder="Important Meeting"HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="mt-3"HTMLCloseTag HTMLOpenTaglabel for="modal-form-4" class="form-label"HTMLCloseTagHas the WordsHTMLOpenTag/labelHTMLCloseTag HTMLOpenTaginput id="modal-form-4" type="text" class="form-control" placeholder="Job, Work, Documentation"HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="mt-3"HTMLCloseTag HTMLOpenTaglabel for="modal-form-5" class="form-label"HTMLCloseTagDoesn't HaveHTMLOpenTag/labelHTMLCloseTag HTMLOpenTaginput id="modal-form-5" type="text" class="form-control" placeholder="Job, Work, Documentation"HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="mt-3"HTMLCloseTag HTMLOpenTaglabel for="modal-form-6" class="form-label"HTMLCloseTagSizeHTMLOpenTag/labelHTMLCloseTag HTMLOpenTagselect id="modal-form-6" class="form-select"HTMLCloseTag HTMLOpenTagoptionHTMLCloseTag10HTMLOpenTag/optionHTMLCloseTag HTMLOpenTagoptionHTMLCloseTag25HTMLOpenTag/optionHTMLCloseTag HTMLOpenTagoptionHTMLCloseTag35HTMLOpenTag/optionHTMLCloseTag HTMLOpenTagoptionHTMLCloseTag50HTMLOpenTag/optionHTMLCloseTag HTMLOpenTag/selectHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag!-- END: Slide Over Body --HTMLCloseTag HTMLOpenTag!-- BEGIN: Slide Over Footer --HTMLCloseTag HTMLOpenTagdiv class="modal-footer text-right w-full absolute bottom-0"HTMLCloseTag HTMLOpenTagbutton type="button" data-dismiss="modal" class="btn btn-outline-secondary w-20 mr-1"HTMLCloseTagCancelHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton type="button" class="btn btn-primary w-20"HTMLCloseTagSendHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag!-- END: Slide Over Footer --HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag!-- END: Slide Over Content --HTMLCloseTag

Dark Mode