Rubick Bootstrap HTML Admin Template
Rubick Tailwind HTML Admin Template Rubick

Slide Over

Blank Slide Over

Blank Slide Over
This is totally awesome blank slide over!
  HTMLOpenTag!-- BEGIN: Slide Over Toggle --HTMLCloseTag HTMLOpenTagdiv class="text-center"HTMLCloseTag HTMLOpenTaga data-bs-toggle="offcanvas" href="#basic-slide-over-preview" role="button" aria-controls="basicSlideOver" class="btn btn-primary"HTMLCloseTagShow Slide OverHTMLOpenTag/aHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag!-- END: Slide Over Toggle --HTMLCloseTag HTMLOpenTag!-- BEGIN: Slide Over Content --HTMLCloseTag HTMLOpenTagdiv class="offcanvas offcanvas-end" tabindex="-1" id="basic-slide-over-preview" aria-labelledby="basicSlideOver"HTMLCloseTag HTMLOpenTagdiv class="offcanvas-header p-5"HTMLCloseTag HTMLOpenTagh5 class="offcanvas-title fw-medium fs-base"HTMLCloseTagBlank Slide OverHTMLOpenTag/h5HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="offcanvas-body"HTMLCloseTag This is totally awesome blank slide over! HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag!-- END: Slide Over Content --HTMLCloseTag  

Slide Over Size

Small Slide Over
This is totally awesome small slide over!
Medium Slide Over
This is totally awesome medium slide over!
Large Slide Over
This is totally awesome large slide over!
Superlarge Slide Over
This is totally awesome superlarge slide over!
  HTMLOpenTagdiv class="text-center"HTMLCloseTag HTMLOpenTag!-- BEGIN: Small Slide Over Toggle --HTMLCloseTag HTMLOpenTaga data-bs-toggle="offcanvas" href="#small-slide-over-size-preview" role="button" aria-controls="basicSlideOver" class="btn btn-primary me-1 mb-2"HTMLCloseTagShow Small Slide OverHTMLOpenTag/aHTMLCloseTag HTMLOpenTag!-- END: Small Slide Over Toggle --HTMLCloseTag HTMLOpenTag!-- BEGIN: Medium Slide Over Toggle --HTMLCloseTag HTMLOpenTaga data-bs-toggle="offcanvas" href="#medium-slide-over-size-preview" role="button" aria-controls="basicSlideOver" class="btn btn-primary me-1 mb-2"HTMLCloseTagShow Medium Slide OverHTMLOpenTag/aHTMLCloseTag HTMLOpenTag!-- END: Medium Slide Over Toggle --HTMLCloseTag HTMLOpenTag!-- BEGIN: Large Slide Over Toggle --HTMLCloseTag HTMLOpenTaga data-bs-toggle="offcanvas" href="#large-slide-over-size-preview" role="button" aria-controls="basicSlideOver" class="btn btn-primary me-1 mb-2"HTMLCloseTagShow Large Slide OverHTMLOpenTag/aHTMLCloseTag HTMLOpenTag!-- END: Large Slide Over Toggle --HTMLCloseTag HTMLOpenTag!-- BEGIN: Super Large Slide Over Toggle --HTMLCloseTag HTMLOpenTaga data-bs-toggle="offcanvas" href="#superlarge-slide-over-size-preview" role="button" aria-controls="basicSlideOver" class="btn btn-primary me-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 class="offcanvas offcanvas-end offcanvas-sm" tabindex="-1" id="small-slide-over-size-preview" aria-labelledby="smallSlideOver"HTMLCloseTag HTMLOpenTagdiv class="offcanvas-header p-5"HTMLCloseTag HTMLOpenTagh5 class="offcanvas-title fw-medium fs-base"HTMLCloseTagSmall Slide OverHTMLOpenTag/h5HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="offcanvas-body"HTMLCloseTag This is totally awesome small slide over! HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag!-- END: Small Slide Over Content --HTMLCloseTag HTMLOpenTag!-- BEGIN: Medium Slide Over Content --HTMLCloseTag HTMLOpenTagdiv class="offcanvas offcanvas-end" tabindex="-1" id="medium-slide-over-size-preview" aria-labelledby="mediumSlideOver"HTMLCloseTag HTMLOpenTagdiv class="offcanvas-header p-5"HTMLCloseTag HTMLOpenTagh5 class="offcanvas-title fw-medium fs-base"HTMLCloseTagMedium Slide OverHTMLOpenTag/h5HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="offcanvas-body"HTMLCloseTag This is totally awesome medium slide over! HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag!-- END: Medium Slide Over Content --HTMLCloseTag HTMLOpenTag!-- BEGIN: Large Slide Over Content --HTMLCloseTag HTMLOpenTagdiv class="offcanvas offcanvas-end offcanvas-lg" tabindex="-1" id="large-slide-over-size-preview" aria-labelledby="largeSlideOver"HTMLCloseTag HTMLOpenTagdiv class="offcanvas-header p-5"HTMLCloseTag HTMLOpenTagh5 class="offcanvas-title fw-medium fs-base"HTMLCloseTagLarge Slide OverHTMLOpenTag/h5HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="offcanvas-body"HTMLCloseTag This is totally awesome large slide over! HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag!-- END: Large Slide Over Content --HTMLCloseTag HTMLOpenTag!-- BEGIN: Super Large Slide Over Content --HTMLCloseTag HTMLOpenTagdiv class="offcanvas offcanvas-end offcanvas-xl" tabindex="-1" id="superlarge-slide-over-size-preview" aria-labelledby="superlargeSlideOver"HTMLCloseTag HTMLOpenTagdiv class="offcanvas-header p-5"HTMLCloseTag HTMLOpenTagh5 class="offcanvas-title fw-medium fs-base"HTMLCloseTagSuperlarge Slide OverHTMLOpenTag/h5HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="offcanvas-body"HTMLCloseTag This is totally awesome superlarge slide over! HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag!-- END: Super Large Slide Over Content --HTMLCloseTag  

Programmatically Show/Hide Slide Over

Programmatically Show/Hide 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 me-1 mb-2"HTMLCloseTagShow Slide OverHTMLOpenTag/aHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag!-- END: Show Slide Over Toggle --HTMLCloseTag HTMLOpenTag!-- BEGIN: Slide Over Content --HTMLCloseTag HTMLOpenTagdiv class="offcanvas offcanvas-end" tabindex="-1" id="programmatically-slide-over"HTMLCloseTag HTMLOpenTagdiv class="offcanvas-header p-5"HTMLCloseTag HTMLOpenTagh5 class="offcanvas-title fw-medium fs-base"HTMLCloseTagProgrammatically Show/Hide Slide OverHTMLOpenTag/h5HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="offcanvas-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 me-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 me-1 mt-2 mt-sm-0"HTMLCloseTagToggle Slide OverHTMLOpenTag/aHTMLCloseTag HTMLOpenTag!-- END: Toggle Slide Over Toggle --HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag!-- END: Slide Over Content --HTMLCloseTag  
  let slideover = new bootstrap.Offcanvas( cash("#programmatically-slide-over")[0] ); // Show slideover cash("#programmatically-show-slide-over").on("click", function () { slideover.show(); }); // Hide slideover cash("#programmatically-hide-slide-over").on("click", function () { slideover.hide(); }); // Toggle slideover cash("#programmatically-toggle-slide-over").on("click", function () { slideover.toggle(); });  

Slide Over With Close Button

Slide Over With Close Button
This is totally awesome slide over with close button!
  HTMLOpenTag!-- BEGIN: Modal Toggle --HTMLCloseTag HTMLOpenTagdiv class="text-center"HTMLCloseTag HTMLOpenTaga data-bs-toggle="offcanvas" href="#button-slide-over-preview" role="button" aria-controls="buttonSlideOver" class="btn btn-primary"HTMLCloseTagShow Slide OverHTMLOpenTag/aHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag!-- END: Modal Toggle --HTMLCloseTag HTMLOpenTag!-- BEGIN: Modal Content --HTMLCloseTag HTMLOpenTagdiv class="offcanvas offcanvas-end" tabindex="-1" id="button-slide-over-preview" aria-labelledby="buttonSlideOver"HTMLCloseTag HTMLOpenTagdiv class="offcanvas-header p-5"HTMLCloseTag HTMLOpenTagh5 class="offcanvas-title fw-medium fs-base"HTMLCloseTagSlide Over With Close ButtonHTMLOpenTag/h5HTMLCloseTag HTMLOpenTagbutton type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"HTMLCloseTagHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="offcanvas-body"HTMLCloseTag This is totally awesome slide over with close button! HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag!-- END: Modal Content --HTMLCloseTag  

Header & Footer Slide Over

Dark Mode