Dashboard - Rubick - Bootstrap HTML Admin Template

Rubick

Pages

Mail Settings

Users & Permissions

Transactions Report

Users

Tom Cruise

tomcruise@left4code.com

Johnny Depp

johnnydepp@left4code.com

Tom Hanks

tomhanks@left4code.com

Russell Crowe

russellcrowe@left4code.com

Products

Nikon Z6

Photography

Samsung Galaxy S20 Ultra

Slide Over

Blank Slide Over

Show example code

Show 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

Show example code

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

This is totally awesome small slide over!

This is totally awesome medium slide over!

This is totally awesome large 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

Show example code

Show Slide Over

Hide Slide Over Toggle 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

Show example code

Show Slide Over

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

Show example code

Show Slide Over

Broadcast Message

From

Subject

Has the Words

Doesn't Have

Size

  HTMLOpenTag!-- BEGIN: Slide Over Toggle --HTMLCloseTag HTMLOpenTagdiv class="text-center"HTMLCloseTag HTMLOpenTaga data-bs-toggle="offcanvas" href="#header-footer-slide-over-preview" role="button" aria-controls="headerFooterSlideOver" class="btn btn-primary me-1 mb-2"HTMLCloseTagShow Slide OverHTMLOpenTag/aHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag!-- END: Slide Over Toggle --HTMLCloseTag HTMLOpenTag!-- BEGIN: Small Slide Over Content --HTMLCloseTag HTMLOpenTagdiv class="offcanvas offcanvas-end" tabindex="-1" id="header-footer-slide-over-preview" aria-labelledby="headerFooterSlideOver"HTMLCloseTag HTMLOpenTagdiv class="offcanvas-header"HTMLCloseTag HTMLOpenTagh5 class="offcanvas-title fw-medium fs-base"HTMLCloseTagBroadcast MessageHTMLOpenTag/h5HTMLCloseTag HTMLOpenTagbutton class="btn btn-outline-secondary d-none d-sm-flex"HTMLCloseTag HTMLOpenTagi data-feather="file" class="w-4 h-4 me-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Download Docs HTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagdiv class="dropdown d-sm-none"HTMLCloseTag HTMLOpenTaga class="dropdown-toggle w-5 h-5 d-block" href="javascript:;" role="button" aria-expanded="false" data-bs-toggle="dropdown"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 HTMLOpenTagul class="dropdown-content"HTMLCloseTag HTMLOpenTagliHTMLCloseTag HTMLOpenTaga href="javascript:;" class="dropdown-item"HTMLCloseTag HTMLOpenTagi data-feather="file" class="w-4 h-4 me-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Download Docs HTMLOpenTag/aHTMLCloseTag HTMLOpenTag/liHTMLCloseTag HTMLOpenTag/ulHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagbutton type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"HTMLCloseTagHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="offcanvas-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 HTMLOpenTagdiv class="offcanvas-footer text-end position-absolute bottom-0"HTMLCloseTag HTMLOpenTagbutton type="button" data-bs-dismiss="offcanvas" class="btn btn-outline-secondary w-20 me-1"HTMLCloseTagCancelHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton type="button" class="btn btn-primary w-20"HTMLCloseTagSendHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag!-- END: Small Slide Over Content --HTMLCloseTag

Dark Mode