2025-12-27 02:50:16 +08:00
{{template "components-header.html" .}}
{{template "components-preloader.html" .}}
2025-12-26 22:35:18 +08:00
< div id = "main-wrapper" >
<!-- Sidebar Start -->
2025-12-27 02:50:16 +08:00
{{template "components-sidebar.html" .}}
2025-12-26 22:35:18 +08:00
<!-- Sidebar End -->
< div class = "page-wrapper" >
<!-- Header Start -->
< header class = "topbar" >
< div class = "with-vertical" > <!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<!-- Start Vertical Layout Header -->
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
< nav class = "navbar navbar-expand-lg p-0" >
< ul class = "navbar-nav" >
< li class = "nav-item nav-icon-hover-bg rounded-circle ms-n2" >
< a class = "nav-link sidebartoggler" id = "headerCollapse" href = "javascript:void(0)" >
< i class = "ti ti-menu-2" > < / i >
< / a >
< / li >
< li class = "nav-item nav-icon-hover-bg rounded-circle d-none d-lg-flex" >
< a class = "nav-link" href = "javascript:void(0)" data-bs-toggle = "modal" data-bs-target = "#exampleModal" >
< i class = "ti ti-search" > < / i >
< / a >
< / li >
< / ul >
< ul class = "navbar-nav quick-links d-none d-lg-flex align-items-center" >
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<!-- start apps Dropdown -->
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
< li class = "nav-item nav-icon-hover-bg rounded w-auto dropdown d-none d-lg-block mx-0" >
< div class = "hover-dd" >
< a class = "nav-link" href = "javascript:void(0)" >
Apps< span class = "mt-1" >
< i class = "ti ti-chevron-down fs-3" > < / i >
< / span >
< / a >
< div class = "dropdown-menu dropdown-menu-nav dropdown-menu-animate-up py-0" >
< div class = "row" >
< div class = "col-8" >
< div class = "ps-7 pt-7" >
< div class = "border-bottom" >
< div class = "row" >
< div class = "col-6" >
< div class = "position-relative" >
< a href = "../main/app-chat.html" class = "d-flex align-items-center pb-9 position-relative" >
< div class = "text-bg-light rounded-1 me-3 p-6 d-flex align-items-center justify-content-center" >
< img src = "../assets/images/svgs/icon-dd-chat.svg" alt = "modernize-img" class = "img-fluid" width = "24" height = "24" / >
< / div >
< div >
< h6 class = "mb-1 fw-semibold fs-3" >
Chat Application
< / h6 >
< span class = "fs-2 d-block text-body-secondary" > New messages arrived< / span >
< / div >
< / a >
< a href = "../main/app-invoice.html" class = "d-flex align-items-center pb-9 position-relative" >
< div class = "text-bg-light rounded-1 me-3 p-6 d-flex align-items-center justify-content-center" >
< img src = "../assets/images/svgs/icon-dd-invoice.svg" alt = "modernize-img" class = "img-fluid" width = "24" height = "24" / >
< / div >
< div >
< h6 class = "mb-1 fw-semibold fs-3" > Invoice App< / h6 >
< span class = "fs-2 d-block text-body-secondary" > Get latest invoice< / span >
< / div >
< / a >
< a href = "../main/app-contact2.html" class = "d-flex align-items-center pb-9 position-relative" >
< div class = "text-bg-light rounded-1 me-3 p-6 d-flex align-items-center justify-content-center" >
< img src = "../assets/images/svgs/icon-dd-mobile.svg" alt = "modernize-img" class = "img-fluid" width = "24" height = "24" / >
< / div >
< div >
< h6 class = "mb-1 fw-semibold fs-3" >
Contact Application
< / h6 >
< span class = "fs-2 d-block text-body-secondary" > 2 Unsaved Contacts< / span >
< / div >
< / a >
< a href = "../main/app-email.html" class = "d-flex align-items-center pb-9 position-relative" >
< div class = "text-bg-light rounded-1 me-3 p-6 d-flex align-items-center justify-content-center" >
< img src = "../assets/images/svgs/icon-dd-message-box.svg" alt = "modernize-img" class = "img-fluid" width = "24" height = "24" / >
< / div >
< div >
< h6 class = "mb-1 fw-semibold fs-3" > Email App< / h6 >
< span class = "fs-2 d-block text-body-secondary" > Get new emails< / span >
< / div >
< / a >
< / div >
< / div >
< div class = "col-6" >
< div class = "position-relative" >
< a href = "../main/page-user-profile.html" class = "d-flex align-items-center pb-9 position-relative" >
< div class = "text-bg-light rounded-1 me-3 p-6 d-flex align-items-center justify-content-center" >
< img src = "../assets/images/svgs/icon-dd-cart.svg" alt = "modernize-img" class = "img-fluid" width = "24" height = "24" / >
< / div >
< div >
< h6 class = "mb-1 fw-semibold fs-3" >
User Profile
< / h6 >
< span class = "fs-2 d-block text-body-secondary" > learn more information< / span >
< / div >
< / a >
< a href = "../main/app-calendar.html" class = "d-flex align-items-center pb-9 position-relative" >
< div class = "text-bg-light rounded-1 me-3 p-6 d-flex align-items-center justify-content-center" >
< img src = "../assets/images/svgs/icon-dd-date.svg" alt = "modernize-img" class = "img-fluid" width = "24" height = "24" / >
< / div >
< div >
< h6 class = "mb-1 fw-semibold fs-3" >
Calendar App
< / h6 >
< span class = "fs-2 d-block text-body-secondary" > Get dates< / span >
< / div >
< / a >
< a href = "../main/app-contact.html" class = "d-flex align-items-center pb-9 position-relative" >
< div class = "text-bg-light rounded-1 me-3 p-6 d-flex align-items-center justify-content-center" >
< img src = "../assets/images/svgs/icon-dd-lifebuoy.svg" alt = "modernize-img" class = "img-fluid" width = "24" height = "24" / >
< / div >
< div >
< h6 class = "mb-1 fw-semibold fs-3" >
Contact List Table
< / h6 >
< span class = "fs-2 d-block text-body-secondary" > Add new contact< / span >
< / div >
< / a >
< a href = "../main/app-notes.html" class = "d-flex align-items-center pb-9 position-relative" >
< div class = "text-bg-light rounded-1 me-3 p-6 d-flex align-items-center justify-content-center" >
< img src = "../assets/images/svgs/icon-dd-application.svg" alt = "modernize-img" class = "img-fluid" width = "24" height = "24" / >
< / div >
< div >
< h6 class = "mb-1 fw-semibold fs-3" >
Notes Application
< / h6 >
< span class = "fs-2 d-block text-body-secondary" > To-do and Daily tasks< / span >
< / div >
< / a >
< / div >
< / div >
< / div >
< / div >
< div class = "row align-items-center py-3" >
< div class = "col-8" >
< a class = "fw-semibold d-flex align-items-center lh-1" href = "javascript:void(0)" >
< i class = "ti ti-help fs-6 me-2" > < / i > Frequently Asked Questions
< / a >
< / div >
< div class = "col-4" >
< div class = "d-flex justify-content-end pe-4" >
< button class = "btn btn-primary" > Check< / button >
< / div >
< / div >
< / div >
< / div >
< / div >
< div class = "col-4 ms-n4" >
< div class = "position-relative p-7 border-start h-100" >
< h5 class = "fs-5 mb-9 fw-semibold" > Quick Links< / h5 >
< ul class = "" >
< li class = "mb-3" >
< a class = "fw-semibold bg-hover-primary" href = "../main/page-pricing.html" > Pricing Page< / a >
< / li >
< li class = "mb-3" >
< a class = "fw-semibold bg-hover-primary" href = "../main/authentication-login.html" > Authentication
Design< / a >
< / li >
< li class = "mb-3" >
< a class = "fw-semibold bg-hover-primary" href = "../main/authentication-register.html" > Register Now< / a >
< / li >
< li class = "mb-3" >
< a class = "fw-semibold bg-hover-primary" href = "../main/authentication-error.html" > 404 Error Page< / a >
< / li >
< li class = "mb-3" >
< a class = "fw-semibold bg-hover-primary" href = "../main/app-notes.html" > Notes App< / a >
< / li >
< li class = "mb-3" >
< a class = "fw-semibold bg-hover-primary" href = "../main/page-user-profile.html" > User Application< / a >
< / li >
< li class = "mb-3" >
< a class = "fw-semibold bg-hover-primary" href = "../main/page-account-settings.html" > Account Settings< / a >
< / li >
< / ul >
< / div >
< / div >
< / div >
< / div >
< / div >
< / li >
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<!-- end apps Dropdown -->
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
< li class = "nav-item dropdown-hover d-none d-lg-block" >
< a class = "nav-link" href = "../main/app-chat.html" > Chat< / a >
< / li >
< li class = "nav-item dropdown-hover d-none d-lg-block" >
< a class = "nav-link" href = "../main/app-calendar.html" > Calendar< / a >
< / li >
< li class = "nav-item dropdown-hover d-none d-lg-block" >
< a class = "nav-link" href = "../main/app-email.html" > Email< / a >
< / li >
< / ul >
< div class = "d-block d-lg-none py-4" >
< a href = "../main/index.html" class = "text-nowrap logo-img" >
< img src = "../assets/images/logos/dark-logo.svg" class = "dark-logo" alt = "Logo-Dark" / >
< img src = "../assets/images/logos/light-logo.svg" class = "light-logo" alt = "Logo-light" / >
< / a >
< / div >
< a class = "navbar-toggler nav-icon-hover-bg rounded-circle p-0 mx-0 border-0" href = "javascript:void(0)" data-bs-toggle = "collapse" data-bs-target = "#navbarNav" aria-controls = "navbarNav" aria-expanded = "false" aria-label = "Toggle navigation" >
< i class = "ti ti-dots fs-7" > < / i >
< / a >
< div class = "collapse navbar-collapse justify-content-end" id = "navbarNav" >
< div class = "d-flex align-items-center justify-content-between" >
< a href = "javascript:void(0)" class = "nav-link nav-icon-hover-bg rounded-circle mx-0 ms-n1 d-flex d-lg-none align-items-center justify-content-center" type = "button" data-bs-toggle = "offcanvas" data-bs-target = "#mobilenavbar" aria-controls = "offcanvasWithBothOptions" >
< i class = "ti ti-align-justified fs-7" > < / i >
< / a >
< ul class = "navbar-nav flex-row ms-auto align-items-center justify-content-center" >
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<!-- start language Dropdown -->
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
< li class = "nav-item nav-icon-hover-bg rounded-circle" >
< a class = "nav-link moon dark-layout" href = "javascript:void(0)" >
< i class = "ti ti-moon moon" > < / i >
< / a >
< a class = "nav-link sun light-layout" href = "javascript:void(0)" >
< i class = "ti ti-sun sun" > < / i >
< / a >
< / li >
< li class = "nav-item nav-icon-hover-bg rounded-circle dropdown" >
< a class = "nav-link" href = "javascript:void(0)" id = "drop2" aria-expanded = "false" >
< img src = "../assets/images/svgs/icon-flag-en.svg" alt = "modernize-img" width = "20px" height = "20px" class = "rounded-circle object-fit-cover round-20" / >
< / a >
< div class = "dropdown-menu dropdown-menu-end dropdown-menu-animate-up" aria-labelledby = "drop2" >
< div class = "message-body" >
< a href = "javascript:void(0)" class = "d-flex align-items-center gap-2 py-3 px-4 dropdown-item" >
< div class = "position-relative" >
< img src = "../assets/images/svgs/icon-flag-en.svg" alt = "modernize-img" width = "20px" height = "20px" class = "rounded-circle object-fit-cover round-20" / >
< / div >
< p class = "mb-0 fs-3" > English (UK)< / p >
< / a >
< a href = "javascript:void(0)" class = "d-flex align-items-center gap-2 py-3 px-4 dropdown-item" >
< div class = "position-relative" >
< img src = "../assets/images/svgs/icon-flag-cn.svg" alt = "modernize-img" width = "20px" height = "20px" class = "rounded-circle object-fit-cover round-20" / >
< / div >
< p class = "mb-0 fs-3" > 中国人 (Chinese)< / p >
< / a >
< a href = "javascript:void(0)" class = "d-flex align-items-center gap-2 py-3 px-4 dropdown-item" >
< div class = "position-relative" >
< img src = "../assets/images/svgs/icon-flag-fr.svg" alt = "modernize-img" width = "20px" height = "20px" class = "rounded-circle object-fit-cover round-20" / >
< / div >
< p class = "mb-0 fs-3" > français (French)< / p >
< / a >
< a href = "javascript:void(0)" class = "d-flex align-items-center gap-2 py-3 px-4 dropdown-item" >
< div class = "position-relative" >
< img src = "../assets/images/svgs/icon-flag-sa.svg" alt = "modernize-img" width = "20px" height = "20px" class = "rounded-circle object-fit-cover round-20" / >
< / div >
< p class = "mb-0 fs-3" > عربي (Arabic)< / p >
< / a >
< / div >
< / div >
< / li >
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<!-- end language Dropdown -->
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<!-- start shopping cart Dropdown -->
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
< li class = "nav-item nav-icon-hover-bg rounded-circle" >
< a class = "nav-link position-relative" href = "javascript:void(0)" data-bs-toggle = "offcanvas" data-bs-target = "#offcanvasRight" aria-controls = "offcanvasRight" >
< i class = "ti ti-basket" > < / i >
< span class = "popup-badge rounded-pill bg-danger text-white fs-2" > 2< / span >
< / a >
< / li >
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<!-- end shopping cart Dropdown -->
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<!-- start notification Dropdown -->
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
< li class = "nav-item nav-icon-hover-bg rounded-circle dropdown" >
< a class = "nav-link position-relative" href = "javascript:void(0)" id = "drop2" aria-expanded = "false" >
< i class = "ti ti-bell-ringing" > < / i >
< div class = "notification bg-primary rounded-circle" > < / div >
< / a >
< div class = "dropdown-menu content-dd dropdown-menu-end dropdown-menu-animate-up" aria-labelledby = "drop2" >
< div class = "d-flex align-items-center justify-content-between py-3 px-7" >
< h5 class = "mb-0 fs-5 fw-semibold" > Notifications< / h5 >
< span class = "badge text-bg-primary rounded-4 px-3 py-1 lh-sm" > 5 new< / span >
< / div >
< div class = "message-body" data-simplebar >
< a href = "javascript:void(0)" class = "py-6 px-7 d-flex align-items-center dropdown-item" >
< span class = "me-3" >
< img src = "../assets/images/profile/user-2.jpg" alt = "user" class = "rounded-circle" width = "48" height = "48" / >
< / span >
< div class = "w-100" >
< h6 class = "mb-1 fw-semibold lh-base" > Roman Joined the Team!< / h6 >
< span class = "fs-2 d-block text-body-secondary" > Congratulate him< / span >
< / div >
< / a >
< a href = "javascript:void(0)" class = "py-6 px-7 d-flex align-items-center dropdown-item" >
< span class = "me-3" >
< img src = "../assets/images/profile/user-3.jpg" alt = "user" class = "rounded-circle" width = "48" height = "48" / >
< / span >
< div class = "w-100" >
< h6 class = "mb-1 fw-semibold lh-base" > New message< / h6 >
< span class = "fs-2 d-block text-body-secondary" > Salma sent you new message< / span >
< / div >
< / a >
< a href = "javascript:void(0)" class = "py-6 px-7 d-flex align-items-center dropdown-item" >
< span class = "me-3" >
< img src = "../assets/images/profile/user-4.jpg" alt = "user" class = "rounded-circle" width = "48" height = "48" / >
< / span >
< div class = "w-100" >
< h6 class = "mb-1 fw-semibold lh-base" > Bianca sent payment< / h6 >
< span class = "fs-2 d-block text-body-secondary" > Check your earnings< / span >
< / div >
< / a >
< a href = "javascript:void(0)" class = "py-6 px-7 d-flex align-items-center dropdown-item" >
< span class = "me-3" >
< img src = "../assets/images/profile/user-5.jpg" alt = "user" class = "rounded-circle" width = "48" height = "48" / >
< / span >
< div class = "w-100" >
< h6 class = "mb-1 fw-semibold lh-base" > Jolly completed tasks< / h6 >
< span class = "fs-2 d-block text-body-secondary" > Assign her new tasks< / span >
< / div >
< / a >
< a href = "javascript:void(0)" class = "py-6 px-7 d-flex align-items-center dropdown-item" >
< span class = "me-3" >
< img src = "../assets/images/profile/user-6.jpg" alt = "user" class = "rounded-circle" width = "48" height = "48" / >
< / span >
< div class = "w-100" >
< h6 class = "mb-1 fw-semibold lh-base" > John received payment< / h6 >
< span class = "fs-2 d-block text-body-secondary" > $230 deducted from account< / span >
< / div >
< / a >
< a href = "javascript:void(0)" class = "py-6 px-7 d-flex align-items-center dropdown-item" >
< span class = "me-3" >
< img src = "../assets/images/profile/user-7.jpg" alt = "user" class = "rounded-circle" width = "48" height = "48" / >
< / span >
< div class = "w-100" >
< h6 class = "mb-1 fw-semibold lh-base" > Roman Joined the Team!< / h6 >
< span class = "fs-2 d-block text-body-secondary" > Congratulate him< / span >
< / div >
< / a >
< / div >
< div class = "py-6 px-7 mb-1" >
< button class = "btn btn-outline-primary w-100" > See All Notifications< / button >
< / div >
< / div >
< / li >
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<!-- end notification Dropdown -->
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<!-- start profile Dropdown -->
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
< li class = "nav-item dropdown" >
< a class = "nav-link pe-0" href = "javascript:void(0)" id = "drop1" aria-expanded = "false" >
< div class = "d-flex align-items-center" >
< div class = "user-profile-img" >
< img src = "../assets/images/profile/user-1.jpg" class = "rounded-circle" width = "35" height = "35" alt = "modernize-img" / >
< / div >
< / div >
< / a >
< div class = "dropdown-menu content-dd dropdown-menu-end dropdown-menu-animate-up" aria-labelledby = "drop1" >
< div class = "profile-dropdown position-relative" data-simplebar >
< div class = "py-3 px-7 pb-0" >
< h5 class = "mb-0 fs-5 fw-semibold" > User Profile< / h5 >
< / div >
< div class = "d-flex align-items-center py-9 mx-7 border-bottom" >
< img src = "../assets/images/profile/user-1.jpg" class = "rounded-circle" width = "80" height = "80" alt = "modernize-img" / >
< div class = "ms-3" >
< h5 class = "mb-1 fs-3" > Mathew Anderson< / h5 >
< span class = "mb-1 d-block" > Designer< / span >
< p class = "mb-0 d-flex align-items-center gap-2" >
< i class = "ti ti-mail fs-4" > < / i > info@modernize.com
< / p >
< / div >
< / div >
< div class = "message-body" >
< a href = "../main/page-user-profile.html" class = "py-8 px-7 mt-8 d-flex align-items-center" >
< span class = "d-flex align-items-center justify-content-center text-bg-light rounded-1 p-6" >
< img src = "../assets/images/svgs/icon-account.svg" alt = "modernize-img" width = "24" height = "24" / >
< / span >
< div class = "w-100 ps-3" >
< h6 class = "mb-1 fs-3 fw-semibold lh-base" > My Profile< / h6 >
< span class = "fs-2 d-block text-body-secondary" > Account Settings< / span >
< / div >
< / a >
< a href = "../main/app-email.html" class = "py-8 px-7 d-flex align-items-center" >
< span class = "d-flex align-items-center justify-content-center text-bg-light rounded-1 p-6" >
< img src = "../assets/images/svgs/icon-inbox.svg" alt = "modernize-img" width = "24" height = "24" / >
< / span >
< div class = "w-100 ps-3" >
< h6 class = "mb-1 fs-3 fw-semibold lh-base" > My Inbox< / h6 >
< span class = "fs-2 d-block text-body-secondary" > Messages & Emails< / span >
< / div >
< / a >
< a href = "../main/app-notes.html" class = "py-8 px-7 d-flex align-items-center" >
< span class = "d-flex align-items-center justify-content-center text-bg-light rounded-1 p-6" >
< img src = "../assets/images/svgs/icon-tasks.svg" alt = "modernize-img" width = "24" height = "24" / >
< / span >
< div class = "w-100 ps-3" >
< h6 class = "mb-1 fs-3 fw-semibold lh-base" > My Task< / h6 >
< span class = "fs-2 d-block text-body-secondary" > To-do and Daily Tasks< / span >
< / div >
< / a >
< / div >
< div class = "d-grid py-4 px-7 pt-8" >
< div class = "upgrade-plan bg-primary-subtle position-relative overflow-hidden rounded-4 p-4 mb-9" >
< div class = "row" >
< div class = "col-6" >
< h5 class = "fs-4 mb-3 fw-semibold" > Unlimited Access< / h5 >
< button class = "btn btn-primary" > Upgrade< / button >
< / div >
< div class = "col-6" >
< div class = "m-n4 unlimited-img" >
< img src = "../assets/images/backgrounds/unlimited-bg.png" alt = "modernize-img" class = "w-100" / >
< / div >
< / div >
< / div >
< / div >
< a href = "../main/authentication-login.html" class = "btn btn-outline-primary" > Log Out< / a >
< / div >
< / div >
< / div >
< / li >
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<!-- end profile Dropdown -->
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
< / ul >
< / div >
< / div >
< / nav >
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<!-- End Vertical Layout Header -->
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<!-- apps Dropdown in Small screen -->
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<!-- Mobilenavbar -->
< div class = "offcanvas offcanvas-start" data-bs-scroll = "true" tabindex = "-1" id = "mobilenavbar" aria-labelledby = "offcanvasWithBothOptionsLabel" >
< nav class = "sidebar-nav scroll-sidebar" >
< div class = "offcanvas-header justify-content-between" >
< img src = "../assets/images/logos/favicon.ico" alt = "modernize-img" class = "img-fluid" / >
< button type = "button" class = "btn-close" data-bs-dismiss = "offcanvas" aria-label = "Close" > < / button >
< / div >
< div class = "offcanvas-body h-n80" data-simplebar = "" data-simplebar >
< ul id = "sidebarnav" >
< li class = "sidebar-item" >
< a class = "sidebar-link has-arrow" href = "javascript:void(0)" aria-expanded = "false" >
< span >
< i class = "ti ti-apps" > < / i >
< / span >
< span class = "hide-menu" > Apps< / span >
< / a >
< ul aria-expanded = "false" class = "collapse first-level my-3" >
< li class = "sidebar-item py-2" >
< a href = "../main/app-chat.html" class = "d-flex align-items-center" >
< div class = "text-bg-light rounded-1 me-3 p-6 d-flex align-items-center justify-content-center" >
< img src = "../assets/images/svgs/icon-dd-chat.svg" alt = "modernize-img" class = "img-fluid" width = "24" height = "24" / >
< / div >
< div >
< h6 class = "mb-1 bg-hover-primary" > Chat Application< / h6 >
< span class = "fs-2 d-block text-muted" > New messages arrived< / span >
< / div >
< / a >
< / li >
< li class = "sidebar-item py-2" >
< a href = "../main/app-invoice.html" class = "d-flex align-items-center" >
< div class = "text-bg-light rounded-1 me-3 p-6 d-flex align-items-center justify-content-center" >
< img src = "../assets/images/svgs/icon-dd-invoice.svg" alt = "modernize-img" class = "img-fluid" width = "24" height = "24" / >
< / div >
< div >
< h6 class = "mb-1 bg-hover-primary" > Invoice App< / h6 >
< span class = "fs-2 d-block text-muted" > Get latest invoice< / span >
< / div >
< / a >
< / li >
< li class = "sidebar-item py-2" >
< a href = "../main/app-cotact.html" class = "d-flex align-items-center" >
< div class = "text-bg-light rounded-1 me-3 p-6 d-flex align-items-center justify-content-center" >
< img src = "../assets/images/svgs/icon-dd-mobile.svg" alt = "modernize-img" class = "img-fluid" width = "24" height = "24" / >
< / div >
< div >
< h6 class = "mb-1 bg-hover-primary" > Contact Application< / h6 >
< span class = "fs-2 d-block text-muted" > 2 Unsaved Contacts< / span >
< / div >
< / a >
< / li >
< li class = "sidebar-item py-2" >
< a href = "../main/app-email.html" class = "d-flex align-items-center" >
< div class = "text-bg-light rounded-1 me-3 p-6 d-flex align-items-center justify-content-center" >
< img src = "../assets/images/svgs/icon-dd-message-box.svg" alt = "modernize-img" class = "img-fluid" width = "24" height = "24" / >
< / div >
< div >
< h6 class = "mb-1 bg-hover-primary" > Email App< / h6 >
< span class = "fs-2 d-block text-muted" > Get new emails< / span >
< / div >
< / a >
< / li >
< li class = "sidebar-item py-2" >
< a href = "../main/page-user-profile.html" class = "d-flex align-items-center" >
< div class = "text-bg-light rounded-1 me-3 p-6 d-flex align-items-center justify-content-center" >
< img src = "../assets/images/svgs/icon-dd-cart.svg" alt = "modernize-img" class = "img-fluid" width = "24" height = "24" / >
< / div >
< div >
< h6 class = "mb-1 bg-hover-primary" > User Profile< / h6 >
< span class = "fs-2 d-block text-muted" > learn more information< / span >
< / div >
< / a >
< / li >
< li class = "sidebar-item py-2" >
< a href = "../main/app-calendar.html" class = "d-flex align-items-center" >
< div class = "text-bg-light rounded-1 me-3 p-6 d-flex align-items-center justify-content-center" >
< img src = "../assets/images/svgs/icon-dd-date.svg" alt = "modernize-img" class = "img-fluid" width = "24" height = "24" / >
< / div >
< div >
< h6 class = "mb-1 bg-hover-primary" > Calendar App< / h6 >
< span class = "fs-2 d-block text-muted" > Get dates< / span >
< / div >
< / a >
< / li >
< li class = "sidebar-item py-2" >
< a href = "../main/app-contact2.html" class = "d-flex align-items-center" >
< div class = "text-bg-light rounded-1 me-3 p-6 d-flex align-items-center justify-content-center" >
< img src = "../assets/images/svgs/icon-dd-lifebuoy.svg" alt = "modernize-img" class = "img-fluid" width = "24" height = "24" / >
< / div >
< div >
< h6 class = "mb-1 bg-hover-primary" > Contact List Table< / h6 >
< span class = "fs-2 d-block text-muted" > Add new contact< / span >
< / div >
< / a >
< / li >
< li class = "sidebar-item py-2" >
< a href = "../main/app-notes.html" class = "d-flex align-items-center" >
< div class = "text-bg-light rounded-1 me-3 p-6 d-flex align-items-center justify-content-center" >
< img src = "../assets/images/svgs/icon-dd-application.svg" alt = "modernize-img" class = "img-fluid" width = "24" height = "24" / >
< / div >
< div >
< h6 class = "mb-1 bg-hover-primary" > Notes Application< / h6 >
< span class = "fs-2 d-block text-muted" > To-do and Daily tasks< / span >
< / div >
< / a >
< / li >
< ul class = "px-8 mt-7 mb-4" >
< li class = "sidebar-item mb-3" >
< h5 class = "fs-5 fw-semibold" > Quick Links< / h5 >
< / li >
< li class = "sidebar-item py-2" >
< a class = "fw-semibold text-dark" href = "../main/page-pricing.html" > Pricing Page< / a >
< / li >
< li class = "sidebar-item py-2" >
< a class = "fw-semibold text-dark" href = "../main/authentication-login.html" > Authentication
Design< / a >
< / li >
< li class = "sidebar-item py-2" >
< a class = "fw-semibold text-dark" href = "../main/authentication-register.html" > Register Now< / a >
< / li >
< li class = "sidebar-item py-2" >
< a class = "fw-semibold text-dark" href = "../main/authentication-error.html" > 404 Error Page< / a >
< / li >
< li class = "sidebar-item py-2" >
< a class = "fw-semibold text-dark" href = "../main/app-notes.html" > Notes App< / a >
< / li >
< li class = "sidebar-item py-2" >
< a class = "fw-semibold text-dark" href = "../main/page-user-profile.html" > User Application< / a >
< / li >
< li class = "sidebar-item py-2" >
< a class = "fw-semibold text-dark" href = "../main/page-account-settings.html" > Account Settings< / a >
< / li >
< / ul >
< / ul >
< / li >
< li class = "sidebar-item" >
< a class = "sidebar-link" href = "../main/app-chat.html" aria-expanded = "false" >
< span >
< i class = "ti ti-message-dots" > < / i >
< / span >
< span class = "hide-menu" > Chat< / span >
< / a >
< / li >
< li class = "sidebar-item" >
< a class = "sidebar-link" href = "../main/app-calendar.html" aria-expanded = "false" >
< span >
< i class = "ti ti-calendar" > < / i >
< / span >
< span class = "hide-menu" > Calendar< / span >
< / a >
< / li >
< li class = "sidebar-item" >
< a class = "sidebar-link" href = "../main/app-email.html" aria-expanded = "false" >
< span >
< i class = "ti ti-mail" > < / i >
< / span >
< span class = "hide-menu" > Email< / span >
< / a >
< / li >
< / ul >
< / div >
< / nav >
< / div >
< / div >
< div class = "app-header with-horizontal" >
< nav class = "navbar navbar-expand-xl container-fluid p-0" >
< ul class = "navbar-nav align-items-center" >
< li class = "nav-item nav-icon-hover-bg rounded-circle d-flex d-xl-none ms-n2" >
< a class = "nav-link sidebartoggler" id = "sidebarCollapse" href = "javascript:void(0)" >
< i class = "ti ti-menu-2" > < / i >
< / a >
< / li >
< li class = "nav-item d-none d-xl-block" >
< a href = "../main/index.html" class = "text-nowrap nav-link" >
< img src = "../assets/images/logos/dark-logo.svg" class = "dark-logo" width = "180" alt = "modernize-img" / >
< img src = "../assets/images/logos/light-logo.svg" class = "light-logo" width = "180" alt = "modernize-img" / >
< / a >
< / li >
< li class = "nav-item nav-icon-hover-bg rounded-circle d-none d-xl-flex" >
< a class = "nav-link" href = "javascript:void(0)" data-bs-toggle = "modal" data-bs-target = "#exampleModal" >
< i class = "ti ti-search" > < / i >
< / a >
< / li >
< / ul >
< ul class = "navbar-nav quick-links d-none d-xl-flex align-items-center" >
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<!-- start apps Dropdown -->
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
< li class = "nav-item nav-icon-hover-bg rounded w-auto dropdown d-none d-lg-flex" >
< div class = "hover-dd" >
< a class = "nav-link" href = "javascript:void(0)" >
Apps< span class = "mt-1" >
< i class = "ti ti-chevron-down fs-3" > < / i >
< / span >
< / a >
< div class = "dropdown-menu dropdown-menu-nav dropdown-menu-animate-up py-0" >
< div class = "row" >
< div class = "col-8" >
< div class = "ps-7 pt-7" >
< div class = "border-bottom" >
< div class = "row" >
< div class = "col-6" >
< div class = "position-relative" >
< a href = "../main/app-chat.html" class = "d-flex align-items-center pb-9 position-relative" >
< div class = "text-bg-light rounded-1 me-3 p-6 d-flex align-items-center justify-content-center" >
< img src = "../assets/images/svgs/icon-dd-chat.svg" alt = "modernize-img" class = "img-fluid" width = "24" height = "24" / >
< / div >
< div >
< h6 class = "mb-1 fw-semibold fs-3" >
Chat Application
< / h6 >
< span class = "fs-2 d-block text-body-secondary" > New messages arrived< / span >
< / div >
< / a >
< a href = "../main/app-invoice.html" class = "d-flex align-items-center pb-9 position-relative" >
< div class = "text-bg-light rounded-1 me-3 p-6 d-flex align-items-center justify-content-center" >
< img src = "../assets/images/svgs/icon-dd-invoice.svg" alt = "modernize-img" class = "img-fluid" width = "24" height = "24" / >
< / div >
< div >
< h6 class = "mb-1 fw-semibold fs-3" > Invoice App< / h6 >
< span class = "fs-2 d-block text-body-secondary" > Get latest invoice< / span >
< / div >
< / a >
< a href = "../main/app-contact2.html" class = "d-flex align-items-center pb-9 position-relative" >
< div class = "text-bg-light rounded-1 me-3 p-6 d-flex align-items-center justify-content-center" >
< img src = "../assets/images/svgs/icon-dd-mobile.svg" alt = "modernize-img" class = "img-fluid" width = "24" height = "24" / >
< / div >
< div >
< h6 class = "mb-1 fw-semibold fs-3" >
Contact Application
< / h6 >
< span class = "fs-2 d-block text-body-secondary" > 2 Unsaved Contacts< / span >
< / div >
< / a >
< a href = "../main/app-email.html" class = "d-flex align-items-center pb-9 position-relative" >
< div class = "text-bg-light rounded-1 me-3 p-6 d-flex align-items-center justify-content-center" >
< img src = "../assets/images/svgs/icon-dd-message-box.svg" alt = "modernize-img" class = "img-fluid" width = "24" height = "24" / >
< / div >
< div >
< h6 class = "mb-1 fw-semibold fs-3" > Email App< / h6 >
< span class = "fs-2 d-block text-body-secondary" > Get new emails< / span >
< / div >
< / a >
< / div >
< / div >
< div class = "col-6" >
< div class = "position-relative" >
< a href = "../main/page-user-profile.html" class = "d-flex align-items-center pb-9 position-relative" >
< div class = "text-bg-light rounded-1 me-3 p-6 d-flex align-items-center justify-content-center" >
< img src = "../assets/images/svgs/icon-dd-cart.svg" alt = "modernize-img" class = "img-fluid" width = "24" height = "24" / >
< / div >
< div >
< h6 class = "mb-1 fw-semibold fs-3" >
User Profile
< / h6 >
< span class = "fs-2 d-block text-body-secondary" > learn more information< / span >
< / div >
< / a >
< a href = "../main/app-calendar.html" class = "d-flex align-items-center pb-9 position-relative" >
< div class = "text-bg-light rounded-1 me-3 p-6 d-flex align-items-center justify-content-center" >
< img src = "../assets/images/svgs/icon-dd-date.svg" alt = "modernize-img" class = "img-fluid" width = "24" height = "24" / >
< / div >
< div >
< h6 class = "mb-1 fw-semibold fs-3" >
Calendar App
< / h6 >
< span class = "fs-2 d-block text-body-secondary" > Get dates< / span >
< / div >
< / a >
< a href = "../main/app-contact.html" class = "d-flex align-items-center pb-9 position-relative" >
< div class = "text-bg-light rounded-1 me-3 p-6 d-flex align-items-center justify-content-center" >
< img src = "../assets/images/svgs/icon-dd-lifebuoy.svg" alt = "modernize-img" class = "img-fluid" width = "24" height = "24" / >
< / div >
< div >
< h6 class = "mb-1 fw-semibold fs-3" >
Contact List Table
< / h6 >
< span class = "fs-2 d-block text-body-secondary" > Add new contact< / span >
< / div >
< / a >
< a href = "../main/app-notes.html" class = "d-flex align-items-center pb-9 position-relative" >
< div class = "text-bg-light rounded-1 me-3 p-6 d-flex align-items-center justify-content-center" >
< img src = "../assets/images/svgs/icon-dd-application.svg" alt = "modernize-img" class = "img-fluid" width = "24" height = "24" / >
< / div >
< div >
< h6 class = "mb-1 fw-semibold fs-3" >
Notes Application
< / h6 >
< span class = "fs-2 d-block text-body-secondary" > To-do and Daily tasks< / span >
< / div >
< / a >
< / div >
< / div >
< / div >
< / div >
< div class = "row align-items-center py-3" >
< div class = "col-8" >
< a class = "fw-semibold d-flex align-items-center lh-1" href = "javascript:void(0)" >
< i class = "ti ti-help fs-6 me-2" > < / i > Frequently Asked Questions
< / a >
< / div >
< div class = "col-4" >
< div class = "d-flex justify-content-end pe-4" >
< button class = "btn btn-primary" > Check< / button >
< / div >
< / div >
< / div >
< / div >
< / div >
< div class = "col-4 ms-n4" >
< div class = "position-relative p-7 border-start h-100" >
< h5 class = "fs-5 mb-9 fw-semibold" > Quick Links< / h5 >
< ul class = "" >
< li class = "mb-3" >
< a class = "fw-semibold bg-hover-primary" href = "../main/page-pricing.html" > Pricing Page< / a >
< / li >
< li class = "mb-3" >
< a class = "fw-semibold bg-hover-primary" href = "../main/authentication-login.html" > Authentication
Design< / a >
< / li >
< li class = "mb-3" >
< a class = "fw-semibold bg-hover-primary" href = "../main/authentication-register.html" > Register Now< / a >
< / li >
< li class = "mb-3" >
< a class = "fw-semibold bg-hover-primary" href = "../main/authentication-error.html" > 404 Error Page< / a >
< / li >
< li class = "mb-3" >
< a class = "fw-semibold bg-hover-primary" href = "../main/app-notes.html" > Notes App< / a >
< / li >
< li class = "mb-3" >
< a class = "fw-semibold bg-hover-primary" href = "../main/page-user-profile.html" > User Application< / a >
< / li >
< li class = "mb-3" >
< a class = "fw-semibold bg-hover-primary" href = "../main/page-account-settings.html" > Account Settings< / a >
< / li >
< / ul >
< / div >
< / div >
< / div >
< / div >
< / div >
< / li >
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<!-- end apps Dropdown -->
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
< li class = "nav-item dropdown-hover d-none d-lg-block" >
< a class = "nav-link" href = "../main/app-chat.html" > Chat< / a >
< / li >
< li class = "nav-item dropdown-hover d-none d-lg-block" >
< a class = "nav-link" href = "../main/app-calendar.html" > Calendar< / a >
< / li >
< li class = "nav-item dropdown-hover d-none d-lg-block" >
< a class = "nav-link" href = "../main/app-email.html" > Email< / a >
< / li >
< / ul >
< div class = "d-block d-xl-none" >
< a href = "../main/index.html" class = "text-nowrap nav-link" >
< img src = "../assets/images/logos/dark-logo.svg" width = "180" alt = "modernize-img" / >
< / a >
< / div >
< a class = "navbar-toggler nav-icon-hover-bg rounded-circle p-0 mx-0 border-0" href = "javascript:void(0)" data-bs-toggle = "collapse" data-bs-target = "#navbarNav" aria-controls = "navbarNav" aria-expanded = "false" aria-label = "Toggle navigation" >
< span class = "p-2" >
< i class = "ti ti-dots fs-7" > < / i >
< / span >
< / a >
< div class = "collapse navbar-collapse justify-content-end" id = "navbarNav" >
< div class = "d-flex align-items-center justify-content-between px-0 px-xl-8" >
< a href = "javascript:void(0)" class = "nav-link round-40 p-1 ps-0 d-flex d-xl-none align-items-center justify-content-center" type = "button" data-bs-toggle = "offcanvas" data-bs-target = "#mobilenavbar" aria-controls = "offcanvasWithBothOptions" >
< i class = "ti ti-align-justified fs-7" > < / i >
< / a >
< ul class = "navbar-nav flex-row ms-auto align-items-center justify-content-center" >
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<!-- start language Dropdown -->
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
< li class = "nav-item nav-icon-hover-bg rounded-circle" >
< a class = "nav-link moon dark-layout" href = "javascript:void(0)" >
< i class = "ti ti-moon moon" > < / i >
< / a >
< a class = "nav-link sun light-layout" href = "javascript:void(0)" >
< i class = "ti ti-sun sun" > < / i >
< / a >
< / li >
< li class = "nav-item nav-icon-hover-bg rounded-circle dropdown" >
< a class = "nav-link" href = "javascript:void(0)" id = "drop2" aria-expanded = "false" >
< img src = "../assets/images/svgs/icon-flag-en.svg" alt = "modernize-img" width = "20px" height = "20px" class = "rounded-circle object-fit-cover round-20" / >
< / a >
< div class = "dropdown-menu dropdown-menu-end dropdown-menu-animate-up" aria-labelledby = "drop2" >
< div class = "message-body" >
< a href = "javascript:void(0)" class = "d-flex align-items-center gap-2 py-3 px-4 dropdown-item" >
< div class = "position-relative" >
< img src = "../assets/images/svgs/icon-flag-en.svg" alt = "modernize-img" width = "20px" height = "20px" class = "rounded-circle object-fit-cover round-20" / >
< / div >
< p class = "mb-0 fs-3" > English (UK)< / p >
< / a >
< a href = "javascript:void(0)" class = "d-flex align-items-center gap-2 py-3 px-4 dropdown-item" >
< div class = "position-relative" >
< img src = "../assets/images/svgs/icon-flag-cn.svg" alt = "modernize-img" width = "20px" height = "20px" class = "rounded-circle object-fit-cover round-20" / >
< / div >
< p class = "mb-0 fs-3" > 中国人 (Chinese)< / p >
< / a >
< a href = "javascript:void(0)" class = "d-flex align-items-center gap-2 py-3 px-4 dropdown-item" >
< div class = "position-relative" >
< img src = "../assets/images/svgs/icon-flag-fr.svg" alt = "modernize-img" width = "20px" height = "20px" class = "rounded-circle object-fit-cover round-20" / >
< / div >
< p class = "mb-0 fs-3" > français (French)< / p >
< / a >
< a href = "javascript:void(0)" class = "d-flex align-items-center gap-2 py-3 px-4 dropdown-item" >
< div class = "position-relative" >
< img src = "../assets/images/svgs/icon-flag-sa.svg" alt = "modernize-img" width = "20px" height = "20px" class = "rounded-circle object-fit-cover round-20" / >
< / div >
< p class = "mb-0 fs-3" > عربي (Arabic)< / p >
< / a >
< / div >
< / div >
< / li >
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<!-- end language Dropdown -->
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<!-- start shopping cart Dropdown -->
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
< li class = "nav-item nav-icon-hover-bg rounded-circle" >
< a class = "nav-link position-relative" href = "javascript:void(0)" data-bs-toggle = "offcanvas" data-bs-target = "#offcanvasRight" aria-controls = "offcanvasRight" >
< i class = "ti ti-basket" > < / i >
< span class = "popup-badge rounded-pill bg-danger text-white fs-2" > 2< / span >
< / a >
< / li >
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<!-- end shopping cart Dropdown -->
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<!-- start notification Dropdown -->
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
< li class = "nav-item nav-icon-hover-bg rounded-circle dropdown" >
< a class = "nav-link position-relative" href = "javascript:void(0)" id = "drop2" aria-expanded = "false" >
< i class = "ti ti-bell-ringing" > < / i >
< div class = "notification bg-primary rounded-circle" > < / div >
< / a >
< div class = "dropdown-menu content-dd dropdown-menu-end dropdown-menu-animate-up" aria-labelledby = "drop2" >
< div class = "d-flex align-items-center justify-content-between py-3 px-7" >
< h5 class = "mb-0 fs-5 fw-semibold" > Notifications< / h5 >
< span class = "badge text-bg-primary rounded-4 px-3 py-1 lh-sm" > 5 new< / span >
< / div >
< div class = "message-body" data-simplebar >
< a href = "javascript:void(0)" class = "py-6 px-7 d-flex align-items-center dropdown-item" >
< span class = "me-3" >
< img src = "../assets/images/profile/user-2.jpg" alt = "user" class = "rounded-circle" width = "48" height = "48" / >
< / span >
< div class = "w-100" >
< h6 class = "mb-1 fw-semibold lh-base" > Roman Joined the Team!< / h6 >
< span class = "fs-2 d-block text-body-secondary" > Congratulate him< / span >
< / div >
< / a >
< a href = "javascript:void(0)" class = "py-6 px-7 d-flex align-items-center dropdown-item" >
< span class = "me-3" >
< img src = "../assets/images/profile/user-3.jpg" alt = "user" class = "rounded-circle" width = "48" height = "48" / >
< / span >
< div class = "w-100" >
< h6 class = "mb-1 fw-semibold lh-base" > New message< / h6 >
< span class = "fs-2 d-block text-body-secondary" > Salma sent you new message< / span >
< / div >
< / a >
< a href = "javascript:void(0)" class = "py-6 px-7 d-flex align-items-center dropdown-item" >
< span class = "me-3" >
< img src = "../assets/images/profile/user-4.jpg" alt = "user" class = "rounded-circle" width = "48" height = "48" / >
< / span >
< div class = "w-100" >
< h6 class = "mb-1 fw-semibold lh-base" > Bianca sent payment< / h6 >
< span class = "fs-2 d-block text-body-secondary" > Check your earnings< / span >
< / div >
< / a >
< a href = "javascript:void(0)" class = "py-6 px-7 d-flex align-items-center dropdown-item" >
< span class = "me-3" >
< img src = "../assets/images/profile/user-5.jpg" alt = "user" class = "rounded-circle" width = "48" height = "48" / >
< / span >
< div class = "w-100" >
< h6 class = "mb-1 fw-semibold lh-base" > Jolly completed tasks< / h6 >
< span class = "fs-2 d-block text-body-secondary" > Assign her new tasks< / span >
< / div >
< / a >
< a href = "javascript:void(0)" class = "py-6 px-7 d-flex align-items-center dropdown-item" >
< span class = "me-3" >
< img src = "../assets/images/profile/user-6.jpg" alt = "user" class = "rounded-circle" width = "48" height = "48" / >
< / span >
< div class = "w-100" >
< h6 class = "mb-1 fw-semibold lh-base" > John received payment< / h6 >
< span class = "fs-2 d-block text-body-secondary" > $230 deducted from account< / span >
< / div >
< / a >
< a href = "javascript:void(0)" class = "py-6 px-7 d-flex align-items-center dropdown-item" >
< span class = "me-3" >
< img src = "../assets/images/profile/user-7.jpg" alt = "user" class = "rounded-circle" width = "48" height = "48" / >
< / span >
< div class = "w-100" >
< h6 class = "mb-1 fw-semibold lh-base" > Roman Joined the Team!< / h6 >
< span class = "fs-2 d-block text-body-secondary" > Congratulate him< / span >
< / div >
< / a >
< / div >
< div class = "py-6 px-7 mb-1" >
< button class = "btn btn-outline-primary w-100" > See All Notifications< / button >
< / div >
< / div >
< / li >
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<!-- end notification Dropdown -->
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<!-- start profile Dropdown -->
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
< li class = "nav-item dropdown" >
< a class = "nav-link pe-0" href = "javascript:void(0)" id = "drop1" aria-expanded = "false" >
< div class = "d-flex align-items-center" >
< div class = "user-profile-img" >
< img src = "../assets/images/profile/user-1.jpg" class = "rounded-circle" width = "35" height = "35" alt = "modernize-img" / >
< / div >
< / div >
< / a >
< div class = "dropdown-menu content-dd dropdown-menu-end dropdown-menu-animate-up" aria-labelledby = "drop1" >
< div class = "profile-dropdown position-relative" data-simplebar >
< div class = "py-3 px-7 pb-0" >
< h5 class = "mb-0 fs-5 fw-semibold" > User Profile< / h5 >
< / div >
< div class = "d-flex align-items-center py-9 mx-7 border-bottom" >
< img src = "../assets/images/profile/user-1.jpg" class = "rounded-circle" width = "80" height = "80" alt = "modernize-img" / >
< div class = "ms-3" >
< h5 class = "mb-1 fs-3" > Mathew Anderson< / h5 >
< span class = "mb-1 d-block" > Designer< / span >
< p class = "mb-0 d-flex align-items-center gap-2" >
< i class = "ti ti-mail fs-4" > < / i > info@modernize.com
< / p >
< / div >
< / div >
< div class = "message-body" >
< a href = "../main/page-user-profile.html" class = "py-8 px-7 mt-8 d-flex align-items-center" >
< span class = "d-flex align-items-center justify-content-center text-bg-light rounded-1 p-6" >
< img src = "../assets/images/svgs/icon-account.svg" alt = "modernize-img" width = "24" height = "24" / >
< / span >
< div class = "w-100 ps-3" >
< h6 class = "mb-1 fs-3 fw-semibold lh-base" > My Profile< / h6 >
< span class = "fs-2 d-block text-body-secondary" > Account Settings< / span >
< / div >
< / a >
< a href = "../main/app-email.html" class = "py-8 px-7 d-flex align-items-center" >
< span class = "d-flex align-items-center justify-content-center text-bg-light rounded-1 p-6" >
< img src = "../assets/images/svgs/icon-inbox.svg" alt = "modernize-img" width = "24" height = "24" / >
< / span >
< div class = "w-100 ps-3" >
< h6 class = "mb-1 fs-3 fw-semibold lh-base" > My Inbox< / h6 >
< span class = "fs-2 d-block text-body-secondary" > Messages & Emails< / span >
< / div >
< / a >
< a href = "../main/app-notes.html" class = "py-8 px-7 d-flex align-items-center" >
< span class = "d-flex align-items-center justify-content-center text-bg-light rounded-1 p-6" >
< img src = "../assets/images/svgs/icon-tasks.svg" alt = "modernize-img" width = "24" height = "24" / >
< / span >
< div class = "w-100 ps-3" >
< h6 class = "mb-1 fs-3 fw-semibold lh-base" > My Task< / h6 >
< span class = "fs-2 d-block text-body-secondary" > To-do and Daily Tasks< / span >
< / div >
< / a >
< / div >
< div class = "d-grid py-4 px-7 pt-8" >
< div class = "upgrade-plan bg-primary-subtle position-relative overflow-hidden rounded-4 p-4 mb-9" >
< div class = "row" >
< div class = "col-6" >
< h5 class = "fs-4 mb-3 fw-semibold" > Unlimited Access< / h5 >
< button class = "btn btn-primary" > Upgrade< / button >
< / div >
< div class = "col-6" >
< div class = "m-n4 unlimited-img" >
< img src = "../assets/images/backgrounds/unlimited-bg.png" alt = "modernize-img" class = "w-100" / >
< / div >
< / div >
< / div >
< / div >
< a href = "../main/authentication-login.html" class = "btn btn-outline-primary" > Log Out< / a >
< / div >
< / div >
< / div >
< / li >
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<!-- end profile Dropdown -->
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
< / ul >
< / div >
< / div >
< / nav >
< / div >
< / header >
<!-- Header End -->
< aside class = "left-sidebar with-horizontal" >
<!-- Sidebar scroll -->
< div >
<!-- Sidebar navigation -->
< nav id = "sidebarnavh" class = "sidebar-nav scroll-sidebar container-fluid" >
< ul id = "sidebarnav" >
<!-- ============================= -->
<!-- Home -->
<!-- ============================= -->
< li class = "nav-small-cap" >
< i class = "ti ti-dots nav-small-cap-icon fs-4" > < / i >
< span class = "hide-menu" > Home< / span >
< / li >
<!-- =================== -->
<!-- Dashboard -->
<!-- =================== -->
< li class = "sidebar-item" >
< a class = "sidebar-link has-arrow" href = "javascript:void(0)" aria-expanded = "false" >
< span >
< i class = "ti ti-home-2" > < / i >
< / span >
< span class = "hide-menu" > Dashboard< / span >
< / a >
< ul aria-expanded = "false" class = "collapse first-level" >
< li class = "sidebar-item" >
< a href = "../main/index.html" class = "sidebar-link" >
< i class = "ti ti-aperture" > < / i >
< span class = "hide-menu" > Modern< / span >
< / a >
< / li >
< li class = "sidebar-item" >
< a href = "../main/index2.html" class = "sidebar-link" >
< i class = "ti ti-shopping-cart" > < / i >
< span class = "hide-menu" > eCommerce< / span >
< / a >
< / li >
< li class = "sidebar-item" >
< a href = "../main/index3.html" class = "sidebar-link" >
< i class = "ti ti-currency-dollar" > < / i >
< span class = "hide-menu" > NFT< / span >
< / a >
< / li >
< li class = "sidebar-item" >
< a href = "../main/index4.html" class = "sidebar-link" >
< i class = "ti ti-cpu" > < / i >
< span class = "hide-menu" > Crypto< / span >
< / a >
< / li >
< li class = "sidebar-item" >
< a href = "../main/index5.html" class = "sidebar-link" >
< i class = "ti ti-activity-heartbeat" > < / i >
< span class = "hide-menu" > General< / span >
< / a >
< / li >
< li class = "sidebar-item" >
< a href = "../main/index6.html" class = "sidebar-link" >
< i class = "ti ti-playlist" > < / i >
< span class = "hide-menu" > Music< / span >
< / a >
< / li >
< / ul >
< / li >
<!-- ============================= -->
<!-- Apps -->
<!-- ============================= -->
< li class = "nav-small-cap" >
< i class = "ti ti-dots nav-small-cap-icon fs-4" > < / i >
< span class = "hide-menu" > Apps< / span >
< / li >
< li class = "sidebar-item" >
< a class = "sidebar-link two-column has-arrow" href = "javascript:void(0)" aria-expanded = "false" >
< span >
< i class = "ti ti-archive" > < / i >
< / span >
< span class = "hide-menu" > Apps< / span >
< / a >
< ul aria-expanded = "false" class = "collapse first-level" >
< li class = "sidebar-item" >
< a href = "../main/app-calendar.html" class = "sidebar-link" >
< i class = "ti ti-calendar" > < / i >
< span class = "hide-menu" > Calendar< / span >
< / a >
< / li >
< li class = "sidebar-item" >
< a href = "../main/app-kanban.html" class = "sidebar-link" >
< i class = "ti ti-layout-kanban" > < / i >
< span class = "hide-menu" > Kanban< / span >
< / a >
< / li >
< li class = "sidebar-item" >
< a href = "../main/app-chat.html" class = "sidebar-link" >
< i class = "ti ti-message-dots" > < / i >
< span class = "hide-menu" > Chat< / span >
< / a >
< / li >
< li class = "sidebar-item" >
< a class = "sidebar-link" href = "../main/app-email.html" aria-expanded = "false" >
< span >
< i class = "ti ti-mail" > < / i >
< / span >
< span class = "hide-menu" > Email< / span >
< / a >
< / li >
< li class = "sidebar-item" >
< a href = "../main/app-contact.html" class = "sidebar-link" >
< i class = "ti ti-phone" > < / i >
< span class = "hide-menu" > Contact Table< / span >
< / a >
< / li >
< li class = "sidebar-item" >
< a href = "../main/app-contact2.html" class = "sidebar-link" >
< i class = "ti ti-list-details" > < / i >
< span class = "hide-menu" > Contact List< / span >
< / a >
< / li >
< li class = "sidebar-item" >
< a href = "../main/app-notes.html" class = "sidebar-link" >
< i class = "ti ti-notes" > < / i >
< span class = "hide-menu" > Notes< / span >
< / a >
< / li >
< li class = "sidebar-item" >
< a href = "../main/app-invoice.html" class = "sidebar-link" >
< i class = "ti ti-file-text" > < / i >
< span class = "hide-menu" > Invoice< / span >
< / a >
< / li >
< li class = "sidebar-item" >
< a href = "../main/page-user-profile.html" class = "sidebar-link" >
< i class = "ti ti-user-circle" > < / i >
< span class = "hide-menu" > User Profile< / span >
< / a >
< / li >
< li class = "sidebar-item" >
< a href = "../main/blog-posts.html" class = "sidebar-link" >
< i class = "ti ti-article" > < / i >
< span class = "hide-menu" > Posts< / span >
< / a >
< / li >
< li class = "sidebar-item" >
< a href = "../main/blog-detail.html" class = "sidebar-link" >
< i class = "ti ti-details" > < / i >
< span class = "hide-menu" > Detail< / span >
< / a >
< / li >
< li class = "sidebar-item" >
< a href = "../main/eco-shop.html" class = "sidebar-link" >
< i class = "ti ti-shopping-cart" > < / i >
< span class = "hide-menu" > Shop< / span >
< / a >
< / li >
< li class = "sidebar-item" >
< a href = "../main/eco-shop-detail.html" class = "sidebar-link" >
< i class = "ti ti-basket" > < / i >
< span class = "hide-menu" > Shop Detail< / span >
< / a >
< / li >
< li class = "sidebar-item" >
< a href = "../main/eco-product-list.html" class = "sidebar-link" >
< i class = "ti ti-list-check" > < / i >
< span class = "hide-menu" > List< / span >
< / a >
< / li >
< li class = "sidebar-item" >
< a href = "../main/eco-checkout.html" class = "sidebar-link" >
< i class = "ti ti-brand-shopee" > < / i >
< span class = "hide-menu" > Checkout< / span >
< / a >
< / li >
< li class = "sidebar-item" >
< a class = "sidebar-link" href = "../main/eco-add-product.html" >
< i class = "ti ti-file-plus" > < / i >
< span class = "hide-menu" > Add Product< / span >
< / a >
< / li >
< li class = "sidebar-item" >
< a class = "sidebar-link" href = "../main/eco-edit-product.html" >
< i class = "ti ti-file-pencil" > < / i >
< span class = "hide-menu" > Edit Product< / span >
< / a >
< / li >
< / ul >
< / li >
<!-- ============================= -->
<!-- Frontend pages -->
<!-- ============================= -->
< li class = "nav-small-cap" >
< i class = "ti ti-dots nav-small-cap-icon fs-4" > < / i >
< span class = "hide-menu" > Frontend pages< / span >
< / li >
<!-- =================== -->
<!-- pages -->
<!-- =================== -->
< li class = "sidebar-item" >
< a class = "sidebar-link has-arrow" href = "javascript:void(0)" aria-expanded = "false" >
< span class = "rounded-3" >
< i class = "ti ti-app-window" > < / i >
< / span >
< span class = "hide-menu" > Frontend pages< / span >
< / a >
< ul aria-expanded = "false" class = "collapse first-level" >
< li class = "sidebar-item" >
< a href = "../main/frontend-landingpage.html" class = "sidebar-link" >
< i class = "ti ti-circle" > < / i >
< span class = "hide-menu" > Homepage< / span >
< / a >
< / li >
< li class = "sidebar-item" >
< a href = "../main/frontend-aboutpage.html" class = "sidebar-link" >
< i class = "ti ti-circle" > < / i >
< span class = "hide-menu" > About Us< / span >
< / a >
< / li >
< li class = "sidebar-item" >
< a href = "../main/frontend-contactpage.html" class = "sidebar-link" >
< i class = "ti ti-circle" > < / i >
< span class = "hide-menu" > Contact Us< / span >
< / a >
< / li >
< li class = "sidebar-item" >
< a href = "../main/frontend-blogpage.html" class = "sidebar-link" >
< i class = "ti ti-circle" > < / i >
< span class = "hide-menu" > Blog< / span >
< / a >
< / li >
< li class = "sidebar-item" >
< a href = "../main/frontend-blogdetailpage.html" class = "sidebar-link" >
< i class = "ti ti-circle" > < / i >
< span class = "hide-menu" > Blog Details< / span >
< / a >
< / li >
< / ul >
< / li >
<!-- ============================= -->
<!-- PAGES -->
<!-- ============================= -->
< li class = "nav-small-cap" >
< i class = "ti ti-dots nav-small-cap-icon fs-4" > < / i >
< span class = "hide-menu" > PAGES< / span >
< / li >
< li class = "sidebar-item" >
< a class = "sidebar-link has-arrow" href = "javascript:void(0)" aria-expanded = "false" >
< span >
< i class = "ti ti-notebook" > < / i >
< / span >
< span class = "hide-menu" > Pages< / span >
< / a >
< ul aria-expanded = "false" class = "collapse first-level" >
< li class = "sidebar-item" >
< a href = "../main/page-faq.html" class = "sidebar-link" >
< i class = "ti ti-help" > < / i >
< span class = "hide-menu" > FAQ< / span >
< / a >
< / li >
< li class = "sidebar-item" >
< a href = "../main/page-account-settings.html" class = "sidebar-link" >
< i class = "ti ti-user-circle" > < / i >
< span class = "hide-menu" > Account Setting< / span >
< / a >
< / li >
< li class = "sidebar-item" >
< a href = "../main/page-pricing.html" class = "sidebar-link" >
< i class = "ti ti-currency-dollar" > < / i >
< span class = "hide-menu" > Pricing< / span >
< / a >
< / li >
< li class = "sidebar-item" >
< a href = "../main/widgets-cards.html" class = "sidebar-link" >
< i class = "ti ti-cards" > < / i >
< span class = "hide-menu" > Card< / span >
< / a >
< / li >
< li class = "sidebar-item" >
< a href = "../main/widgets-banners.html" class = "sidebar-link" >
< i class = "ti ti-ad" > < / i >
< span class = "hide-menu" > Banner< / span >
< / a >
< / li >
< li class = "sidebar-item" >
< a href = "../main/widgets-charts.html" class = "sidebar-link" >
< i class = "ti ti-chart-bar" > < / i >
< span class = "hide-menu" > Charts< / span >
< / a >
< / li >
< li class = "sidebar-item" >
< a href = "../landingpage/index.html" class = "sidebar-link" >
< i class = "ti ti-app-window" > < / i >
< span class = "hide-menu" > Landing Page< / span >
< / a >
< / li >
< / ul >
< / li >
<!-- ============================= -->
<!-- UI -->
<!-- ============================= -->
< li class = "nav-small-cap" >
< i class = "ti ti-dots nav-small-cap-icon fs-4" > < / i >
< span class = "hide-menu" > UI< / span >
< / li >
<!-- =================== -->
<!-- UI Elements -->
<!-- =================== -->
< li class = "sidebar-item mega-dropdown" >
< a class = "sidebar-link has-arrow" href = "javascript:void(0)" aria-expanded = "false" >
< span class = "rounded-3" >
< i class = "ti ti-layout-grid" > < / i >
< / span >
< span class = "hide-menu" > UI< / span >
< / a >
< ul aria-expanded = "false" class = "collapse first-level" >
< li class = "sidebar-item" >
< a href = "../main/ui-accordian.html" class = "sidebar-link" >
< i class = "ti ti-circle" > < / i >
< span class = "hide-menu" > Accordian< / span >
< / a >
< / li >
< li class = "sidebar-item" >
< a href = "../main/ui-badge.html" class = "sidebar-link" >
< i class = "ti ti-circle" > < / i >
< span class = "hide-menu" > Badge< / span >
< / a >
< / li >
< li class = "sidebar-item" >
< a href = "../main/ui-buttons.html" class = "sidebar-link" >
< i class = "ti ti-circle" > < / i >
< span class = "hide-menu" > Buttons< / span >
< / a >
< / li >
< li class = "sidebar-item" >
< a href = "../main/ui-dropdowns.html" class = "sidebar-link" >
< i class = "ti ti-circle" > < / i >
< span class = "hide-menu" > Dropdowns< / span >
< / a >
< / li >
< li class = "sidebar-item" >
< a href = "../main/ui-modals.html" class = "sidebar-link" >
< i class = "ti ti-circle" > < / i >
< span class = "hide-menu" > Modals< / span >
< / a >
< / li >
< li class = "sidebar-item" >
< a href = "../main/ui-tab.html" class = "sidebar-link" >
< i class = "ti ti-circle" > < / i >
< span class = "hide-menu" > Tab< / span >
< / a >
< / li >
< li class = "sidebar-item" >
< a href = "../main/ui-tooltip-popover.html" class = "sidebar-link" >
< i class = "ti ti-circle" > < / i >
< span class = "hide-menu" > Tooltip & Popover< / span >
< / a >
< / li >
< li class = "sidebar-item" >
< a href = "../main/ui-notification.html" class = "sidebar-link" >
< i class = "ti ti-circle" > < / i >
< span class = "hide-menu" > Alerts< / span >
< / a >
< / li >
< li class = "sidebar-item" >
< a href = "../main/ui-progressbar.html" class = "sidebar-link" >
< i class = "ti ti-circle" > < / i >
< span class = "hide-menu" > Progressbar< / span >
< / a >
< / li >
< li class = "sidebar-item" >
< a href = "../main/ui-pagination.html" class = "sidebar-link" >
< i class = "ti ti-circle" > < / i >
< span class = "hide-menu" > Pagination< / span >
< / a >
< / li >
< li class = "sidebar-item" >
< a href = "../main/ui-typography.html" class = "sidebar-link" >
< i class = "ti ti-circle" > < / i >
< span class = "hide-menu" > Typography< / span >
< / a >
< / li >
< li class = "sidebar-item" >
< a href = "../main/ui-bootstrap-ui.html" class = "sidebar-link" >
< i class = "ti ti-circle" > < / i >
< span class = "hide-menu" > Bootstrap UI< / span >
< / a >
< / li >
< li class = "sidebar-item" >
< a href = "../main/ui-breadcrumb.html" class = "sidebar-link" >
< i class = "ti ti-circle" > < / i >
< span class = "hide-menu" > Breadcrumb< / span >
< / a >
< / li >
< li class = "sidebar-item" >
< a href = "../main/ui-offcanvas.html" class = "sidebar-link" >
< i class = "ti ti-circle" > < / i >
< span class = "hide-menu" > Offcanvas< / span >
< / a >
< / li >
< li class = "sidebar-item" >
< a href = "../main/ui-lists.html" class = "sidebar-link" >
< i class = "ti ti-circle" > < / i >
< span class = "hide-menu" > Lists< / span >
< / a >
< / li >
< li class = "sidebar-item" >
< a href = "../main/ui-grid.html" class = "sidebar-link" >
< i class = "ti ti-circle" > < / i >
< span class = "hide-menu" > Grid< / span >
< / a >
< / li >
< li class = "sidebar-item" >
< a href = "../main/ui-carousel.html" class = "sidebar-link" >
< i class = "ti ti-circle" > < / i >
< span class = "hide-menu" > Carousel< / span >
< / a >
< / li >
< li class = "sidebar-item" >
< a href = "../main/ui-scrollspy.html" class = "sidebar-link" >
< i class = "ti ti-circle" > < / i >
< span class = "hide-menu" > Scrollspy< / span >
< / a >
< / li >
< li class = "sidebar-item" >
< a href = "../main/ui-spinner.html" class = "sidebar-link" >
< i class = "ti ti-circle" > < / i >
< span class = "hide-menu" > Spinner< / span >
< / a >
< / li >
< li class = "sidebar-item" >
< a href = "../main/ui-link.html" class = "sidebar-link" >
< i class = "ti ti-circle" > < / i >
< span class = "hide-menu" > Link< / span >
< / a >
< / li >
< / ul >
< / li >
<!-- ============================= -->
<!-- Forms -->
<!-- ============================= -->
< li class = "nav-small-cap" >
< i class = "ti ti-dots nav-small-cap-icon fs-4" > < / i >
< span class = "hide-menu" > Forms< / span >
< / li >
<!-- =================== -->
<!-- Forms -->
<!-- =================== -->
< li class = "sidebar-item" >
< a class = "sidebar-link two-column has-arrow" href = "javascript:void(0)" aria-expanded = "false" >
< span class = "rounded-3" >
< i class = "ti ti-file-text" > < / i >
< / span >
< span class = "hide-menu" > Forms< / span >
< / a >
< ul aria-expanded = "false" class = "collapse first-level" >
<!-- form elements -->
< li class = "sidebar-item" >
< a href = "../main/form-inputs.html" class = "sidebar-link" >
< i class = "ti ti-circle" > < / i >
< span class = "hide-menu" > Forms Input< / span >
< / a >
< / li >
< li class = "sidebar-item" >
< a href = "../main/form-input-groups.html" class = "sidebar-link" >
< i class = "ti ti-circle" > < / i >
< span class = "hide-menu" > Input Groups< / span >
< / a >
< / li >
< li class = "sidebar-item" >
< a href = "../main/form-input-grid.html" class = "sidebar-link" >
< i class = "ti ti-circle" > < / i >
< span class = "hide-menu" > Input Grid< / span >
< / a >
< / li >
< li class = "sidebar-item" >
< a href = "../main/form-checkbox-radio.html" class = "sidebar-link" >
< i class = "ti ti-circle" > < / i >
< span class = "hide-menu" > Checkbox & Radios< / span >
< / a >
< / li >
< li class = "sidebar-item" >
< a href = "../main/form-bootstrap-switch.html" class = "sidebar-link" >
< i class = "ti ti-circle" > < / i >
< span class = "hide-menu" > Bootstrap Switch< / span >
< / a >
< / li >
< li class = "sidebar-item" >
< a href = "../main/form-select2.html" class = "sidebar-link" >
< i class = "ti ti-circle" > < / i >
< span class = "hide-menu" > Select2< / span >
< / a >
< / li >
<!-- form inputs -->
< li class = "sidebar-item" >
< a href = "../main/form-basic.html" class = "sidebar-link" >
< i class = "ti ti-circle" > < / i >
< span class = "hide-menu" > Basic Form< / span >
< / a >
< / li >
< li class = "sidebar-item" >
< a href = "../main/form-vertical.html" class = "sidebar-link" >
< i class = "ti ti-circle" > < / i >
< span class = "hide-menu" > Form Vertical< / span >
< / a >
< / li >
< li class = "sidebar-item" >
< a href = "../main/form-horizontal.html" class = "sidebar-link" >
< i class = "ti ti-circle" > < / i >
< span class = "hide-menu" > Form Horizontal< / span >
< / a >
< / li >
< li class = "sidebar-item" >
< a href = "../main/form-actions.html" class = "sidebar-link" >
< i class = "ti ti-circle" > < / i >
< span class = "hide-menu" > Form Actions< / span >
< / a >
< / li >
< li class = "sidebar-item" >
< a href = "../main/form-row-separator.html" class = "sidebar-link" >
< i class = "ti ti-circle" > < / i >
< span class = "hide-menu" > Row Separator< / span >
< / a >
< / li >
< li class = "sidebar-item" >
< a href = "../main/form-bordered.html" class = "sidebar-link" >
< i class = "ti ti-circle" > < / i >
< span class = "hide-menu" > Form Bordered< / span >
< / a >
< / li >
< li class = "sidebar-item" >
< a href = "../main/form-detail.html" class = "sidebar-link" >
< i class = "ti ti-circle" > < / i >
< span class = "hide-menu" > Form Detail< / span >
< / a >
< / li >
<!-- form wizard -->
< li class = "sidebar-item" >
< a href = "../main/form-wizard.html" class = "sidebar-link" >
< i class = "ti ti-circle" > < / i >
< span class = "hide-menu" > Form Wizard< / span >
< / a >
< / li >
<!-- Quill Editor -->
< li class = "sidebar-item" >
< a href = "../main/form-editor-quill.html" class = "sidebar-link" >
< i class = "ti ti-circle" > < / i >
< span class = "hide-menu" > Quill Editor< / span >
< / a >
< / li >
< / ul >
< / li >
<!-- ============================= -->
<!-- Tables -->
<!-- ============================= -->
< li class = "nav-small-cap" >
< i class = "ti ti-dots nav-small-cap-icon fs-4" > < / i >
< span class = "hide-menu" > Tables< / span >
< / li >
<!-- =================== -->
<!-- Bootstrap Table -->
<!-- =================== -->
< li class = "sidebar-item" >
< a class = "sidebar-link has-arrow" href = "javascript:void(0)" aria-expanded = "false" >
< span class = "rounded-3" >
< i class = "ti ti-layout-sidebar" > < / i >
< / span >
< span class = "hide-menu" > Tables< / span >
< / a >
< ul aria-expanded = "false" class = "collapse first-level" >
< li class = "sidebar-item" >
< a href = "../main/table-basic.html" class = "sidebar-link" >
< i class = "ti ti-circle" > < / i >
< span class = "hide-menu" > Basic Table< / span >
< / a >
< / li >
< li class = "sidebar-item" >
< a href = "../main/table-dark-basic.html" class = "sidebar-link" >
< i class = "ti ti-circle" > < / i >
< span class = "hide-menu" > Dark Basic Table< / span >
< / a >
< / li >
< li class = "sidebar-item" >
< a href = "../main/table-sizing.html" class = "sidebar-link" >
< i class = "ti ti-circle" > < / i >
< span class = "hide-menu" > Sizing Table< / span >
< / a >
< / li >
< li class = "sidebar-item" >
< a href = "../main/table-layout-coloured.html" class = "sidebar-link" >
< i class = "ti ti-circle" > < / i >
< span class = "hide-menu" > Coloured Table< / span >
< / a >
< / li >
< li class = "sidebar-item" >
< a href = "../main/table-datatable-basic.html" class = "sidebar-link" >
< i class = "ti ti-circle" > < / i >
< span class = "hide-menu" > Basic Initialisation< / span >
< / a >
< / li >
< li class = "sidebar-item" >
< a href = "../main/table-datatable-api.html" class = "sidebar-link" >
< i class = "ti ti-circle" > < / i >
< span class = "hide-menu" > API< / span >
< / a >
< / li >
< li class = "sidebar-item" >
< a href = "../main/table-datatable-advanced.html" class = "sidebar-link" >
< i class = "ti ti-circle" > < / i >
< span class = "hide-menu" > Advanced Initialisation< / span >
< / a >
< / li >
< / ul >
< / li >
<!-- ============================= -->
<!-- Charts -->
<!-- ============================= -->
< li class = "nav-small-cap" >
< i class = "ti ti-dots nav-small-cap-icon fs-4" > < / i >
< span class = "hide-menu" > Charts< / span >
< / li >
<!-- =================== -->
<!-- Apex Chart -->
<!-- =================== -->
< li class = "sidebar-item" >
< a class = "sidebar-link has-arrow" href = "javascript:void(0)" aria-expanded = "false" >
< span class = "rounded-3" >
< i class = "ti ti-chart-pie" > < / i >
< / span >
< span class = "hide-menu" > Charts< / span >
< / a >
< ul aria-expanded = "false" class = "collapse first-level" >
< li class = "sidebar-item" >
< a href = "../main/chart-apex-line.html" class = "sidebar-link" >
< i class = "ti ti-circle" > < / i >
< span class = "hide-menu" > Line Chart< / span >
< / a >
< / li >
< li class = "sidebar-item" >
< a href = "../main/chart-apex-area.html" class = "sidebar-link" >
< i class = "ti ti-circle" > < / i >
< span class = "hide-menu" > Area Chart< / span >
< / a >
< / li >
< li class = "sidebar-item" >
< a href = "../main/chart-apex-bar.html" class = "sidebar-link" >
< i class = "ti ti-circle" > < / i >
< span class = "hide-menu" > Bar Chart< / span >
< / a >
< / li >
< li class = "sidebar-item" >
< a href = "../main/chart-apex-pie.html" class = "sidebar-link" >
< i class = "ti ti-circle" > < / i >
< span class = "hide-menu" > Pie Chart< / span >
< / a >
< / li >
< li class = "sidebar-item" >
< a href = "../main/chart-apex-radial.html" class = "sidebar-link" >
< i class = "ti ti-circle" > < / i >
< span class = "hide-menu" > Radial Chart< / span >
< / a >
< / li >
< li class = "sidebar-item" >
< a href = "../main/chart-apex-radar.html" class = "sidebar-link" >
< i class = "ti ti-circle" > < / i >
< span class = "hide-menu" > Radar Chart< / span >
< / a >
< / li >
< / ul >
< / li >
<!-- ============================= -->
<!-- Icons -->
<!-- ============================= -->
< li class = "nav-small-cap" >
< i class = "ti ti-dots nav-small-cap-icon fs-4" > < / i >
< span class = "hide-menu" > Icons< / span >
< / li >
<!-- =================== -->
<!-- Tabler Icon -->
<!-- =================== -->
< li class = "sidebar-item" >
< a class = "sidebar-link has-arrow" href = "javascript:void(0)" aria-expanded = "false" >
< span class = "rounded-3" >
< i class = "ti ti-archive" > < / i >
< / span >
< span class = "hide-menu" > Icon< / span >
< / a >
< ul aria-expanded = "false" class = "collapse first-level" >
< li class = "sidebar-item" >
< a href = "../main/icon-tabler.html" class = "sidebar-link" >
< i class = "ti ti-circle" > < / i >
< span class = "hide-menu" > Tabler Icon< / span >
< / a >
< / li >
< li class = "sidebar-item" >
< a href = "../main/icon-solar.html" class = "sidebar-link" >
< i class = "ti ti-circle" > < / i >
< span class = "hide-menu" > Solar Icon< / span >
< / a >
< / li >
< / ul >
< / li >
<!-- multi level -->
< li class = "sidebar-item" >
< a class = "sidebar-link has-arrow" href = "javascript:void(0)" aria-expanded = "false" >
< span class = "rounded-3" >
< iconify-icon icon = "solar:airbuds-case-minimalistic-line-duotone" class = "ti" > < / iconify-icon >
< / span >
< span class = "hide-menu" > Multi DD< / span >
< / a >
< ul aria-expanded = "false" class = "collapse first-level" >
< li class = "sidebar-item" >
< a href = "../docs/index.html" class = "sidebar-link" >
< i class = "ti ti-circle" > < / i >
< span class = "hide-menu" > Documentation< / span >
< / a >
< / li >
< li class = "sidebar-item" >
< a href = "javascript:void(0)" class = "sidebar-link" >
< i class = "ti ti-circle" > < / i >
< span class = "hide-menu" > Page 1< / span >
< / a >
< / li >
< li class = "sidebar-item" >
< a href = "javascript:void(0)" class = "sidebar-link has-arrow" >
< i class = "ti ti-circle" > < / i >
< span class = "hide-menu" > Page 2< / span >
< / a >
< ul aria-expanded = "false" class = "collapse second-level" >
< li class = "sidebar-item" >
< a href = "javascript:void(0)" class = "sidebar-link" >
< i class = "ti ti-circle" > < / i >
< span class = "hide-menu" > Page 2.1< / span >
< / a >
< / li >
< li class = "sidebar-item" >
< a href = "javascript:void(0)" class = "sidebar-link" >
< i class = "ti ti-circle" > < / i >
< span class = "hide-menu" > Page 2.2< / span >
< / a >
< / li >
< li class = "sidebar-item" >
< a href = "javascript:void(0)" class = "sidebar-link" >
< i class = "ti ti-circle" > < / i >
< span class = "hide-menu" > Page 2.3< / span >
< / a >
< / li >
< / ul >
< / li >
< li class = "sidebar-item" >
< a href = "javascript:void(0)" class = "sidebar-link" >
< i class = "ti ti-circle" > < / i >
< span class = "hide-menu" > Page 3< / span >
< / a >
< / li >
< / ul >
< / li >
< / ul >
< / nav >
<!-- End Sidebar navigation -->
< / div >
<!-- End Sidebar scroll -->
< / aside >
< div class = "body-wrapper" >
< div class = "container-fluid" >
< div class = "card bg-info-subtle shadow-none position-relative overflow-hidden mb-4" >
< div class = "card-body px-4 py-3" >
< div class = "row align-items-center" >
< div class = "col-9" >
< h4 class = "fw-semibold mb-8" > Modals< / h4 >
< nav aria-label = "breadcrumb" >
< ol class = "breadcrumb" >
< li class = "breadcrumb-item" >
< a class = "text-muted text-decoration-none" href = "../main/index.html" > Home< / a >
< / li >
< li class = "breadcrumb-item" aria-current = "page" > Modals< / li >
< / ol >
< / nav >
< / div >
< div class = "col-3" >
< div class = "text-center mb-n5" >
< img src = "../assets/images/breadcrumb/ChatBc.png" alt = "modernize-img" class = "img-fluid mb-n4" / >
< / div >
< / div >
< / div >
< / div >
< / div >
< div class = "row" >
< div class = "col-12" >
<!-- start Modal Sizes -->
< div class = "card" >
< div class = "card-body" >
< h4 class = "card-title mb-4" > Modal Sizes< / h4 >
< div class = "d-md-flex button-group" >
< div >
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<!-- Extra Large -->
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
< button class = "btn me-1 mb-1 bg-warning-subtle text-warning px-4 fs-4 " data-bs-toggle = "modal" data-bs-target = "#bs-example-modal-xlg" >
Extra Large Modal
< / button >
<!-- sample modal content -->
< div class = "modal fade" id = "bs-example-modal-xlg" tabindex = "-1" aria-labelledby = "bs-example-modal-lg" aria-hidden = "true" >
< div class = "modal-dialog modal-xl" >
< div class = "modal-content" >
< div class = "modal-header d-flex align-items-center" >
< h4 class = "modal-title" id = "myLargeModalLabel" >
Extra Large modal
< / h4 >
< button type = "button" class = "btn-close" data-bs-dismiss = "modal" aria-label = "Close" > < / button >
< / div >
< div class = "modal-body" >
< h4 >
Overflowing text to show scroll behavior
< / h4 >
< p >
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus
vel augue laoreet rutrum faucibus dolor
auctor.
< / p >
< p >
Aenean lacinia bibendum nulla sed consectetur.
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor fringilla.
< / p >
< / div >
< div class = "modal-footer" >
< button type = "button" class = "btn bg-danger-subtle text-danger waves-effect text-start" data-bs-dismiss = "modal" >
Close
< / button >
< / div >
< / div >
<!-- /.modal - content -->
< / div >
<!-- /.modal - dialog -->
< / div >
<!-- /.modal -->
< / div >
< div >
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<!-- Large -->
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
< button class = "btn me-1 mb-1 bg-success-subtle text-success px-4 fs-4 " data-bs-toggle = "modal" data-bs-target = "#bs-example-modal-lg" >
Large Modal
< / button >
< div class = "modal fade" id = "bs-example-modal-lg" tabindex = "-1" aria-labelledby = "bs-example-modal-lg" aria-hidden = "true" >
< div class = "modal-dialog modal-lg" >
< div class = "modal-content" >
< div class = "modal-header d-flex align-items-center" >
< h4 class = "modal-title" id = "myLargeModalLabel" >
Large modal
< / h4 >
< button type = "button" class = "btn-close" data-bs-dismiss = "modal" aria-label = "Close" > < / button >
< / div >
< div class = "modal-body" >
< h4 >
Overflowing text to show scroll behavior
< / h4 >
< p >
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus
vel augue laoreet rutrum faucibus dolor
auctor.
< / p >
< p >
Aenean lacinia bibendum nulla sed consectetur.
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor fringilla.
< / p >
< / div >
< div class = "modal-footer" >
< button type = "button" class = "btn bg-danger-subtle text-danger waves-effect text-start" data-bs-dismiss = "modal" >
Close
< / button >
< / div >
< / div >
<!-- /.modal - content -->
< / div >
<!-- /.modal - dialog -->
< / div >
< / div >
< div >
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<!-- Medium -->
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
< button class = "btn me-1 mb-1 bg-primary-subtle text-primary px-4 fs-4 " data-bs-toggle = "modal" data-bs-target = "#bs-example-modal-md" >
Medium Modal
< / button >
<!-- sample modal content -->
< div id = "bs-example-modal-md" class = "modal fade" tabindex = "-1" aria-labelledby = "bs-example-modal-md" aria-hidden = "true" >
< div class = "modal-dialog modal-dialog-scrollable modal-lg" >
< div class = "modal-content" >
< div class = "modal-header d-flex align-items-center" >
< h4 class = "modal-title" id = "myModalLabel" >
Medium Modal
< / h4 >
< button type = "button" class = "btn-close" data-bs-dismiss = "modal" aria-label = "Close" > < / button >
< / div >
< div class = "modal-body" >
< h4 >
Overflowing text to show scroll behavior
< / h4 >
< p >
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus
vel augue laoreet rutrum faucibus dolor
auctor.
< / p >
< p >
Aenean lacinia bibendum nulla sed consectetur.
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor fringilla.
< / p >
< / div >
< div class = "modal-footer" >
< button type = "button" class = "btn bg-danger-subtle text-danger waves-effect" data-bs-dismiss = "modal" >
Close
< / button >
< / div >
< / div >
<!-- /.modal - content -->
< / div >
<!-- /.modal - dialog -->
< / div >
< / div >
< div >
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<!-- Small -->
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
< button class = "btn me-1 mb-1 bg-danger-subtle text-danger px-4 fs-4 " data-bs-toggle = "modal" data-bs-target = "#bs-example-modal-sm" >
Small Modal
< / button >
<!-- sample modal content -->
< div class = "modal fade" id = "bs-example-modal-sm" tabindex = "-1" aria-labelledby = "mySmallModalLabel" aria-hidden = "true" >
< div class = "modal-dialog modal-sm" >
< div class = "modal-content" >
< div class = "modal-header d-flex align-items-center" >
< h4 class = "modal-title" id = "myModalLabel" >
Small Modal
< / h4 >
< button type = "button" class = "btn-close" data-bs-dismiss = "modal" aria-label = "Close" > < / button >
< / div >
< div class = "modal-body" >
< h4 >
Overflowing text to show scroll behavior
< / h4 >
< p >
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus
vel augue laoreet rutrum faucibus dolor
auctor.
< / p >
< p >
Aenean lacinia bibendum nulla sed consectetur.
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor fringilla.
< / p >
< / div >
< div class = "modal-footer" >
< button type = "button" class = "btn bg-danger-subtle text-danger waves-effect" data-bs-dismiss = "modal" >
Close
< / button >
< / div >
< / div >
<!-- /.modal - content -->
< / div >
<!-- /.modal - dialog -->
< / div >
<!-- /.modal -->
< / div >
< / div >
< / div >
< / div >
<!-- end Modal Sizes -->
<!-- start Modal Types -->
< div class = "card" >
< div class = "card-body" >
< h4 class = "card-title mb-4" > Modal Types< / h4 >
< div class = "button-group" >
<!-- Button trigger modal -->
< button type = "button" class = "btn mb-1 bg-primary-subtle text-primary px-4 fs-4 " data-bs-toggle = "modal" data-bs-target = "#staticBackdrop" >
Static backdrop modal
< / button >
<!-- Modal -->
< div class = "modal fade" id = "staticBackdrop" data-bs-backdrop = "static" data-bs-keyboard = "false" tabindex = "-1" aria-labelledby = "staticBackdropLabel" aria-hidden = "true" >
< div class = "modal-dialog modal-dialog-scrollable modal-lg" >
< div class = "modal-content" >
< div class = "modal-header d-flex align-items-center" >
< h4 class = "modal-title" id = "myLargeModalLabel" >
Static backdrop Modal
< / h4 >
< button type = "button" class = "btn-close" data-bs-dismiss = "modal" aria-label = "Close" > < / button >
< / div >
< div class = "modal-body" >
< h4 > Overflowing text to show scroll behavior< / h4 >
< p >
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
< / p >
< p >
Aenean lacinia bibendum nulla sed consectetur.
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor fringilla.
< / p >
< / div >
< div class = "modal-footer" >
< button type = "button" class = "btn bg-danger-subtle text-danger waves-effect text-start" data-bs-dismiss = "modal" >
Close
< / button >
< / div >
< / div >
< / div >
< / div >
<!-- Button trigger modal -->
< button type = "button" class = "btn mb-1 bg-warning-subtle text-warning px-4 fs-4 " data-bs-toggle = "modal" data-bs-target = "#scroll-long-outer-modal" >
Scroll Long Outer Modal
< / button >
<!-- Modal -->
< div class = "modal fade" id = "scroll-long-outer-modal" data-bs-backdrop = "static" data-bs-keyboard = "false" tabindex = "-1" aria-labelledby = "scroll-long-outer-modal" aria-hidden = "true" >
< div class = "modal-dialog modal-dialog-scrollable modal-lg" >
< div class = "modal-content" >
< div class = "modal-header d-flex align-items-center" >
< h4 class = "modal-title" id = "myLargeModalLabel" >
Scroll Long Outer Modal
< / h4 >
< button type = "button" class = "btn-close" data-bs-dismiss = "modal" aria-label = "Close" > < / button >
< / div >
< div class = "modal-body" >
< h4 > Overflowing text to show scroll behavior< / h4 >
< p >
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
< / p >
< p >
Aenean lacinia bibendum nulla sed consectetur.
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor fringilla.
< / p >
< p >
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
< / p >
< p >
Aenean lacinia bibendum nulla sed consectetur.
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor fringilla.
< / p >
< p >
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
< / p >
< p >
Aenean lacinia bibendum nulla sed consectetur.
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor fringilla.
< / p >
< p >
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
< / p >
< p >
Aenean lacinia bibendum nulla sed consectetur.
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor fringilla.
< / p >
< p >
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
< / p >
< p >
Aenean lacinia bibendum nulla sed consectetur.
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor fringilla.
< / p >
< p >
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
< / p >
< p >
Aenean lacinia bibendum nulla sed consectetur.
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor fringilla.
< / p >
< p >
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
< / p >
< p >
Aenean lacinia bibendum nulla sed consectetur.
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor fringilla.
< / p >
< / div >
< div class = "modal-footer" >
< button type = "button" class = "btn bg-danger-subtle text-danger waves-effect text-start" data-bs-dismiss = "modal" >
Close
< / button >
< / div >
< / div >
< / div >
< / div >
<!-- Button trigger modal -->
< button type = "button" class = "btn mb-1 bg-success-subtle text-success px-4 fs-4 " data-bs-toggle = "modal" data-bs-target = "#scroll-long-inner-modal" >
Scroll Long Inner Modal
< / button >
<!-- Modal -->
< div class = "modal fade" id = "scroll-long-inner-modal" data-bs-backdrop = "static" data-bs-keyboard = "false" tabindex = "-1" aria-labelledby = "scroll-long-inner-modal" aria-hidden = "true" >
< div class = "modal-dialog modal-dialog-scrollable" >
< div class = "modal-content" >
< div class = "modal-header d-flex align-items-center" >
< h4 class = "modal-title" id = "myLargeModalLabel" >
Scroll Long Inner Modal
< / h4 >
< button type = "button" class = "btn-close" data-bs-dismiss = "modal" aria-label = "Close" > < / button >
< / div >
< div class = "modal-body" >
< h4 > Overflowing text to show scroll behavior< / h4 >
< p >
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
< / p >
< p >
Aenean lacinia bibendum nulla sed consectetur.
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor fringilla.
< / p >
< p >
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
< / p >
< p >
Aenean lacinia bibendum nulla sed consectetur.
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor fringilla.
< / p >
< p >
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
< / p >
< p >
Aenean lacinia bibendum nulla sed consectetur.
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor fringilla.
< / p >
< p >
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
< / p >
< p >
Aenean lacinia bibendum nulla sed consectetur.
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor fringilla.
< / p >
< p >
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
< / p >
< p >
Aenean lacinia bibendum nulla sed consectetur.
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor fringilla.
< / p >
< p >
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
< / p >
< p >
Aenean lacinia bibendum nulla sed consectetur.
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor fringilla.
< / p >
< p >
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
< / p >
< p >
Aenean lacinia bibendum nulla sed consectetur.
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor fringilla.
< / p >
< / div >
< div class = "modal-footer" >
< button type = "button" class = "btn bg-danger-subtle text-danger waves-effect text-start" data-bs-dismiss = "modal" >
Close
< / button >
< / div >
< / div >
< / div >
< / div >
<!-- Button trigger modal -->
< button type = "button" class = "btn mb-1 bg-danger-subtle text-danger px-4 fs-4 " data-bs-toggle = "modal" data-bs-target = "#with-grid-modal" >
With Grid Modal
< / button >
<!-- Modal -->
< div class = "modal fade" id = "with-grid-modal" tabindex = "-1" aria-labelledby = "scroll-long-inner-modal" aria-hidden = "true" >
< div class = "modal-dialog modal-dialog-scrollable" >
< div class = "modal-content" >
< div class = "modal-header d-flex align-items-center" >
< h4 class = "modal-title" id = "myLargeModalLabel" >
With Grid Modal
< / h4 >
< button type = "button" class = "btn-close" data-bs-dismiss = "modal" aria-label = "Close" > < / button >
< / div >
< div class = "modal-body" >
< div class = "container-fluid" >
< div class = "row border mt-3" >
< div class = "col-md-4 border-end bg-light py-3" >
.col-md-4
< / div >
< div class = "col-md-4 ms-auto bg-light py-3" >
.col-md-4 .ms-auto
< / div >
< / div >
< div class = "row border mt-3" >
< div class = "col-md-3 ms-auto bg-light border-end py-3" >
.col-md-3 .ms-auto
< / div >
< div class = "col-md-2 ms-auto bg-light py-3" >
.col-md-2 .ms-auto
< / div >
< / div >
< div class = "row border mt-3" >
< div class = "col-md-6 ms-auto bg-light py-3" >
.col-md-6 .ms-auto
< / div >
< / div >
< div class = "row border mt-3" >
< div class = "col-sm-9 border-end bg-light" >
< div class = "py-3" > Level 1: .col-sm-9< / div >
< div class = "row border-top" >
< div class = "col-8 col-sm-6 py-3 border-end" >
Level 2: .col-8 .col-sm-6
< / div >
< div class = "col-4 col-sm-6 py-3" >
Level 2: .col-4 .col-sm-6
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< div class = "modal-footer" >
< button type = "button" class = "btn bg-danger-subtle text-danger waves-effect text-start" data-bs-dismiss = "modal" >
Close
< / button >
< / div >
< / div >
< / div >
< / div >
<!-- Button trigger modal -->
< button type = "button" class = "btn mb-1 bg-warning-subtle text-warning px-4 fs-4 " data-bs-toggle = "modal" data-bs-target = "#vertical-center-modal" >
Vertically centered Modal
< / button >
<!-- Vertically centered modal -->
< div class = "modal fade" id = "vertical-center-modal" tabindex = "-1" aria-labelledby = "vertical-center-modal" aria-hidden = "true" >
< div class = "modal-dialog modal-dialog-centered" >
< div class = "modal-content" >
< div class = "modal-header d-flex align-items-center" >
< h4 class = "modal-title" id = "myLargeModalLabel" >
Vertically centered Modal
< / h4 >
< button type = "button" class = "btn-close" data-bs-dismiss = "modal" aria-label = "Close" > < / button >
< / div >
< div class = "modal-body" >
< h4 > Overflowing text to show scroll behavior< / h4 >
< p >
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
< / p >
< p >
Aenean lacinia bibendum nulla sed consectetur.
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor fringilla.
< / p >
< / div >
< div class = "modal-footer" >
< button type = "button" class = "btn bg-danger-subtle text-danger waves-effect text-start" data-bs-dismiss = "modal" >
Close
< / button >
< / div >
< / div >
< / div >
< / div >
<!-- Button trigger modal -->
< button type = "button" class = "btn mb-1 bg-danger-subtle text-danger px-4 fs-4 " data-bs-toggle = "modal" data-bs-target = "#vertical-center-scroll-modal" >
Vertically centered scrollable
< / button >
<!-- Vertically centered modal -->
< div class = "modal fade" id = "vertical-center-scroll-modal" tabindex = "-1" aria-labelledby = "vertical-center-modal" aria-hidden = "true" >
< div class = "modal-dialog modal-dialog-centered modal-dialog-scrollable" >
< div class = "modal-content" >
< div class = "modal-header d-flex align-items-center" >
< h4 class = "modal-title" id = "myLargeModalLabel" >
Vertically centered scrollable Modal
< / h4 >
< button type = "button" class = "btn-close" data-bs-dismiss = "modal" aria-label = "Close" > < / button >
< / div >
< div class = "modal-body" >
< h4 > Overflowing text to show scroll behavior< / h4 >
< p >
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
< / p >
< p >
Aenean lacinia bibendum nulla sed consectetur.
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor fringilla.
< / p >
< p >
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
< / p >
< p >
Aenean lacinia bibendum nulla sed consectetur.
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor fringilla.
< / p >
< p >
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
< / p >
< p >
Aenean lacinia bibendum nulla sed consectetur.
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor fringilla.
< / p >
< p >
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
< / p >
< p >
Aenean lacinia bibendum nulla sed consectetur.
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor fringilla.
< / p >
< p >
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
< / p >
< p >
Aenean lacinia bibendum nulla sed consectetur.
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor fringilla.
< / p >
< p >
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
< / p >
< p >
Aenean lacinia bibendum nulla sed consectetur.
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor fringilla.
< / p >
< p >
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
< / p >
< p >
Aenean lacinia bibendum nulla sed consectetur.
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor fringilla.
< / p >
< / div >
< div class = "modal-footer" >
< button type = "button" class = "btn bg-danger-subtle text-danger waves-effect text-start" data-bs-dismiss = "modal" >
Close
< / button >
< / div >
< / div >
< / div >
< / div >
<!-- Button trigger modal -->
< button type = "button" class = "btn mb-1 bg-primary-subtle text-primary px-4 fs-4 " data-bs-toggle = "modal" data-bs-target = "#pop-tool-modal" >
Tooltip & Popover Modal
< / button >
<!-- Vertically centered modal -->
< div class = "modal fade" id = "pop-tool-modal" tabindex = "-1" aria-labelledby = "vertical-center-modal" aria-hidden = "true" >
< div class = "modal-dialog modal-dialog-centered modal-dialog-scrollable" >
< div class = "modal-content" >
< div class = "modal-header d-flex align-items-center" >
< h4 class = "modal-title" id = "myLargeModalLabel" >
Tooltip & Popover Modal
< / h4 >
< button type = "button" class = "btn-close" data-bs-dismiss = "modal" aria-label = "Close" > < / button >
< / div >
< div class = "modal-body" >
< h5 > Popover in a modal< / h5 >
< p >
This
< a href = "javascript:void(0)" role = "button" class = "btn btn-secondary popover-test" title = "Popover title" data-bs-content = "Popover body content is set in this attribute." > button< / a >
triggers a popover on click.
< / p >
< hr / >
< h5 > Tooltips in a modal< / h5 >
< p >
< a href = "javascript:void(0)" class = "tooltip-test" title = "Tooltip" > This link< / a >
and
< a href = "javascript:void(0)" class = "tooltip-test" title = "Tooltip" > that link< / a >
have tooltips on hover.
< / p >
< / div >
< div class = "modal-footer" >
< button type = "button" class = "btn bg-danger-subtle text-danger waves-effect text-start" data-bs-dismiss = "modal" >
Close
< / button >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
<!-- end Modal Types -->
< / div >
< div class = "col-md-6" >
<!-- start Varying Modal content -->
< div class = "card" >
< div class = "card-body" >
< h4 class = "card-title mb-4" > Varying Modal content< / h4 >
<!-- sample modal content -->
< div class = "button-group" >
< button type = "button" class = "btn mb-1 px-4 fs-4 bg-primary-subtle text-primary" data-bs-toggle = "modal" data-bs-target = "#samedata-modal" data-bs-whatever = "@mdo" >
Open modal for @mdo
< / button >
< button type = "button" class = "btn mb-1 px-4 fs-4 bg-success-subtle text-success" data-bs-toggle = "modal" data-bs-target = "#samedata-modal" data-bs-whatever = "@fat" >
Open modal for @fat
< / button >
< button type = "button" class = "btn mb-1 px-4 fs-4 bg-warning-subtle text-warning" data-bs-toggle = "modal" data-bs-target = "#samedata-modal" data-bs-whatever = "@getbootstrap" >
Open modal for @getbootstrap
< / button >
< / div >
< div class = "modal fade" id = "samedata-modal" tabindex = "-1" aria-labelledby = "exampleModalLabel1" >
< div class = "modal-dialog" role = "document" >
< div class = "modal-content" >
< div class = "modal-header d-flex align-items-center" >
< h4 class = "modal-title" id = "exampleModalLabel1" >
New message
< / h4 >
< button type = "button" class = "btn-close" data-bs-dismiss = "modal" aria-label = "Close" > < / button >
< / div >
< div class = "modal-body" >
< form >
< div class = "mb-3" >
< label for = "recipient-name" class = "" > Recipient:< / label >
< input type = "text" class = "form-control" id = "recipient-name1" / >
< / div >
< div class = "mb-3" >
< label for = "message-text" class = "" > Message:< / label >
< textarea class = "form-control" id = "message-text1" > < / textarea >
< / div >
< / form >
< / div >
< div class = "modal-footer" >
< button type = "button" class = "btn bg-danger-subtle text-danger " data-bs-dismiss = "modal" >
Close
< / button >
< button type = "button" class = "btn btn-success" >
Send message
< / button >
< / div >
< / div >
< / div >
< / div >
<!-- /.modal -->
< / div >
< / div >
<!-- end Varying Modal content -->
< / div >
< div class = "col-md-6" >
<!-- start Custom Modal -->
< div class = "card" >
< div class = "card-body" >
< h4 class = "card-title mb-4" > Custom Modal< / h4 >
< div class = "button-group" >
<!-- Signup modal content -->
< div id = "signup-modal" class = "modal fade" tabindex = "-1" aria-hidden = "true" >
< div class = "modal-dialog modal-dialog-scrollable modal-lg" >
< div class = "modal-content" >
< div class = "modal-body" >
< div class = "text-center mt-2 mb-4" >
< a href = "../main/index.html" class = "text-success" >
< span >
< img src = "../assets/images/logos/favicon.png" class = "me-3 img-fluid" alt = "modernize-img" / >
< / span >
< / a >
< / div >
< form class = "ps-3 pr-3" action = "#" >
< div class = "mb-3" >
< label for = "username" > Name< / label >
< input class = "form-control" type = "email" id = "username" required = "" placeholder = "Michael Zenaty" / >
< / div >
< div class = "mb-3" >
< label for = "emailaddress" > Email address< / label >
< input class = "form-control" type = "email" id = "emailaddress" required = "" placeholder = "john@deo.com" / >
< / div >
< div class = "mb-3" >
< label for = "password" > Password< / label >
< input class = "form-control" type = "password" required = "" id = "password" placeholder = "Enter your password" / >
< / div >
< div class = "mb-3" >
< div class = "form-check" >
< input type = "checkbox" class = "form-check-input" id = "customCheck1" / >
< label class = "form-check-label" for = "customCheck1" > I accept
< a href = "javascript:void(0)" > Terms and Conditions< / a >
< / label >
< / div >
< / div >
< div class = "mb-3 text-center" >
< button class = "btn bg-info-subtle text-info " type = "submit" >
Sign Up Free
< / button >
< / div >
< / form >
< / div >
< / div >
<!-- /.modal - content -->
< / div >
<!-- /.modal - dialog -->
< / div >
<!-- /.modal -->
<!-- Custom width modal -->
< button type = "button" class = "btn mb-1 bg-primary-subtle text-primary px-4 fs-4 " data-bs-toggle = "modal" data-bs-target = "#signup-modal" >
< i class = "ti ti-lock fs-5 text-center d-block" > < / i >
Sign Up Modal
< / button >
<!-- SignIn modal content -->
< div id = "login-modal" class = "modal fade" tabindex = "-1" aria-hidden = "true" >
< div class = "modal-dialog modal-dialog-scrollable modal-lg" >
< div class = "modal-content" >
< div class = "modal-body" >
< div class = "text-center mt-2 mb-4" >
< a href = "../main/index.html" class = "text-success" >
< span >
< img src = "../assets/images/logos/favicon.png" class = "me-3 img-fluid" alt = "modernize-img" / >
< / span >
< / a >
< / div >
< form action = "#" class = "ps-3 pr-3" >
< div class = "mb-3" >
< label for = "emailaddress1" > Email address< / label >
< input class = "form-control" type = "email" id = "emailaddress1" required = "" placeholder = "john@deo.com" / >
< / div >
< div class = "mb-3" >
< label for = "password1" > Password< / label >
< input class = "form-control" type = "password" required = "" id = "password1" placeholder = "Enter your password" / >
< / div >
< div class = "mb-3" >
< div class = "form-check" >
< input type = "checkbox" class = "form-check-input" id = "customCheck2" / >
< label class = "form-check-label" for = "customCheck2" > Remember me< / label >
< / div >
< / div >
< div class = "mb-3 text-center" >
< button class = "btn btn-rounded bg-info-subtle text-info " type = "submit" >
Sign In
< / button >
< / div >
< / form >
< / div >
< / div >
<!-- /.modal - content -->
< / div >
<!-- /.modal - dialog -->
< / div >
<!-- /.modal -->
<!-- Full width modal -->
< button type = "button" class = "btn bg-warning-subtle text-warning px-4 fs-4 " data-bs-toggle = "modal" data-bs-target = "#login-modal" >
< i class = "ti ti-login fs-5 text-center d-block" > < / i >
Log in Modal
< / button >
< / div >
< / div >
< / div >
<!-- end Custom Modal -->
< / div >
< div class = "col-12" >
<!-- start Fullscreen Modal -->
< div class = "card" >
< div class = "card-body" >
< h4 class = "card-title mb-4" > Fullscreen Modal< / h4 >
< div class = "button-group" >
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<!-- Fullscreen -->
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
< button class = "btn mb-1 bg-primary-subtle text-primary px-4 fs-4 " data-bs-toggle = "modal" data-bs-target = "#bs-fullscreen" >
Fullscreen Modal
< / button >
< div class = "modal fade" id = "bs-fullscreen" tabindex = "-1" aria-labelledby = "bs-example-modal-lg" aria-hidden = "true" >
< div class = "modal-dialog modal-fullscreen" >
< div class = "modal-content" >
< div class = "modal-header" >
< h5 class = "modal-title h4" id = "exampleModalFullscreenLabel" >
Full screen modal
< / h5 >
< button type = "button" class = "btn-close" data-bs-dismiss = "modal" aria-label = "Close" > < / button >
< / div >
< div class = "modal-body" >
< p >
Cras mattis consectetur purus sit amet
fermentum. Cras justo odio, dapibus ac facilisis
in, egestas eget quam. Morbi leo risus, porta ac
consectetur ac, vestibulum at eros.
< / p >
< p >
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
< / p >
< p >
Aenean lacinia bibendum nulla sed consectetur.
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor fringilla.
< / p >
< p >
Cras mattis consectetur purus sit amet
fermentum. Cras justo odio, dapibus ac facilisis
in, egestas eget quam. Morbi leo risus, porta ac
consectetur ac, vestibulum at eros.
< / p >
< p >
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
< / p >
< p >
Aenean lacinia bibendum nulla sed consectetur.
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor fringilla.
< / p >
< p >
Cras mattis consectetur purus sit amet
fermentum. Cras justo odio, dapibus ac facilisis
in, egestas eget quam. Morbi leo risus, porta ac
consectetur ac, vestibulum at eros.
< / p >
< p >
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
< / p >
< p >
Aenean lacinia bibendum nulla sed consectetur.
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor fringilla.
< / p >
< p >
Cras mattis consectetur purus sit amet
fermentum. Cras justo odio, dapibus ac facilisis
in, egestas eget quam. Morbi leo risus, porta ac
consectetur ac, vestibulum at eros.
< / p >
< p >
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
< / p >
< p >
Aenean lacinia bibendum nulla sed consectetur.
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor fringilla.
< / p >
< p >
Cras mattis consectetur purus sit amet
fermentum. Cras justo odio, dapibus ac facilisis
in, egestas eget quam. Morbi leo risus, porta ac
consectetur ac, vestibulum at eros.
< / p >
< p >
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
< / p >
< p >
Aenean lacinia bibendum nulla sed consectetur.
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor fringilla.
< / p >
< p >
Cras mattis consectetur purus sit amet
fermentum. Cras justo odio, dapibus ac facilisis
in, egestas eget quam. Morbi leo risus, porta ac
consectetur ac, vestibulum at eros.
< / p >
< p >
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
< / p >
< p >
Aenean lacinia bibendum nulla sed consectetur.
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor fringilla.
< / p >
< / div >
< div class = "modal-footer" >
< button type = "button" class = "btn bg-danger-subtle text-danger " data-bs-dismiss = "modal" >
Close
< / button >
< / div >
< / div >
<!-- /.modal - content -->
< / div >
<!-- /.modal - dialog -->
< / div >
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<!-- Fullscreen -->
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
< button class = "btn mb-1 bg-success-subtle text-success px-4 fs-4 " data-bs-toggle = "modal" data-bs-target = "#bs-fullscreen-down-sm" >
Fullscreen Below sm Modal
< / button >
< div class = "modal fade" id = "bs-fullscreen-down-sm" tabindex = "-1" aria-labelledby = "bs-example-modal-lg" aria-hidden = "true" >
< div class = "modal-dialog modal-fullscreen-sm-down" >
< div class = "modal-content" >
< div class = "modal-header" >
< h5 class = "modal-title h4" id = "exampleModalFullscreenLabel" >
Full screen below sm modal
< / h5 >
< button type = "button" class = "btn-close" data-bs-dismiss = "modal" aria-label = "Close" > < / button >
< / div >
< div class = "modal-body" >
< p >
Cras mattis consectetur purus sit amet
fermentum. Cras justo odio, dapibus ac facilisis
in, egestas eget quam. Morbi leo risus, porta ac
consectetur ac, vestibulum at eros.
< / p >
< p >
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
< / p >
< p >
Aenean lacinia bibendum nulla sed consectetur.
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor fringilla.
< / p >
< p >
Cras mattis consectetur purus sit amet
fermentum. Cras justo odio, dapibus ac facilisis
in, egestas eget quam. Morbi leo risus, porta ac
consectetur ac, vestibulum at eros.
< / p >
< p >
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
< / p >
< p >
Aenean lacinia bibendum nulla sed consectetur.
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor fringilla.
< / p >
< p >
Cras mattis consectetur purus sit amet
fermentum. Cras justo odio, dapibus ac facilisis
in, egestas eget quam. Morbi leo risus, porta ac
consectetur ac, vestibulum at eros.
< / p >
< p >
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
< / p >
< p >
Aenean lacinia bibendum nulla sed consectetur.
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor fringilla.
< / p >
< p >
Cras mattis consectetur purus sit amet
fermentum. Cras justo odio, dapibus ac facilisis
in, egestas eget quam. Morbi leo risus, porta ac
consectetur ac, vestibulum at eros.
< / p >
< p >
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
< / p >
< p >
Aenean lacinia bibendum nulla sed consectetur.
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor fringilla.
< / p >
< p >
Cras mattis consectetur purus sit amet
fermentum. Cras justo odio, dapibus ac facilisis
in, egestas eget quam. Morbi leo risus, porta ac
consectetur ac, vestibulum at eros.
< / p >
< p >
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
< / p >
< p >
Aenean lacinia bibendum nulla sed consectetur.
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor fringilla.
< / p >
< p >
Cras mattis consectetur purus sit amet
fermentum. Cras justo odio, dapibus ac facilisis
in, egestas eget quam. Morbi leo risus, porta ac
consectetur ac, vestibulum at eros.
< / p >
< p >
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
< / p >
< p >
Aenean lacinia bibendum nulla sed consectetur.
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor fringilla.
< / p >
< / div >
< div class = "modal-footer" >
< button type = "button" class = "btn bg-danger-subtle text-danger " data-bs-dismiss = "modal" >
Close
< / button >
< / div >
< / div >
<!-- /.modal - content -->
< / div >
<!-- /.modal - dialog -->
< / div >
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<!-- Fullscreen -->
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
< button class = "btn mb-1 bg-warning-subtle text-warning px-4 fs-4 " data-bs-toggle = "modal" data-bs-target = "#bs-fullscreen-down-md" >
Fullscreen Below md Modal
< / button >
< div class = "modal fade" id = "bs-fullscreen-down-md" tabindex = "-1" aria-labelledby = "bs-example-modal-lg" aria-hidden = "true" >
< div class = "modal-dialog modal-fullscreen-md-down" >
< div class = "modal-content" >
< div class = "modal-header" >
< h5 class = "modal-title h4" id = "exampleModalFullscreenLabel" >
Full screen below md modal
< / h5 >
< button type = "button" class = "btn-close" data-bs-dismiss = "modal" aria-label = "Close" > < / button >
< / div >
< div class = "modal-body" >
< p >
Cras mattis consectetur purus sit amet
fermentum. Cras justo odio, dapibus ac facilisis
in, egestas eget quam. Morbi leo risus, porta ac
consectetur ac, vestibulum at eros.
< / p >
< p >
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
< / p >
< p >
Aenean lacinia bibendum nulla sed consectetur.
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor fringilla.
< / p >
< p >
Cras mattis consectetur purus sit amet
fermentum. Cras justo odio, dapibus ac facilisis
in, egestas eget quam. Morbi leo risus, porta ac
consectetur ac, vestibulum at eros.
< / p >
< p >
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
< / p >
< p >
Aenean lacinia bibendum nulla sed consectetur.
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor fringilla.
< / p >
< p >
Cras mattis consectetur purus sit amet
fermentum. Cras justo odio, dapibus ac facilisis
in, egestas eget quam. Morbi leo risus, porta ac
consectetur ac, vestibulum at eros.
< / p >
< p >
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
< / p >
< p >
Aenean lacinia bibendum nulla sed consectetur.
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor fringilla.
< / p >
< p >
Cras mattis consectetur purus sit amet
fermentum. Cras justo odio, dapibus ac facilisis
in, egestas eget quam. Morbi leo risus, porta ac
consectetur ac, vestibulum at eros.
< / p >
< p >
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
< / p >
< p >
Aenean lacinia bibendum nulla sed consectetur.
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor fringilla.
< / p >
< p >
Cras mattis consectetur purus sit amet
fermentum. Cras justo odio, dapibus ac facilisis
in, egestas eget quam. Morbi leo risus, porta ac
consectetur ac, vestibulum at eros.
< / p >
< p >
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
< / p >
< p >
Aenean lacinia bibendum nulla sed consectetur.
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor fringilla.
< / p >
< p >
Cras mattis consectetur purus sit amet
fermentum. Cras justo odio, dapibus ac facilisis
in, egestas eget quam. Morbi leo risus, porta ac
consectetur ac, vestibulum at eros.
< / p >
< p >
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
< / p >
< p >
Aenean lacinia bibendum nulla sed consectetur.
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor fringilla.
< / p >
< / div >
< div class = "modal-footer" >
< button type = "button" class = "btn bg-danger-subtle text-danger " data-bs-dismiss = "modal" >
Close
< / button >
< / div >
< / div >
<!-- /.modal - content -->
< / div >
<!-- /.modal - dialog -->
< / div >
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<!-- Fullscreen -->
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
< button class = "btn mb-1 bg-danger-subtle text-danger px-4 fs-4 " data-bs-toggle = "modal" data-bs-target = "#bs-fullscreen-down-lg" >
Fullscreen Below lg Modal
< / button >
< div class = "modal fade" id = "bs-fullscreen-down-lg" tabindex = "-1" aria-labelledby = "bs-example-modal-lg" aria-hidden = "true" >
< div class = "modal-dialog modal-fullscreen-lg-down" >
< div class = "modal-content" >
< div class = "modal-header" >
< h5 class = "modal-title h4" id = "exampleModalFullscreenLabel" >
Full screen below lg modal
< / h5 >
< button type = "button" class = "btn-close" data-bs-dismiss = "modal" aria-label = "Close" > < / button >
< / div >
< div class = "modal-body" >
< p >
Cras mattis consectetur purus sit amet
fermentum. Cras justo odio, dapibus ac facilisis
in, egestas eget quam. Morbi leo risus, porta ac
consectetur ac, vestibulum at eros.
< / p >
< p >
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
< / p >
< p >
Aenean lacinia bibendum nulla sed consectetur.
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor fringilla.
< / p >
< p >
Cras mattis consectetur purus sit amet
fermentum. Cras justo odio, dapibus ac facilisis
in, egestas eget quam. Morbi leo risus, porta ac
consectetur ac, vestibulum at eros.
< / p >
< p >
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
< / p >
< p >
Aenean lacinia bibendum nulla sed consectetur.
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor fringilla.
< / p >
< p >
Cras mattis consectetur purus sit amet
fermentum. Cras justo odio, dapibus ac facilisis
in, egestas eget quam. Morbi leo risus, porta ac
consectetur ac, vestibulum at eros.
< / p >
< p >
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
< / p >
< p >
Aenean lacinia bibendum nulla sed consectetur.
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor fringilla.
< / p >
< p >
Cras mattis consectetur purus sit amet
fermentum. Cras justo odio, dapibus ac facilisis
in, egestas eget quam. Morbi leo risus, porta ac
consectetur ac, vestibulum at eros.
< / p >
< p >
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
< / p >
< p >
Aenean lacinia bibendum nulla sed consectetur.
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor fringilla.
< / p >
< p >
Cras mattis consectetur purus sit amet
fermentum. Cras justo odio, dapibus ac facilisis
in, egestas eget quam. Morbi leo risus, porta ac
consectetur ac, vestibulum at eros.
< / p >
< p >
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
< / p >
< p >
Aenean lacinia bibendum nulla sed consectetur.
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor fringilla.
< / p >
< p >
Cras mattis consectetur purus sit amet
fermentum. Cras justo odio, dapibus ac facilisis
in, egestas eget quam. Morbi leo risus, porta ac
consectetur ac, vestibulum at eros.
< / p >
< p >
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
< / p >
< p >
Aenean lacinia bibendum nulla sed consectetur.
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor fringilla.
< / p >
< / div >
< div class = "modal-footer" >
< button type = "button" class = "btn bg-danger-subtle text-danger " data-bs-dismiss = "modal" >
Close
< / button >
< / div >
< / div >
<!-- /.modal - content -->
< / div >
<!-- /.modal - dialog -->
< / div >
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<!-- Fullscreen -->
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
< button class = "btn mb-1 bg-success-subtle text-success px-4 fs-4 " data-bs-toggle = "modal" data-bs-target = "#bs-fullscreen-down-xl" >
Fullscreen Below xl Modal
< / button >
< div class = "modal fade" id = "bs-fullscreen-down-xl" tabindex = "-1" aria-labelledby = "bs-example-modal-xl" aria-hidden = "true" >
< div class = "modal-dialog modal-fullscreen-xl-down" >
< div class = "modal-content" >
< div class = "modal-header" >
< h5 class = "modal-title h4" id = "exampleModalFullscreenLabel" >
Full screen below xl modal
< / h5 >
< button type = "button" class = "btn-close" data-bs-dismiss = "modal" aria-label = "Close" > < / button >
< / div >
< div class = "modal-body" >
< p >
Cras mattis consectetur purus sit amet
fermentum. Cras justo odio, dapibus ac facilisis
in, egestas eget quam. Morbi leo risus, porta ac
consectetur ac, vestibulum at eros.
< / p >
< p >
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
< / p >
< p >
Aenean lacinia bibendum nulla sed consectetur.
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor fringilla.
< / p >
< p >
Cras mattis consectetur purus sit amet
fermentum. Cras justo odio, dapibus ac facilisis
in, egestas eget quam. Morbi leo risus, porta ac
consectetur ac, vestibulum at eros.
< / p >
< p >
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
< / p >
< p >
Aenean lacinia bibendum nulla sed consectetur.
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor fringilla.
< / p >
< p >
Cras mattis consectetur purus sit amet
fermentum. Cras justo odio, dapibus ac facilisis
in, egestas eget quam. Morbi leo risus, porta ac
consectetur ac, vestibulum at eros.
< / p >
< p >
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
< / p >
< p >
Aenean lacinia bibendum nulla sed consectetur.
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor fringilla.
< / p >
< p >
Cras mattis consectetur purus sit amet
fermentum. Cras justo odio, dapibus ac facilisis
in, egestas eget quam. Morbi leo risus, porta ac
consectetur ac, vestibulum at eros.
< / p >
< p >
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
< / p >
< p >
Aenean lacinia bibendum nulla sed consectetur.
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor fringilla.
< / p >
< p >
Cras mattis consectetur purus sit amet
fermentum. Cras justo odio, dapibus ac facilisis
in, egestas eget quam. Morbi leo risus, porta ac
consectetur ac, vestibulum at eros.
< / p >
< p >
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
< / p >
< p >
Aenean lacinia bibendum nulla sed consectetur.
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor fringilla.
< / p >
< p >
Cras mattis consectetur purus sit amet
fermentum. Cras justo odio, dapibus ac facilisis
in, egestas eget quam. Morbi leo risus, porta ac
consectetur ac, vestibulum at eros.
< / p >
< p >
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
< / p >
< p >
Aenean lacinia bibendum nulla sed consectetur.
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor fringilla.
< / p >
< / div >
< div class = "modal-footer" >
< button type = "button" class = "btn bg-danger-subtle text-danger " data-bs-dismiss = "modal" >
Close
< / button >
< / div >
< / div >
<!-- /.modal - content -->
< / div >
<!-- /.modal - dialog -->
< / div >
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<!-- Fullscreen -->
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
< button class = "btn mb-1 bg-danger-subtle text-danger px-4 fs-4 " data-bs-toggle = "modal" data-bs-target = "#bs-fullscreen-down-xxl" >
Fullscreen Below xxl Modal
< / button >
< div class = "modal fade" id = "bs-fullscreen-down-xxl" tabindex = "-1" aria-labelledby = "bs-example-modal-xxl" aria-hidden = "true" >
< div class = "modal-dialog modal-fullscreen-xxl-down" >
< div class = "modal-content" >
< div class = "modal-header" >
< h5 class = "modal-title h4" id = "exampleModalFullscreenLabel" >
Full screen below xxl modal
< / h5 >
< button type = "button" class = "btn-close" data-bs-dismiss = "modal" aria-label = "Close" > < / button >
< / div >
< div class = "modal-body" >
< p >
Cras mattis consectetur purus sit amet
fermentum. Cras justo odio, dapibus ac facilisis
in, egestas eget quam. Morbi leo risus, porta ac
consectetur ac, vestibulum at eros.
< / p >
< p >
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
< / p >
< p >
Aenean lacinia bibendum nulla sed consectetur.
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor fringilla.
< / p >
< p >
Cras mattis consectetur purus sit amet
fermentum. Cras justo odio, dapibus ac facilisis
in, egestas eget quam. Morbi leo risus, porta ac
consectetur ac, vestibulum at eros.
< / p >
< p >
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
< / p >
< p >
Aenean lacinia bibendum nulla sed consectetur.
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor fringilla.
< / p >
< p >
Cras mattis consectetur purus sit amet
fermentum. Cras justo odio, dapibus ac facilisis
in, egestas eget quam. Morbi leo risus, porta ac
consectetur ac, vestibulum at eros.
< / p >
< p >
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
< / p >
< p >
Aenean lacinia bibendum nulla sed consectetur.
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor fringilla.
< / p >
< p >
Cras mattis consectetur purus sit amet
fermentum. Cras justo odio, dapibus ac facilisis
in, egestas eget quam. Morbi leo risus, porta ac
consectetur ac, vestibulum at eros.
< / p >
< p >
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
< / p >
< p >
Aenean lacinia bibendum nulla sed consectetur.
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor fringilla.
< / p >
< p >
Cras mattis consectetur purus sit amet
fermentum. Cras justo odio, dapibus ac facilisis
in, egestas eget quam. Morbi leo risus, porta ac
consectetur ac, vestibulum at eros.
< / p >
< p >
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
< / p >
< p >
Aenean lacinia bibendum nulla sed consectetur.
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor fringilla.
< / p >
< p >
Cras mattis consectetur purus sit amet
fermentum. Cras justo odio, dapibus ac facilisis
in, egestas eget quam. Morbi leo risus, porta ac
consectetur ac, vestibulum at eros.
< / p >
< p >
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
< / p >
< p >
Aenean lacinia bibendum nulla sed consectetur.
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Donec sed odio dui. Donec
ullamcorper nulla non metus auctor fringilla.
< / p >
< / div >
< div class = "modal-footer" >
< button type = "button" class = "btn bg-danger-subtle text-danger " data-bs-dismiss = "modal" >
Close
< / button >
< / div >
< / div >
<!-- /.modal - content -->
< / div >
<!-- /.modal - dialog -->
< / div >
< / div >
< / div >
< / div >
<!-- end Fullscreen Modal -->
< / div >
< div class = "col-md-6" >
<!-- start Modal Header Coloured -->
< div class = "card" >
< div class = "card-body" >
< h4 class = "card-title mb-4" > Modal Header Coloured< / h4 >
< div class = "button-group" >
<!-- Primary header modal -->
< button type = "button" class = "btn mb-1 bg-primary-subtle text-primary px-4 fs-4 " data-bs-toggle = "modal" data-bs-target = "#primary-header-modal" >
Primary Header
< / button >
<!-- Primary Header Modal -->
< div id = "primary-header-modal" class = "modal fade" tabindex = "-1" aria-labelledby = "primary-header-modalLabel" aria-hidden = "true" >
< div class = "modal-dialog modal-dialog-scrollable modal-lg" >
< div class = "modal-content" >
< div class = "modal-header modal-colored-header bg-primary text-white" >
< h4 class = "modal-title text-white" id = "primary-header-modalLabel" >
Modal Heading
< / h4 >
< button type = "button" class = "btn-close btn-close-white" data-bs-dismiss = "modal" aria-label = "Close" > < / button >
< / div >
< div class = "modal-body" >
< h5 class = "mt-0" > Primary Background< / h5 >
< p >
Cras mattis consectetur purus sit amet
fermentum. Cras justo odio, dapibus ac facilisis
in, egestas eget quam. Morbi leo risus, porta ac
consectetur ac, vestibulum at eros.
< / p >
< p >
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
< / p >
< / div >
< div class = "modal-footer" >
< button type = "button" class = "btn btn-light" data-bs-dismiss = "modal" >
Close
< / button >
< button type = "button" class = "btn bg-primary-subtle text-primary " >
Save changes
< / button >
< / div >
< / div >
<!-- /.modal - content -->
< / div >
<!-- /.modal - dialog -->
< / div >
<!-- /.modal -->
<!-- info header modal -->
< button type = "button" class = "btn mb-1 bg-info-subtle text-info px-4 fs-4 " data-bs-toggle = "modal" data-bs-target = "#info-header-modal" >
Info Header
< / button >
<!-- info Header Modal -->
< div id = "info-header-modal" class = "modal fade" tabindex = "-1" aria-labelledby = "info-header-modalLabel" aria-hidden = "true" >
< div class = "modal-dialog modal-dialog-scrollable modal-lg" >
< div class = "modal-content" >
< div class = "modal-header modal-colored-header bg-info text-white" >
< h4 class = "modal-title text-white" id = "info-header-modalLabel" >
Modal Heading
< / h4 >
< button type = "button" class = "btn-close btn-close-white" data-bs-dismiss = "modal" aria-label = "Close" > < / button >
< / div >
< div class = "modal-body" >
< h5 class = "mt-0" > Info Background< / h5 >
< p >
Cras mattis consectetur purus sit amet
fermentum. Cras justo odio, dapibus ac facilisis
in, egestas eget quam. Morbi leo risus, porta ac
consectetur ac, vestibulum at eros.
< / p >
< p >
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
< / p >
< / div >
< div class = "modal-footer" >
< button type = "button" class = "btn btn-light" data-bs-dismiss = "modal" >
Close
< / button >
< button type = "button" class = "btn bg-info-subtle text-info " >
Save changes
< / button >
< / div >
< / div >
<!-- /.modal - content -->
< / div >
<!-- /.modal - dialog -->
< / div >
<!-- /.modal -->
<!-- danger header modal -->
< button type = "button" class = "btn mb-1 bg-danger-subtle text-danger px-4 fs-4 " data-bs-toggle = "modal" data-bs-target = "#danger-header-modal" >
Danger Header
< / button >
<!-- danger Header Modal -->
< div id = "danger-header-modal" class = "modal fade" tabindex = "-1" aria-labelledby = "danger-header-modalLabel" aria-hidden = "true" >
< div class = "modal-dialog modal-dialog-scrollable modal-lg" >
< div class = "modal-content" >
< div class = "modal-header modal-colored-header bg-danger text-white" >
< h4 class = "modal-title text-white" id = "danger-header-modalLabel" >
Modal Heading
< / h4 >
< button type = "button" class = "btn-close btn-close-white" data-bs-dismiss = "modal" aria-label = "Close" > < / button >
< / div >
< div class = "modal-body" >
< h5 class = "mt-0" > Danger Background< / h5 >
< p >
Cras mattis consectetur purus sit amet
fermentum. Cras justo odio, dapibus ac facilisis
in, egestas eget quam. Morbi leo risus, porta ac
consectetur ac, vestibulum at eros.
< / p >
< p >
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
< / p >
< / div >
< div class = "modal-footer" >
< button type = "button" class = "btn btn-light" data-bs-dismiss = "modal" >
Close
< / button >
< button type = "button" class = "btn bg-danger-subtle text-danger " >
Save changes
< / button >
< / div >
< / div >
<!-- /.modal - content -->
< / div >
<!-- /.modal - dialog -->
< / div >
<!-- /.modal -->
<!-- warning header modal -->
< button type = "button" class = "btn mb-1 bg-warning-subtle text-warning px-4 fs-4 " data-bs-toggle = "modal" data-bs-target = "#warning-header-modal" >
Warning Header
< / button >
<!-- warning Header Modal -->
< div id = "warning-header-modal" class = "modal fade" tabindex = "-1" aria-labelledby = "warning-header-modalLabel" aria-hidden = "true" >
< div class = "modal-dialog modal-dialog-scrollable modal-lg" >
< div class = "modal-content" >
< div class = "modal-header modal-colored-header bg-warning text-white" >
< h4 class = "modal-title text-white" id = "warning-header-modalLabel" >
Modal Heading
< / h4 >
< button type = "button" class = "btn-close btn-close-white" data-bs-dismiss = "modal" aria-label = "Close" > < / button >
< / div >
< div class = "modal-body" >
< h5 class = "mt-0" > Warning Background< / h5 >
< p >
Cras mattis consectetur purus sit amet
fermentum. Cras justo odio, dapibus ac facilisis
in, egestas eget quam. Morbi leo risus, porta ac
consectetur ac, vestibulum at eros.
< / p >
< p >
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
< / p >
< / div >
< div class = "modal-footer" >
< button type = "button" class = "btn btn-light" data-bs-dismiss = "modal" >
Close
< / button >
< button type = "button" class = "btn bg-warning-subtle text-warning " >
Save changes
< / button >
< / div >
< / div >
<!-- /.modal - content -->
< / div >
<!-- /.modal - dialog -->
< / div >
<!-- /.modal -->
<!-- success header modal -->
< button type = "button" class = "btn mb-1 bg-success-subtle text-success px-4 fs-4 " data-bs-toggle = "modal" data-bs-target = "#success-header-modal" >
Success Header
< / button >
<!-- success Header Modal -->
< div id = "success-header-modal" class = "modal fade" tabindex = "-1" aria-labelledby = "success-header-modalLabel" aria-hidden = "true" >
< div class = "modal-dialog modal-dialog-scrollable modal-lg" >
< div class = "modal-content" >
< div class = "modal-header modal-colored-header bg-success text-white" >
< h4 class = "modal-title text-white" id = "success-header-modalLabel" >
Modal Heading
< / h4 >
< button type = "button" class = "btn-close btn-close-white" data-bs-dismiss = "modal" aria-label = "Close" > < / button >
< / div >
< div class = "modal-body" >
< h5 class = "mt-0" > Success Background< / h5 >
< p >
Cras mattis consectetur purus sit amet
fermentum. Cras justo odio, dapibus ac facilisis
in, egestas eget quam. Morbi leo risus, porta ac
consectetur ac, vestibulum at eros.
< / p >
< p >
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
< / p >
< / div >
< div class = "modal-footer" >
< button type = "button" class = "btn btn-light" data-bs-dismiss = "modal" >
Close
< / button >
< button type = "button" class = "btn bg-success-subtle text-success " >
Save changes
< / button >
< / div >
< / div >
<!-- /.modal - content -->
< / div >
<!-- /.modal - dialog -->
< / div >
<!-- /.modal -->
<!-- dark header modal -->
< button type = "button" class = "btn mb-1 btn-dark px-4 fs-4 " data-bs-toggle = "modal" data-bs-target = "#dark-header-modal" >
Dark Header
< / button >
<!-- dark Header Modal -->
< div id = "dark-header-modal" class = "modal fade" tabindex = "-1" aria-labelledby = "dark-header-modalLabel" aria-hidden = "true" >
< div class = "modal-dialog modal-dialog-scrollable modal-lg" >
< div class = "modal-content" >
< div class = "modal-header modal-colored-header bg-dark" >
< h4 class = "modal-title text-white" id = "dark-header-modalLabel" >
Modal Heading
< / h4 >
< button type = "button" class = "btn-close btn-close-white" data-bs-dismiss = "modal" aria-label = "Close" > < / button >
< / div >
< div class = "modal-body" >
< h5 class = "mt-0" > Dark Background< / h5 >
< p >
Cras mattis consectetur purus sit amet
fermentum. Cras justo odio, dapibus ac facilisis
in, egestas eget quam. Morbi leo risus, porta ac
consectetur ac, vestibulum at eros.
< / p >
< p >
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
< / p >
< / div >
< div class = "modal-footer" >
< button type = "button" class = "btn btn-light" data-bs-dismiss = "modal" >
Close
< / button >
< button type = "button" class = "btn btn-dark" >
Save changes
< / button >
< / div >
< / div >
<!-- /.modal - content -->
< / div >
<!-- /.modal - dialog -->
< / div >
<!-- /.modal -->
< / div >
< / div >
< / div >
<!-- end Modal Header Coloured -->
< / div >
< div class = "col-md-6" >
<!-- start Modal Filled Coloured -->
< div class = "card" >
< div class = "card-body" >
< h4 class = "card-title mb-4" > Modal Filled Coloured< / h4 >
< div class = "button-group" >
<!-- Primary header modal -->
< button type = "button" class = "btn mb-1 bg-primary-subtle text-primary px-4 fs-4 " data-bs-toggle = "modal" data-bs-target = "#bg-primary-header-modal" >
Primary Modal
< / button >
<!-- Primary Header Modal -->
< div id = "bg-primary-header-modal" class = "modal fade" tabindex = "-1" aria-labelledby = "primary-header-modalLabel" aria-hidden = "true" >
< div class = "modal-dialog modal-dialog-scrollable modal-lg" >
< div class = "modal-content modal-filled bg-primary" >
< div class = "modal-header modal-colored-header text-white" >
< h4 class = "modal-title text-white" id = "primary-header-modalLabel" >
Modal Heading
< / h4 >
< button type = "button" class = "btn-close btn-close-white" data-bs-dismiss = "modal" aria-label = "Close" > < / button >
< / div >
< div class = "modal-body" >
< h5 class = "mt-0 text-white" >
Primary Background
< / h5 >
< p class = "text-white-50" >
Cras mattis consectetur purus sit amet
fermentum. Cras justo odio, dapibus ac facilisis
in, egestas eget quam. Morbi leo risus, porta ac
consectetur ac, vestibulum at eros.
< / p >
< p class = "text-white-50" >
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
< / p >
< / div >
< div class = "modal-footer" >
< button type = "button" class = "btn btn-light" data-bs-dismiss = "modal" >
Close
< / button >
< / div >
< / div >
<!-- /.modal - content -->
< / div >
<!-- /.modal - dialog -->
< / div >
<!-- /.modal -->
<!-- info header modal -->
< button type = "button" class = "btn mb-1 bg-info-subtle text-info px-4 fs-4 " data-bs-toggle = "modal" data-bs-target = "#bg-info-header-modal" >
Info Modal
< / button >
<!-- info Header Modal -->
< div id = "bg-info-header-modal" class = "modal fade" tabindex = "-1" aria-labelledby = "info-header-modalLabel" aria-hidden = "true" >
< div class = "modal-dialog modal-dialog-scrollable modal-lg" >
< div class = "modal-content modal-filled bg-info" >
< div class = "modal-header modal-colored-header text-white" >
< h4 class = "modal-title text-white id=" info-header-modalLabel " >
Modal Heading
< / h4 >
< button type = "button" class = "btn-close btn-close-white" data-bs-dismiss = "modal" aria-label = "Close" > < / button >
< / div >
< div class = "modal-body" >
< h5 class = "mt-0 text-white" > Info Background< / h5 >
< p class = "text-white-50" >
Cras mattis consectetur purus sit amet
fermentum. Cras justo odio, dapibus ac facilisis
in, egestas eget quam. Morbi leo risus, porta ac
consectetur ac, vestibulum at eros.
< / p >
< p class = "text-white-50" >
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
< / p >
< / div >
< div class = "modal-footer" >
< button type = "button" class = "btn btn-light" data-bs-dismiss = "modal" >
Close
< / button >
< / div >
< / div >
<!-- /.modal - content -->
< / div >
<!-- /.modal - dialog -->
< / div >
<!-- /.modal -->
<!-- danger header modal -->
< button type = "button" class = "btn mb-1 bg-danger-subtle text-danger px-4 fs-4 " data-bs-toggle = "modal" data-bs-target = "#bg-danger-header-modal" >
Danger Modal
< / button >
<!-- danger Header Modal -->
< div id = "bg-danger-header-modal" class = "modal fade" tabindex = "-1" aria-labelledby = "danger-header-modalLabel" aria-hidden = "true" >
< div class = "modal-dialog modal-dialog-scrollable modal-lg" >
< div class = "modal-content modal-filled bg-danger" >
< div class = "modal-header modal-colored-header text-white" >
< h4 class = "modal-title text-white" id = "danger-header-modalLabel" >
Modal Heading
< / h4 >
< button type = "button" class = "btn-close btn-close-white" data-bs-dismiss = "modal" aria-label = "Close" > < / button >
< / div >
< div class = "modal-body" >
< h5 class = "mt-0 text-white" > Danger Background< / h5 >
< p class = "text-white-50" >
Cras mattis consectetur purus sit amet
fermentum. Cras justo odio, dapibus ac facilisis
in, egestas eget quam. Morbi leo risus, porta ac
consectetur ac, vestibulum at eros.
< / p >
< p class = "text-white-50" >
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
< / p >
< / div >
< div class = "modal-footer" >
< button type = "button" class = "btn btn-light" data-bs-dismiss = "modal" >
Close
< / button >
< / div >
< / div >
<!-- /.modal - content -->
< / div >
<!-- /.modal - dialog -->
< / div >
<!-- /.modal -->
<!-- warning header modal -->
< button type = "button" class = "btn mb-1 bg-warning-subtle text-warning px-4 fs-4 " data-bs-toggle = "modal" data-bs-target = "#bg-warning-header-modal" >
Warning Modal
< / button >
<!-- warning Header Modal -->
< div id = "bg-warning-header-modal" class = "modal fade" tabindex = "-1" aria-labelledby = "warning-header-modalLabel" aria-hidden = "true" >
< div class = "modal-dialog modal-dialog-scrollable modal-lg" >
< div class = "modal-content modal-filled bg-warning" >
< div class = "modal-header modal-colored-header text-white" >
< h4 class = "modal-title text-white" id = "warning-header-modalLabel" >
Modal Heading
< / h4 >
< button type = "button" class = "btn-close btn-close-white" data-bs-dismiss = "modal" aria-label = "Close" > < / button >
< / div >
< div class = "modal-body" >
< h5 class = "mt-0 text-white" >
Warning Background
< / h5 >
< p class = "text-white-50" >
Cras mattis consectetur purus sit amet
fermentum. Cras justo odio, dapibus ac facilisis
in, egestas eget quam. Morbi leo risus, porta ac
consectetur ac, vestibulum at eros.
< / p >
< p class = "text-white-50" >
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
< / p >
< / div >
< div class = "modal-footer" >
< button type = "button" class = "btn btn-light" data-bs-dismiss = "modal" >
Close
< / button >
< / div >
< / div >
<!-- /.modal - content -->
< / div >
<!-- /.modal - dialog -->
< / div >
<!-- /.modal -->
<!-- success header modal -->
< button type = "button" class = "btn mb-1 bg-success-subtle text-success px-4 fs-4 " data-bs-toggle = "modal" data-bs-target = "#bg-success-header-modal" >
Success Modal
< / button >
<!-- success Header Modal -->
< div id = "bg-success-header-modal" class = "modal fade" tabindex = "-1" aria-labelledby = "success-header-modalLabel" aria-hidden = "true" >
< div class = "modal-dialog modal-dialog-scrollable modal-lg" >
< div class = "modal-content modal-filled bg-success" >
< div class = "modal-header modal-colored-header text-white" >
< h4 class = "modal-title text-white" id = "success-header-modalLabel" >
Modal Heading
< / h4 >
< button type = "button" class = "btn-close btn-close-white" data-bs-dismiss = "modal" aria-label = "Close" > < / button >
< / div >
< div class = "modal-body" >
< h5 class = "mt-0 text-white" >
Success Background
< / h5 >
< p class = "text-white-50" >
Cras mattis consectetur purus sit amet
fermentum. Cras justo odio, dapibus ac facilisis
in, egestas eget quam. Morbi leo risus, porta ac
consectetur ac, vestibulum at eros.
< / p >
< p class = "text-white-50" >
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
< / p >
< / div >
< div class = "modal-footer" >
< button type = "button" class = "btn btn-light" data-bs-dismiss = "modal" >
Close
< / button >
< / div >
< / div >
<!-- /.modal - content -->
< / div >
<!-- /.modal - dialog -->
< / div >
<!-- /.modal -->
<!-- dark header modal -->
< button type = "button" class = "btn mb-1 btn-dark px-4 fs-4 " data-bs-toggle = "modal" data-bs-target = "#bg-dark-header-modal" >
Dark Modal
< / button >
<!-- dark Header Modal -->
< div id = "bg-dark-header-modal" class = "modal fade" tabindex = "-1" aria-labelledby = "dark-header-modalLabel" aria-hidden = "true" >
< div class = "modal-dialog modal-dialog-scrollable modal-lg" >
< div class = "modal-content modal-filled bg-dark" >
< div class = "modal-header modal-colored-header" >
< h4 class = "modal-title text-white" id = "dark-header-modalLabel" >
Modal Heading
< / h4 >
< button type = "button" class = "btn-close btn-close-white" data-bs-dismiss = "modal" aria-label = "Close" > < / button >
< / div >
< div class = "modal-body" >
< h5 class = "mt-0 text-white" > Dark Background< / h5 >
< p class = "text-white-50" >
Cras mattis consectetur purus sit amet
fermentum. Cras justo odio, dapibus ac facilisis
in, egestas eget quam. Morbi leo risus, porta ac
consectetur ac, vestibulum at eros.
< / p >
< p class = "text-white-50" >
Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
< / p >
< / div >
< div class = "modal-footer" >
< button type = "button" class = "btn btn-light" data-bs-dismiss = "modal" >
Close
< / button >
< / div >
< / div >
<!-- /.modal - content -->
< / div >
<!-- /.modal - dialog -->
< / div >
<!-- /.modal -->
< / div >
< / div >
< / div >
<!-- end Modal Filled Coloured -->
< / div >
< div class = "col-12" >
<!-- start Modal Based Alerts -->
< div class = "card" >
< div class = "card-body" >
< h4 class = "card-title mb-4" > Modal Based Alerts< / h4 >
< div class = "button-group" >
<!-- Button trigger modal -->
< button type = "button" class = "btn mb-1 bg-success-subtle text-success px-4 fs-4 " data-bs-toggle = "modal" data-bs-target = "#al-success-alert" >
Success Alert
< / button >
<!-- Vertically centered modal -->
< div class = "modal fade" id = "al-success-alert" tabindex = "-1" aria-labelledby = "vertical-center-modal" aria-hidden = "true" >
< div class = "modal-dialog modal-sm" >
< div class = "modal-content modal-filled bg-success-subtle text-success" >
< div class = "modal-body p-4" >
< div class = "text-center text-success" >
< i class = "ti ti-circle-check fs-7" > < / i >
< h4 class = "mt-2" > Well Done!< / h4 >
< p class = "mt-3 text-success-50" >
Cras mattis consectetur purus sit amet
fermentum. Cras justo odio, dapibus ac
facilisis in, egestas eget quam.
< / p >
< button type = "button" class = "btn btn-light my-2" data-bs-dismiss = "modal" >
Continue
< / button >
< / div >
< / div >
< / div >
<!-- /.modal - content -->
< / div >
< / div >
<!-- Button trigger modal -->
< button type = "button" class = "btn mb-1 bg-info-subtle text-info px-4 fs-4 " data-bs-toggle = "modal" data-bs-target = "#al-info-alert" >
Info Alert
< / button >
<!-- Vertically centered modal -->
< div class = "modal fade" id = "al-info-alert" tabindex = "-1" aria-labelledby = "vertical-center-modal" aria-hidden = "true" >
< div class = "modal-dialog modal-sm" >
< div class = "modal-content modal-filled bg-info-subtle" >
< div class = "modal-body p-4" >
< div class = "text-center text-info" >
< i class = "ti ti-info-circle fs-7" > < / i >
< h4 class = "mt-2" > Heads up!< / h4 >
< p class = "mt-3" >
Cras mattis consectetur purus sit amet
fermentum. Cras justo odio, dapibus ac
facilisis in, egestas eget quam.
< / p >
< button type = "button" class = "btn btn-light my-2" data-bs-dismiss = "modal" >
Continue
< / button >
< / div >
< / div >
< / div >
<!-- /.modal - content -->
< / div >
< / div >
<!-- Button trigger modal -->
< button type = "button" class = "btn mb-1 bg-warning-subtle text-warning px-4 fs-4 " data-bs-toggle = "modal" data-bs-target = "#al-warning-alert" >
Warning Alert
< / button >
<!-- Vertically centered modal -->
< div class = "modal fade" id = "al-warning-alert" tabindex = "-1" aria-labelledby = "vertical-center-modal" aria-hidden = "true" >
< div class = "modal-dialog modal-sm" >
< div class = "modal-content modal-filled bg-warning-subtle" >
< div class = "modal-body p-4" >
< div class = "text-center text-warning" >
< i class = "ti ti-alert-octagon fs-7" > < / i >
< h4 class = "mt-2" > Incorrect Information< / h4 >
< p class = "mt-3" >
Cras mattis consectetur purus sit amet
fermentum.Cras justo odio, dapibus ac
facilisis in, egestas eget quam.
< / p >
< button type = "button" class = "btn btn-light my-2" data-bs-dismiss = "modal" >
Continue
< / button >
< / div >
< / div >
< / div >
<!-- /.modal - content -->
< / div >
< / div >
<!-- Button trigger modal -->
< button type = "button" class = "btn mb-1 bg-danger-subtle text-danger px-4 fs-4 " data-bs-toggle = "modal" data-bs-target = "#al-danger-alert" >
Danger Alert
< / button >
<!-- Vertically centered modal -->
< div class = "modal fade" id = "al-danger-alert" tabindex = "-1" aria-labelledby = "vertical-center-modal" aria-hidden = "true" >
< div class = "modal-dialog modal-sm" >
< div class = "modal-content modal-filled bg-danger-subtle" >
< div class = "modal-body p-4" >
< div class = "text-center text-danger" >
< i class = "ti ti-hexagon-letter-x fs-7" > < / i >
< h4 class = "mt-2" > Oh snap!< / h4 >
< p class = "mt-3" >
Cras mattis consectetur purus sit amet
fermentum.Cras justo odio, dapibus ac
facilisis in, egestas eget quam.
< / p >
< button type = "button" class = "btn btn-light my-2" data-bs-dismiss = "modal" >
Continue
< / button >
< / div >
< / div >
< / div >
<!-- /.modal - content -->
< / div >
< / div >
< / div >
< / div >
< / div >
<!-- end Modal Based Alerts -->
< / div >
< / div >
< / div >
< / div >
< / div >
<!-- Search Bar -->
< div class = "modal fade" id = "exampleModal" tabindex = "-1" aria-hidden = "true" >
< div class = "modal-dialog modal-dialog-scrollable modal-lg" >
< div class = "modal-content rounded-1" >
< div class = "modal-header border-bottom" >
< input type = "search" class = "form-control fs-3" placeholder = "Search here" id = "search" / >
< a href = "javascript:void(0)" data-bs-dismiss = "modal" class = "lh-1" >
< i class = "ti ti-x fs-5 ms-3" > < / i >
< / a >
< / div >
< div class = "modal-body message-body" data-simplebar = "" >
< h5 class = "mb-0 fs-5 p-1" > Quick Page Links< / h5 >
< ul class = "list mb-0 py-2" >
< li class = "p-1 mb-1 bg-hover-light-black" >
< a href = "javascript:void(0)" >
< span class = "d-block" > Modern< / span >
< span class = "text-muted d-block" > /dashboards/dashboard1< / span >
< / a >
< / li >
< li class = "p-1 mb-1 bg-hover-light-black" >
< a href = "javascript:void(0)" >
< span class = "d-block" > Dashboard< / span >
< span class = "text-muted d-block" > /dashboards/dashboard2< / span >
< / a >
< / li >
< li class = "p-1 mb-1 bg-hover-light-black" >
< a href = "javascript:void(0)" >
< span class = "d-block" > Contacts< / span >
< span class = "text-muted d-block" > /apps/contacts< / span >
< / a >
< / li >
< li class = "p-1 mb-1 bg-hover-light-black" >
< a href = "javascript:void(0)" >
< span class = "d-block" > Posts< / span >
< span class = "text-muted d-block" > /apps/blog/posts< / span >
< / a >
< / li >
< li class = "p-1 mb-1 bg-hover-light-black" >
< a href = "javascript:void(0)" >
< span class = "d-block" > Detail< / span >
< span class = "text-muted d-block" > /apps/blog/detail/streaming-video-way-before-it-was-cool-go-dark-tomorrow< / span >
< / a >
< / li >
< li class = "p-1 mb-1 bg-hover-light-black" >
< a href = "javascript:void(0)" >
< span class = "d-block" > Shop< / span >
< span class = "text-muted d-block" > /apps/ecommerce/shop< / span >
< / a >
< / li >
< li class = "p-1 mb-1 bg-hover-light-black" >
< a href = "javascript:void(0)" >
< span class = "d-block" > Modern< / span >
< span class = "text-muted d-block" > /dashboards/dashboard1< / span >
< / a >
< / li >
< li class = "p-1 mb-1 bg-hover-light-black" >
< a href = "javascript:void(0)" >
< span class = "d-block" > Dashboard< / span >
< span class = "text-muted d-block" > /dashboards/dashboard2< / span >
< / a >
< / li >
< li class = "p-1 mb-1 bg-hover-light-black" >
< a href = "javascript:void(0)" >
< span class = "d-block" > Contacts< / span >
< span class = "text-muted d-block" > /apps/contacts< / span >
< / a >
< / li >
< li class = "p-1 mb-1 bg-hover-light-black" >
< a href = "javascript:void(0)" >
< span class = "d-block" > Posts< / span >
< span class = "text-muted d-block" > /apps/blog/posts< / span >
< / a >
< / li >
< li class = "p-1 mb-1 bg-hover-light-black" >
< a href = "javascript:void(0)" >
< span class = "d-block" > Detail< / span >
< span class = "text-muted d-block" > /apps/blog/detail/streaming-video-way-before-it-was-cool-go-dark-tomorrow< / span >
< / a >
< / li >
< li class = "p-1 mb-1 bg-hover-light-black" >
< a href = "javascript:void(0)" >
< span class = "d-block" > Shop< / span >
< span class = "text-muted d-block" > /apps/ecommerce/shop< / span >
< / a >
< / li >
< / ul >
< / div >
< / div >
< / div >
< / div >
<!-- Shopping Cart -->
< div class = "offcanvas offcanvas-end shopping-cart" tabindex = "-1" id = "offcanvasRight" aria-labelledby = "offcanvasRightLabel" >
< div class = "offcanvas-header justify-content-between py-4" >
< h5 class = "offcanvas-title fs-5 fw-semibold" id = "offcanvasRightLabel" >
Shopping Cart
< / h5 >
< span class = "badge bg-primary rounded-4 px-3 py-1 lh-sm" > 5 new< / span >
< / div >
< div class = "offcanvas-body h-100 px-4 pt-0" data-simplebar >
< ul class = "mb-0" >
< li class = "pb-7" >
< div class = "d-flex align-items-center" >
< img src = "../assets/images/products/product-1.jpg" width = "95" height = "75" class = "rounded-1 me-9 flex-shrink-0" alt = "modernize-img" / >
< div >
< h6 class = "mb-1" > Supreme toys cooker< / h6 >
< p class = "mb-0 text-muted fs-2" > Kitchenware Item< / p >
< div class = "d-flex align-items-center justify-content-between mt-2" >
< h6 class = "fs-2 fw-semibold mb-0 text-muted" > $250< / h6 >
< div class = "input-group input-group-sm w-50" >
< button class = "btn border-0 round-20 minus p-0 bg-success-subtle text-success" type = "button" id = "add1" >
-
< / button >
< input type = "text" class = "form-control round-20 bg-transparent text-muted fs-2 border-0 text-center qty" placeholder = "" aria-label = "Example text with button addon" aria-describedby = "add1" value = "1" / >
< button class = "btn text-success bg-success-subtle p-0 round-20 border-0 add" type = "button" id = "addo2" >
+
< / button >
< / div >
< / div >
< / div >
< / div >
< / li >
< li class = "pb-7" >
< div class = "d-flex align-items-center" >
< img src = "../assets/images/products/product-2.jpg" width = "95" height = "75" class = "rounded-1 me-9 flex-shrink-0" alt = "modernize-img" / >
< div >
< h6 class = "mb-1" > Supreme toys cooker< / h6 >
< p class = "mb-0 text-muted fs-2" > Kitchenware Item< / p >
< div class = "d-flex align-items-center justify-content-between mt-2" >
< h6 class = "fs-2 fw-semibold mb-0 text-muted" > $250< / h6 >
< div class = "input-group input-group-sm w-50" >
< button class = "btn border-0 round-20 minus p-0 bg-success-subtle text-success" type = "button" id = "add2" >
-
< / button >
< input type = "text" class = "form-control round-20 bg-transparent text-muted fs-2 border-0 text-center qty" placeholder = "" aria-label = "Example text with button addon" aria-describedby = "add2" value = "1" / >
< button class = "btn text-success bg-success-subtle p-0 round-20 border-0 add" type = "button" id = "addon34" >
+
< / button >
< / div >
< / div >
< / div >
< / div >
< / li >
< li class = "pb-7" >
< div class = "d-flex align-items-center" >
< img src = "../assets/images/products/product-3.jpg" width = "95" height = "75" class = "rounded-1 me-9 flex-shrink-0" alt = "modernize-img" / >
< div >
< h6 class = "mb-1" > Supreme toys cooker< / h6 >
< p class = "mb-0 text-muted fs-2" > Kitchenware Item< / p >
< div class = "d-flex align-items-center justify-content-between mt-2" >
< h6 class = "fs-2 fw-semibold mb-0 text-muted" > $250< / h6 >
< div class = "input-group input-group-sm w-50" >
< button class = "btn border-0 round-20 minus p-0 bg-success-subtle text-success" type = "button" id = "add3" >
-
< / button >
< input type = "text" class = "form-control round-20 bg-transparent text-muted fs-2 border-0 text-center qty" placeholder = "" aria-label = "Example text with button addon" aria-describedby = "add3" value = "1" / >
< button class = "btn text-success bg-success-subtle p-0 round-20 border-0 add" type = "button" id = "addon3" >
+
< / button >
< / div >
< / div >
< / div >
< / div >
< / li >
< / ul >
< div class = "align-bottom" >
< div class = "d-flex align-items-center pb-7" >
< span class = "text-dark fs-3" > Sub Total< / span >
< div class = "ms-auto" >
< span class = "text-dark fw-semibold fs-3" > $2530< / span >
< / div >
< / div >
< div class = "d-flex align-items-center pb-7" >
< span class = "text-dark fs-3" > Total< / span >
< div class = "ms-auto" >
< span class = "text-dark fw-semibold fs-3" > $6830< / span >
< / div >
< / div >
< a href = "../main/eco-checkout.html" class = "btn btn-outline-primary w-100" > Go to shopping cart< / a >
< / div >
< / div >
< / div >
< / div >
2025-12-27 02:50:16 +08:00
{{template "components-footer.html" .}}
2025-12-26 22:35:18 +08:00
2025-12-27 02:50:16 +08:00
