Logo

Geekaxon

Welcome User

  • Light Mode Dark Mode Mix Mode
Logo

Geekaxon

Responsive Offcanvas Modal

<!-- Trigger -->
<button type="button" class="btn btn-primary w-100" data-bs-toggle="modal" data-bs-target="#offcanvasModal" aria-label="Trigger Modal">Trigger Modal</button>

<!-- Modal -->
<div class="modal fade offcanvas-md-bottom" id="offcanvasModal" tabindex="-1" aria-labelledby="modalTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-scrollable modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title" id="modalTitle">Modal Title</h1>
                <button type="button" class="close ms-auto" data-bs-dismiss="modal" aria-label="Close">
                    <i class="fa-regular fa-xmark"></i>
                </button>
            </div>
            <div class="modal-body">
                Your content here...
            </div>
            <div class="modal-footer gap-2">
                <button type="button" class="btn btn-danger m-0" data-bs-dismiss="modal" aria-label="Close">Close</button>
                <button type="button" class="btn btn-success m-0" aria-label="Done">Done</button>
            </div>
        </div>
    </div>
</div>
:root {
    --light-vertical-toggle-btn-border-color: #d2d2d2;
    --default-modal-border-radius: 6px;
    --light-modal-background-color: #fff;
    --dark-modal-background-color: #21242b;
    --modal-header-padding: 14px 16px;
    --modal-body-padding: 16px;
    --modal-footer-padding: 12px 16px;
}
.modal .modal-content {
    background-color: var(--light-modal-background-color);
    border-radius: var(--default-modal-border-radius);
}
.modal .modal-content > *:first-child {
    border-top-left-radius: var(--default-modal-border-radius);
    border-top-right-radius: var(--default-modal-border-radius);
}
.modal .modal-content > *:last-child {
    border-bottom-left-radius: var(--default-modal-border-radius);
    border-bottom-right-radius: var(--default-modal-border-radius);
}
.modal .modal-content .modal-header {
    background-color: var(--light-modal-background-color);
    border-color: var(--light-border-color-1);
    padding: var(--modal-header-padding);
}
.modal .modal-content .modal-header .modal-title {
    font-size: 19.88px;
    line-height: 22.862px;
}
.modal .modal-content .modal-header .close {
    background-color: transparent;
    border: 0px;
}
.modal .modal-content .modal-body {
    padding: var(--modal-body-padding);
}
.modal .modal-content .modal-footer {
    background-color: var(--light-modal-background-color);
    border-color: var(--light-border-color-1);
    padding: var(--modal-footer-padding);
}

/* Media Query For < 1400px */
@media (max-width: 1399px) {
    .modal.offcanvas-xxl-bottom .modal-dialog {
        margin: 0px !important;
        min-height: 100% !important;
        -webkit-box-align: end !important;
            -ms-flex-align: end !important;
                align-items: end !important;
    }
    .modal.offcanvas-xxl-bottom .modal-dialog .modal-content {
        border-bottom-right-radius: 0px !important;
        border-bottom-left-radius: 0px !important;
        bottom: -100% !important;
    }
    .modal.offcanvas-xxl-bottom .modal-dialog .modal-content > *:last-child {
        border-bottom-right-radius: 0px !important;
        border-bottom-left-radius: 0px !important;
    }
    .modal.offcanvas-xxl-bottom .modal-dialog .modal-content .modal-body {
        max-height: 70vh !important;
    }
    .modal.offcanvas-xxl-bottom.show .modal-content {
        bottom: 0% !important;
    }

    .modal.offcanvas-xxl-top .modal-dialog {
        margin: 0px !important;
        min-height: 100% !important;
        -webkit-box-align: start !important;
            -ms-flex-align: start !important;
                align-items: start !important;
    }
    .modal.offcanvas-xxl-top .modal-dialog .modal-content {
        border-top-right-radius: 0px !important;
        border-top-left-radius: 0px !important;
        top: -100% !important;
    }
    .modal.offcanvas-xxl-top .modal-dialog .modal-content > *:last-child {
        border-top-right-radius: 0px !important;
        border-top-left-radius: 0px !important;
    }
    .modal.offcanvas-xxl-top .modal-dialog .modal-content .modal-body {
        max-height: 70vh !important;
    }
    .modal.offcanvas-xxl-top.show .modal-content {
        top: 0% !important;
    }
}

/* Media Query For < 1200px */
@media (max-width: 1199px) {
    .modal.offcanvas-xl-bottom .modal-dialog {
        margin: 0px !important;
        min-height: 100% !important;
        -webkit-box-align: end !important;
            -ms-flex-align: end !important;
                align-items: end !important;
    }
    .modal.offcanvas-xl-bottom .modal-dialog .modal-content {
        border-bottom-right-radius: 0px !important;
        border-bottom-left-radius: 0px !important;
        bottom: -100% !important;
    }
    .modal.offcanvas-xl-bottom .modal-dialog .modal-content > *:last-child {
        border-bottom-right-radius: 0px !important;
        border-bottom-left-radius: 0px !important;
    }
    .modal.offcanvas-xl-bottom .modal-dialog .modal-content .modal-body {
        max-height: 70vh !important;
    }
    .modal.offcanvas-xl-bottom.show .modal-content {
        bottom: 0% !important;
    }

    .modal.offcanvas-xl-top .modal-dialog {
        margin: 0px !important;
        min-height: 100% !important;
        -webkit-box-align: start !important;
            -ms-flex-align: start !important;
                align-items: start !important;
    }
    .modal.offcanvas-xl-top .modal-dialog .modal-content {
        border-top-right-radius: 0px !important;
        border-top-left-radius: 0px !important;
        top: -100% !important;
    }
    .modal.offcanvas-xl-top .modal-dialog .modal-content > *:last-child {
        border-top-right-radius: 0px !important;
        border-top-left-radius: 0px !important;
    }
    .modal.offcanvas-xl-top .modal-dialog .modal-content .modal-body {
        max-height: 70vh !important;
    }
    .modal.offcanvas-xl-top.show .modal-content {
        top: 0% !important;
    }
}

/* Media Query For < 992px */
@media (max-width: 991px) {
    .modal.offcanvas-lg-bottom .modal-dialog {
        margin: 0px !important;
        min-height: 100% !important;
        -webkit-box-align: end !important;
            -ms-flex-align: end !important;
                align-items: end !important;
    }
    .modal.offcanvas-lg-bottom .modal-dialog .modal-content {
        border-bottom-right-radius: 0px !important;
        border-bottom-left-radius: 0px !important;
        bottom: -100% !important;
    }
    .modal.offcanvas-lg-bottom .modal-dialog .modal-content > *:last-child {
        border-bottom-right-radius: 0px !important;
        border-bottom-left-radius: 0px !important;
    }
    .modal.offcanvas-lg-bottom .modal-dialog .modal-content .modal-body {
        max-height: 70vh !important;
    }
    .modal.offcanvas-lg-bottom.show .modal-content {
        bottom: 0% !important;
    }

    .modal.offcanvas-lg-top .modal-dialog {
        margin: 0px !important;
        min-height: 100% !important;
        -webkit-box-align: start !important;
            -ms-flex-align: start !important;
                align-items: start !important;
    }
    .modal.offcanvas-lg-top .modal-dialog .modal-content {
        border-top-right-radius: 0px !important;
        border-top-left-radius: 0px !important;
        top: -100% !important;
    }
    .modal.offcanvas-lg-top .modal-dialog .modal-content > *:last-child {
        border-top-right-radius: 0px !important;
        border-top-left-radius: 0px !important;
    }
    .modal.offcanvas-lg-top .modal-dialog .modal-content .modal-body {
        max-height: 70vh !important;
    }
    .modal.offcanvas-lg-top.show .modal-content {
        top: 0% !important;
    }
}

/* Media Query For < 768px */
@media (max-width: 767px) {
    .modal.offcanvas-md-bottom .modal-dialog {
        margin: 0px !important;
        min-height: 100% !important;
        -webkit-box-align: end !important;
            -ms-flex-align: end !important;
                align-items: end !important;
    }
    .modal.offcanvas-md-bottom .modal-dialog .modal-content {
        border-bottom-right-radius: 0px !important;
        border-bottom-left-radius: 0px !important;
        bottom: -100% !important;
    }
    .modal.offcanvas-md-bottom .modal-dialog .modal-content > *:last-child {
        border-bottom-right-radius: 0px !important;
        border-bottom-left-radius: 0px !important;
    }
    .modal.offcanvas-md-bottom .modal-dialog .modal-content .modal-body {
        max-height: 70vh !important;
    }
    .modal.offcanvas-md-bottom.show .modal-content {
        bottom: 0% !important;
    }

    .modal.offcanvas-md-top .modal-dialog {
        margin: 0px !important;
        min-height: 100% !important;
        -webkit-box-align: start !important;
            -ms-flex-align: start !important;
                align-items: start !important;
    }
    .modal.offcanvas-md-top .modal-dialog .modal-content {
        border-top-right-radius: 0px !important;
        border-top-left-radius: 0px !important;
        top: -100% !important;
    }
    .modal.offcanvas-md-top .modal-dialog .modal-content > *:last-child {
        border-top-right-radius: 0px !important;
        border-top-left-radius: 0px !important;
    }
    .modal.offcanvas-md-top .modal-dialog .modal-content .modal-body {
        max-height: 70vh !important;
    }
    .modal.offcanvas-md-top.show .modal-content {
        top: 0% !important;
    }
}

/* Media Query For < 576px */
@media (max-width: 575px) {
    .modal.offcanvas-sm-bottom .modal-dialog {
        margin: 0px !important;
        min-height: 100% !important;
        -webkit-box-align: end !important;
            -ms-flex-align: end !important;
                align-items: end !important;
    }
    .modal.offcanvas-sm-bottom .modal-dialog .modal-content {
        border-bottom-right-radius: 0px !important;
        border-bottom-left-radius: 0px !important;
        bottom: -100% !important;
    }
    .modal.offcanvas-sm-bottom .modal-dialog .modal-content > *:last-child {
        border-bottom-right-radius: 0px !important;
        border-bottom-left-radius: 0px !important;
    }
    .modal.offcanvas-sm-bottom .modal-dialog .modal-content .modal-body {
        max-height: 70vh !important;
    }
    .modal.offcanvas-sm-bottom.show .modal-content {
        bottom: 0% !important;
    }

    .modal.offcanvas-sm-top .modal-dialog {
        margin: 0px !important;
        min-height: 100% !important;
        -webkit-box-align: start !important;
            -ms-flex-align: start !important;
                align-items: start !important;
    }
    .modal.offcanvas-sm-top .modal-dialog .modal-content {
        border-top-right-radius: 0px !important;
        border-top-left-radius: 0px !important;
        top: -100% !important;
    }
    .modal.offcanvas-sm-top .modal-dialog .modal-content > *:last-child {
        border-top-right-radius: 0px !important;
        border-top-left-radius: 0px !important;
    }
    .modal.offcanvas-sm-top .modal-dialog .modal-content .modal-body {
        max-height: 70vh !important;
    }
    .modal.offcanvas-sm-top.show .modal-content {
        top: 0% !important;
    }
}
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous" referrerpolicy="no-referrer" />

A modal that adapts to an offcanvas style based on screen size. It shifts to a bottom or top offcanvas view depending on the applied class.

  • offcanvas-xxl-bottom: Converts to bottom offcanvas on screens smaller than 1400px.
  • offcanvas-xl-bottom: Converts to bottom offcanvas on screens smaller than 1200px.
  • offcanvas-lg-bottom: Converts to bottom offcanvas on screens smaller than 992px.
  • offcanvas-md-bottom: Converts to bottom offcanvas on screens smaller than 768px.
  • offcanvas-sm-bottom: Converts to bottom offcanvas on screens smaller than 576px.

For top attachment, use the corresponding offcanvas-xxl-top, offcanvas-xl-top, etc., to shift the modal to a top offcanvas view.