Created
June 16, 2024 11:45
-
-
Save neisdev/b5b4e19fb11867cd9e1cec587b163db7 to your computer and use it in GitHub Desktop.
ZERRjVO
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html class="light-style layout-menu-fixed" data-theme="theme-default" data-assets-path="https://demos.themeselection.com/sneat-bootstrap-html-laravel-admin-template-free/demo/assets/" data-base-url="https://demos.themeselection.com/sneat-bootstrap-html-laravel-admin-template-free/demo" data-framework="laravel" data-template="vertical-menu-laravel-template-free"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> | |
| <title>Toasts - UI elements | Sneat - HTML Laravel Free Admin Template </title> | |
| <meta name="description" content="Most Powerful & Comprehensive Bootstrap 5 HTML Admin Dashboard Template built for developers!"> | |
| <meta name="keywords" content="dashboard, bootstrap 5 dashboard, bootstrap 5 design, bootstrap 5, bootstrap 5 free, free admin template"> | |
| <!-- laravel CRUD token --> | |
| <meta name="csrf-token" content="NEXUKiAgINCZD0v1tsPFdEurwFvG20JIgNUZFj3T"> | |
| <!-- Canonical SEO --> | |
| <link rel="canonical" href="https://themeselection.com/item/sneat-bootstrap-html-laravel-admin-template/"> | |
| <!-- Favicon --> | |
| <link rel="icon" type="image/x-icon" href="https://demos.themeselection.com/sneat-bootstrap-html-laravel-admin-template-free/demo/assets/img/favicon/favicon.ico"> | |
| <!-- Include Styles --> | |
| <!-- BEGIN: Theme CSS--> | |
| <!-- Fonts --> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin=""> | |
| <link href="https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet"> | |
| <link rel="stylesheet" href="https://demos.themeselection.com/sneat-bootstrap-html-laravel-admin-template-free/demo/assets/vendor/fonts/boxicons.css?id=b821a646ad0904f9218f56d8be8f070c"> | |
| <!-- Core CSS --> | |
| <link rel="stylesheet" href="https://demos.themeselection.com/sneat-bootstrap-html-laravel-admin-template-free/demo/assets/vendor/css/core.css?id=7a74a9d0cfeabd283069bfaa3de33eaa"> | |
| <link rel="stylesheet" href="https://demos.themeselection.com/sneat-bootstrap-html-laravel-admin-template-free/demo/assets/vendor/css/theme-default.css?id=3d127db9612959fd1b1297d4adb3d55e"> | |
| <link rel="stylesheet" href="https://demos.themeselection.com/sneat-bootstrap-html-laravel-admin-template-free/demo/assets/css/demo.css?id=8a804dae81f41c0f9fcbef2fa8316bdd"> | |
| <link rel="stylesheet" href="https://demos.themeselection.com/sneat-bootstrap-html-laravel-admin-template-free/demo/assets/vendor/libs/perfect-scrollbar/perfect-scrollbar.css?id=98fefe4424f0148a6e7c70b613511b33"> | |
| <!-- Vendor Styles --> | |
| <!-- Page Styles --> | |
| <!-- Include Scripts for customizer, helper, analytics, config --> | |
| <!-- laravel style --> | |
| <script src="https://demos.themeselection.com/sneat-bootstrap-html-laravel-admin-template-free/demo/assets/vendor/js/helpers.js"></script> | |
| <style type="text/css"> | |
| .layout-menu-fixed .layout-navbar-full .layout-menu, | |
| .layout-page { | |
| padding-top: 0px !important; | |
| } | |
| .content-wrapper { | |
| padding-bottom: 0px !important; | |
| } | |
| </style> | |
| <!--? Config: Mandatory theme config file contain global vars & default theme options, Set your preferred theme option in this file. --> | |
| <script src="https://demos.themeselection.com/sneat-bootstrap-html-laravel-admin-template-free/demo/assets/js/config.js"></script> | |
| <!-- beautify ignore:end --> | |
| <!-- Global site tag (gtag.js) - Google Analytics --> | |
| <script async="async" src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script> | |
| <script> | |
| window.dataLayer = window.dataLayer || []; | |
| function gtag() { | |
| dataLayer.push(arguments); | |
| } | |
| gtag('js', new Date()); | |
| gtag('config', 'GA_MEASUREMENT_ID'); | |
| </script> | |
| <!-- Place this tag in your head or just before your close body tag. --> | |
| <script async="" defer="" src="https://buttons.github.io/buttons.js"></script> | |
| </head> | |
| <body> | |
| <!-- Layout Content --> | |
| <div class="layout-wrapper layout-content-navbar "> | |
| <div class="layout-container"> | |
| <aside id="layout-menu" class="layout-menu menu-vertical menu bg-menu-theme" data-bg-class="bg-menu-theme"> | |
| <!-- ! Hide app brand if navbar-full --> | |
| <div class="app-brand demo"> | |
| <a href="https://demos.themeselection.com/sneat-bootstrap-html-laravel-admin-template-free/demo" class="app-brand-link"> | |
| <span class="app-brand-logo demo"> | |
| <svg width="25" viewBox="0 0 25 42" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> | |
| <defs> | |
| <path d="M13.7918663,0.358365126 L3.39788168,7.44174259 C0.566865006,9.69408886 -0.379795268,12.4788597 0.557900856,15.7960551 C0.68998853,16.2305145 1.09562888,17.7872135 3.12357076,19.2293357 C3.8146334,19.7207684 5.32369333,20.3834223 7.65075054,21.2172976 L7.59773219,21.2525164 L2.63468769,24.5493413 C0.445452254,26.3002124 0.0884951797,28.5083815 1.56381646,31.1738486 C2.83770406,32.8170431 5.20850219,33.2640127 7.09180128,32.5391577 C8.347334,32.0559211 11.4559176,30.0011079 16.4175519,26.3747182 C18.0338572,24.4997857 18.6973423,22.4544883 18.4080071,20.2388261 C17.963753,17.5346866 16.1776345,15.5799961 13.0496516,14.3747546 L10.9194936,13.4715819 L18.6192054,7.984237 L13.7918663,0.358365126 Z" id="path-1"></path> | |
| <path d="M5.47320593,6.00457225 C4.05321814,8.216144 4.36334763,10.0722806 6.40359441,11.5729822 C8.61520715,12.571656 10.0999176,13.2171421 10.8577257,13.5094407 L15.5088241,14.433041 L18.6192054,7.984237 C15.5364148,3.11535317 13.9273018,0.573395879 13.7918663,0.358365126 C13.5790555,0.511491653 10.8061687,2.3935607 5.47320593,6.00457225 Z" id="path-3"></path> | |
| <path d="M7.50063644,21.2294429 L12.3234468,23.3159332 C14.1688022,24.7579751 14.397098,26.4880487 13.008334,28.506154 C11.6195701,30.5242593 10.3099883,31.790241 9.07958868,32.3040991 C5.78142938,33.4346997 4.13234973,34 4.13234973,34 C4.13234973,34 2.75489982,33.0538207 2.37032616e-14,31.1614621 C-0.55822714,27.8186216 -0.55822714,26.0572515 -4.05231404e-15,25.8773518 C0.83734071,25.6075023 2.77988457,22.8248993 3.3049379,22.52991 C3.65497346,22.3332504 5.05353963,21.8997614 7.50063644,21.2294429 Z" id="path-4"></path> | |
| <path d="M20.6,7.13333333 L25.6,13.8 C26.2627417,14.6836556 26.0836556,15.9372583 25.2,16.6 C24.8538077,16.8596443 24.4327404,17 24,17 L14,17 C12.8954305,17 12,16.1045695 12,15 C12,14.5672596 12.1403557,14.1461923 12.4,13.8 L17.4,7.13333333 C18.0627417,6.24967773 19.3163444,6.07059163 20.2,6.73333333 C20.3516113,6.84704183 20.4862915,6.981722 20.6,7.13333333 Z" id="path-5"></path> | |
| </defs> | |
| <g id="g-app-brand" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> | |
| <g id="Brand-Logo" transform="translate(-27.000000, -15.000000)"> | |
| <g id="Icon" transform="translate(27.000000, 15.000000)"> | |
| <g id="Mask" transform="translate(0.000000, 8.000000)"> | |
| <mask id="mask-2" fill="white"> | |
| <use xlink:href="#path-1"></use> | |
| </mask> | |
| <use fill="#696cff" xlink:href="#path-1"></use> | |
| <g id="Path-3" mask="url(#mask-2)"> | |
| <use fill="#696cff" xlink:href="#path-3"></use> | |
| <use fill-opacity="0.2" fill="#FFFFFF" xlink:href="#path-3"></use> | |
| </g> | |
| <g id="Path-4" mask="url(#mask-2)"> | |
| <use fill="#696cff" xlink:href="#path-4"></use> | |
| <use fill-opacity="0.2" fill="#FFFFFF" xlink:href="#path-4"></use> | |
| </g> | |
| </g> | |
| <g id="Triangle" transform="translate(19.000000, 11.000000) rotate(-300.000000) translate(-19.000000, -11.000000) "> | |
| <use fill="#696cff" xlink:href="#path-5"></use> | |
| <use fill-opacity="0.2" fill="#FFFFFF" xlink:href="#path-5"></use> | |
| </g> | |
| </g> | |
| </g> | |
| </g> | |
| </svg> | |
| </span> | |
| <span class="app-brand-text demo menu-text fw-bold ms-2">Sneat</span> | |
| </a> | |
| <a href="javascript:void(0);" class="layout-menu-toggle menu-link text-large ms-autod-block d-xl-none"> | |
| <i class="bx bx-chevron-left bx-sm align-middle"></i> | |
| </a> | |
| </div> | |
| <div class="menu-inner-shadow" style="display: block;"></div> | |
| <ul class="menu-inner py-1 ps ps--active-y"> | |
| <li class="menu-item "> | |
| <a href="https://demos.themeselection.com/sneat-bootstrap-html-laravel-admin-template-free/demo" class="menu-link"> | |
| <i class="menu-icon tf-icons bx bx-home-circle"></i> | |
| <div>Dashboard</div> | |
| </a> | |
| </li> | |
| <li class="menu-item "> | |
| <a href="javascript:void(0);" class="menu-link menu-toggle"> | |
| <i class="menu-icon tf-icons bx bx-layout"></i> | |
| <div>Layouts</div> | |
| </a> | |
| <ul class="menu-sub"> | |
| <li class="menu-item "> | |
| <a href="https://demos.themeselection.com/sneat-bootstrap-html-laravel-admin-template-free/demo/layouts/without-menu" class="menu-link"> | |
| <div>Without menu</div> | |
| </a> | |
| </li> | |
| <li class="menu-item "> | |
| <a href="https://demos.themeselection.com/sneat-bootstrap-html-laravel-admin-template-free/demo/layouts/without-navbar" class="menu-link"> | |
| <div>Without navbar</div> | |
| </a> | |
| </li> | |
| <li class="menu-item "> | |
| <a href="https://demos.themeselection.com/sneat-bootstrap-html-laravel-admin-template-free/demo/layouts/container" class="menu-link"> | |
| <div>Container</div> | |
| </a> | |
| </li> | |
| <li class="menu-item "> | |
| <a href="https://demos.themeselection.com/sneat-bootstrap-html-laravel-admin-template-free/demo/layouts/fluid" class="menu-link"> | |
| <div>Fluid</div> | |
| </a> | |
| </li> | |
| <li class="menu-item "> | |
| <a href="https://demos.themeselection.com/sneat-bootstrap-html-laravel-admin-template-free/demo/layouts/blank" class="menu-link" target="_blank"> | |
| <div>Blank</div> | |
| </a> | |
| </li> | |
| </ul> | |
| </li> | |
| <li class="menu-header small text-uppercase"> | |
| <span class="menu-header-text">Pages</span> | |
| </li> | |
| <li class="menu-item "> | |
| <a href="javascript:void(0);" class="menu-link menu-toggle"> | |
| <i class="menu-icon tf-icons bx bx bx-dock-top"></i> | |
| <div>Account Settings</div> | |
| </a> | |
| <ul class="menu-sub"> | |
| <li class="menu-item "> | |
| <a href="https://demos.themeselection.com/sneat-bootstrap-html-laravel-admin-template-free/demo/pages/account-settings-account" class="menu-link"> | |
| <div>Account</div> | |
| </a> | |
| </li> | |
| <li class="menu-item "> | |
| <a href="https://demos.themeselection.com/sneat-bootstrap-html-laravel-admin-template-free/demo/pages/account-settings-notifications" class="menu-link"> | |
| <div>Notifications</div> | |
| </a> | |
| </li> | |
| <li class="menu-item "> | |
| <a href="https://demos.themeselection.com/sneat-bootstrap-html-laravel-admin-template-free/demo/pages/account-settings-connections" class="menu-link"> | |
| <div>Connections</div> | |
| </a> | |
| </li> | |
| </ul> | |
| </li> | |
| <li class="menu-item "> | |
| <a href="javascript:void(0);" class="menu-link menu-toggle"> | |
| <i class="menu-icon tf-icons bx bx-lock-open-alt"></i> | |
| <div>Authentications</div> | |
| </a> | |
| <ul class="menu-sub"> | |
| <li class="menu-item "> | |
| <a href="https://demos.themeselection.com/sneat-bootstrap-html-laravel-admin-template-free/demo/auth/login-basic" class="menu-link" target="_blank"> | |
| <div>Login</div> | |
| </a> | |
| </li> | |
| <li class="menu-item "> | |
| <a href="https://demos.themeselection.com/sneat-bootstrap-html-laravel-admin-template-free/demo/auth/register-basic" class="menu-link" target="_blank"> | |
| <div>Register</div> | |
| </a> | |
| </li> | |
| <li class="menu-item "> | |
| <a href="https://demos.themeselection.com/sneat-bootstrap-html-laravel-admin-template-free/demo/auth/forgot-password-basic" class="menu-link" target="_blank"> | |
| <div>Forgot Password</div> | |
| </a> | |
| </li> | |
| </ul> | |
| </li> | |
| <li class="menu-item "> | |
| <a href="javascript:void(0);" class="menu-link menu-toggle"> | |
| <i class="menu-icon tf-icons bx bx-cube-alt"></i> | |
| <div>Misc</div> | |
| </a> | |
| <ul class="menu-sub"> | |
| <li class="menu-item "> | |
| <a href="https://demos.themeselection.com/sneat-bootstrap-html-laravel-admin-template-free/demo/pages/misc-error" class="menu-link" target="_blank"> | |
| <div>Error</div> | |
| </a> | |
| </li> | |
| <li class="menu-item "> | |
| <a href="https://demos.themeselection.com/sneat-bootstrap-html-laravel-admin-template-free/demo/pages/misc-under-maintenance" class="menu-link" target="_blank"> | |
| <div>Under Maintenance</div> | |
| </a> | |
| </li> | |
| </ul> | |
| </li> | |
| <li class="menu-header small text-uppercase"> | |
| <span class="menu-header-text">Components</span> | |
| </li> | |
| <li class="menu-item "> | |
| <a href="https://demos.themeselection.com/sneat-bootstrap-html-laravel-admin-template-free/demo/cards/basic" class="menu-link"> | |
| <i class="menu-icon tf-icons bx bx-collection"></i> | |
| <div>Cards</div> | |
| </a> | |
| </li> | |
| <li class="menu-item active open"> | |
| <a href="javascript:void(0);" class="menu-link menu-toggle"> | |
| <i class="menu-icon tf-icons bx bx-box"></i> | |
| <div>User interface</div> | |
| </a> | |
| <ul class="menu-sub"> | |
| <li class="menu-item "> | |
| <a href="https://demos.themeselection.com/sneat-bootstrap-html-laravel-admin-template-free/demo/ui/accordion" class="menu-link"> | |
| <div>Accordion</div> | |
| </a> | |
| </li> | |
| <li class="menu-item "> | |
| <a href="https://demos.themeselection.com/sneat-bootstrap-html-laravel-admin-template-free/demo/ui/alerts" class="menu-link"> | |
| <div>Alerts</div> | |
| </a> | |
| </li> | |
| <li class="menu-item "> | |
| <a href="https://demos.themeselection.com/sneat-bootstrap-html-laravel-admin-template-free/demo/ui/badges" class="menu-link"> | |
| <div>Badges</div> | |
| </a> | |
| </li> | |
| <li class="menu-item "> | |
| <a href="https://demos.themeselection.com/sneat-bootstrap-html-laravel-admin-template-free/demo/ui/buttons" class="menu-link"> | |
| <div>Buttons</div> | |
| </a> | |
| </li> | |
| <li class="menu-item "> | |
| <a href="https://demos.themeselection.com/sneat-bootstrap-html-laravel-admin-template-free/demo/ui/carousel" class="menu-link"> | |
| <div>Carousel</div> | |
| </a> | |
| </li> | |
| <li class="menu-item "> | |
| <a href="https://demos.themeselection.com/sneat-bootstrap-html-laravel-admin-template-free/demo/ui/collapse" class="menu-link"> | |
| <div>Collapse</div> | |
| </a> | |
| </li> | |
| <li class="menu-item "> | |
| <a href="https://demos.themeselection.com/sneat-bootstrap-html-laravel-admin-template-free/demo/ui/dropdowns" class="menu-link"> | |
| <div>Dropdowns</div> | |
| </a> | |
| </li> | |
| <li class="menu-item "> | |
| <a href="https://demos.themeselection.com/sneat-bootstrap-html-laravel-admin-template-free/demo/ui/footer" class="menu-link"> | |
| <div>Footer</div> | |
| </a> | |
| </li> | |
| <li class="menu-item "> | |
| <a href="https://demos.themeselection.com/sneat-bootstrap-html-laravel-admin-template-free/demo/ui/list-groups" class="menu-link"> | |
| <div>List groups</div> | |
| </a> | |
| </li> | |
| <li class="menu-item "> | |
| <a href="https://demos.themeselection.com/sneat-bootstrap-html-laravel-admin-template-free/demo/ui/modals" class="menu-link"> | |
| <div>Modals</div> | |
| </a> | |
| </li> | |
| <li class="menu-item "> | |
| <a href="https://demos.themeselection.com/sneat-bootstrap-html-laravel-admin-template-free/demo/ui/navbar" class="menu-link"> | |
| <div>Navbar</div> | |
| </a> | |
| </li> | |
| <li class="menu-item "> | |
| <a href="https://demos.themeselection.com/sneat-bootstrap-html-laravel-admin-template-free/demo/ui/offcanvas" class="menu-link"> | |
| <div>Offcanvas</div> | |
| </a> | |
| </li> | |
| <li class="menu-item "> | |
| <a href="https://demos.themeselection.com/sneat-bootstrap-html-laravel-admin-template-free/demo/ui/pagination-breadcrumbs" class="menu-link"> | |
| <div>Pagination & Breadcrumbs</div> | |
| </a> | |
| </li> | |
| <li class="menu-item "> | |
| <a href="https://demos.themeselection.com/sneat-bootstrap-html-laravel-admin-template-free/demo/ui/progress" class="menu-link"> | |
| <div>Progress</div> | |
| </a> | |
| </li> | |
| <li class="menu-item "> | |
| <a href="https://demos.themeselection.com/sneat-bootstrap-html-laravel-admin-template-free/demo/ui/spinners" class="menu-link"> | |
| <div>Spinners</div> | |
| </a> | |
| </li> | |
| <li class="menu-item "> | |
| <a href="https://demos.themeselection.com/sneat-bootstrap-html-laravel-admin-template-free/demo/ui/tabs-pills" class="menu-link"> | |
| <div>Tabs & Pills</div> | |
| </a> | |
| </li> | |
| <li class="menu-item active"> | |
| <a href="https://demos.themeselection.com/sneat-bootstrap-html-laravel-admin-template-free/demo/ui/toasts" class="menu-link"> | |
| <div>Toasts</div> | |
| </a> | |
| </li> | |
| <li class="menu-item "> | |
| <a href="https://demos.themeselection.com/sneat-bootstrap-html-laravel-admin-template-free/demo/ui/tooltips-popovers" class="menu-link"> | |
| <div>Tooltips & popovers</div> | |
| </a> | |
| </li> | |
| <li class="menu-item "> | |
| <a href="https://demos.themeselection.com/sneat-bootstrap-html-laravel-admin-template-free/demo/ui/typography" class="menu-link"> | |
| <div>Typography</div> | |
| </a> | |
| </li> | |
| </ul> | |
| </li> | |
| <li class="menu-item "> | |
| <a href="javascript:void(0);" class="menu-link menu-toggle"> | |
| <i class="menu-icon tf-icons bx bx-copy"></i> | |
| <div>Extended UI</div> | |
| </a> | |
| <ul class="menu-sub"> | |
| <li class="menu-item "> | |
| <a href="https://demos.themeselection.com/sneat-bootstrap-html-laravel-admin-template-free/demo/extended/ui-perfect-scrollbar" class="menu-link"> | |
| <div>Perfect scrollbar</div> | |
| </a> | |
| </li> | |
| <li class="menu-item "> | |
| <a href="https://demos.themeselection.com/sneat-bootstrap-html-laravel-admin-template-free/demo/extended/ui-text-divider" class="menu-link"> | |
| <div>Text Divider</div> | |
| </a> | |
| </li> | |
| </ul> | |
| </li> | |
| <li class="menu-item "> | |
| <a href="https://demos.themeselection.com/sneat-bootstrap-html-laravel-admin-template-free/demo/icons/boxicons" class="menu-link"> | |
| <i class="menu-icon tf-icons bx bx-crown"></i> | |
| <div>Boxicons</div> | |
| </a> | |
| </li> | |
| <li class="menu-header small text-uppercase"> | |
| <span class="menu-header-text">Forms & Tables</span> | |
| </li> | |
| <li class="menu-item "> | |
| <a href="javascript:void(0);" class="menu-link menu-toggle"> | |
| <i class="menu-icon tf-icons bx bx-detail"></i> | |
| <div>Form Elements</div> | |
| </a> | |
| <ul class="menu-sub"> | |
| <li class="menu-item "> | |
| <a href="https://demos.themeselection.com/sneat-bootstrap-html-laravel-admin-template-free/demo/forms/basic-inputs" class="menu-link"> | |
| <div>Basic Inputs</div> | |
| </a> | |
| </li> | |
| <li class="menu-item "> | |
| <a href="https://demos.themeselection.com/sneat-bootstrap-html-laravel-admin-template-free/demo/forms/input-groups" class="menu-link"> | |
| <div>Input groups</div> | |
| </a> | |
| </li> | |
| </ul> | |
| </li> | |
| <li class="menu-item "> | |
| <a href="javascript:void(0);" class="menu-link menu-toggle"> | |
| <i class="menu-icon tf-icons bx bx-detail"></i> | |
| <div>Form Layouts</div> | |
| </a> | |
| <ul class="menu-sub"> | |
| <li class="menu-item "> | |
| <a href="https://demos.themeselection.com/sneat-bootstrap-html-laravel-admin-template-free/demo/form/layouts-vertical" class="menu-link"> | |
| <div>Vertical Form</div> | |
| </a> | |
| </li> | |
| <li class="menu-item "> | |
| <a href="https://demos.themeselection.com/sneat-bootstrap-html-laravel-admin-template-free/demo/form/layouts-horizontal" class="menu-link"> | |
| <div>Horizontal Form</div> | |
| </a> | |
| </li> | |
| </ul> | |
| </li> | |
| <li class="menu-item "> | |
| <a href="https://demos.themeselection.com/sneat-bootstrap-html-laravel-admin-template-free/demo/tables/basic" class="menu-link"> | |
| <i class="menu-icon tf-icons bx bx-table"></i> | |
| <div>Tables</div> | |
| </a> | |
| </li> | |
| <li class="menu-header small text-uppercase"> | |
| <span class="menu-header-text">Misc</span> | |
| </li> | |
| <li class="menu-item "> | |
| <a href="https://themeselection.com/support/" class="menu-link" target="_blank"> | |
| <i class="menu-icon tf-icons bx bx-support"></i> | |
| <div>Support</div> | |
| </a> | |
| </li> | |
| <li class="menu-item "> | |
| <a href="https://themeselection.com/demo/sneat-bootstrap-html-admin-template/documentation/laravel-introduction.html" class="menu-link" target="_blank"> | |
| <i class="menu-icon tf-icons bx bx-file"></i> | |
| <div>Documentation</div> | |
| </a> | |
| </li> | |
| <div class="ps__rail-x" style="left: 0px; bottom: -712px;"> | |
| <div class="ps__thumb-x" tabindex="0" style="left: 0px; width: 0px;"></div> | |
| </div> | |
| <div class="ps__rail-y" style="top: 712px; height: 994px; right: 4px;"> | |
| <div class="ps__thumb-y" tabindex="0" style="top: 415px; height: 579px;"></div> | |
| </div> | |
| </ul> | |
| </aside> | |
| <!-- Layout page --> | |
| <div class="layout-page"> | |
| <!-- BEGIN: Navbar--> | |
| <!-- Navbar --> | |
| <nav class="layout-navbar container-xxl navbar navbar-expand-xl navbar-detached align-items-center bg-navbar-theme" id="layout-navbar"> | |
| <!-- Brand demo (display only for navbar-full and hide on below xl) --> | |
| <!-- ! Not required for layout-without-menu --> | |
| <div class="layout-menu-toggle navbar-nav align-items-xl-center me-3 me-xl-0 d-xl-none "> | |
| <a class="nav-item nav-link px-0 me-xl-4" href="javascript:void(0)"> | |
| <i class="bx bx-menu bx-sm"></i> | |
| </a> | |
| </div> | |
| <div class="navbar-nav-right d-flex align-items-center" id="navbar-collapse"> | |
| <!-- Search --> | |
| <div class="navbar-nav align-items-center"> | |
| <div class="nav-item d-flex align-items-center"> | |
| <i class="bx bx-search fs-4 lh-0"></i> | |
| <input type="text" class="form-control border-0 shadow-none" placeholder="Search..." aria-label="Search..."> | |
| </div> | |
| </div> | |
| <!-- /Search --> | |
| <ul class="navbar-nav flex-row align-items-center ms-auto"> | |
| <!-- Place this tag where you want the button to render. --> | |
| <li class="nav-item lh-1 me-3"> | |
| <span></span> | |
| </li> | |
| <!-- User --> | |
| <li class="nav-item navbar-dropdown dropdown-user dropdown"> | |
| <a class="nav-link dropdown-toggle hide-arrow" href="javascript:void(0);" data-bs-toggle="dropdown"> | |
| <div class="avatar avatar-online"> | |
| <img src="https://demos.themeselection.com/sneat-bootstrap-html-laravel-admin-template-free/demo/assets/img/avatars/1.png" alt="" class="w-px-40 h-auto rounded-circle"> | |
| </div> | |
| </a> | |
| <ul class="dropdown-menu dropdown-menu-end"> | |
| <li> | |
| <a class="dropdown-item" href="javascript:void(0);"> | |
| <div class="d-flex"> | |
| <div class="flex-shrink-0 me-3"> | |
| <div class="avatar avatar-online"> | |
| <img src="https://demos.themeselection.com/sneat-bootstrap-html-laravel-admin-template-free/demo/assets/img/avatars/1.png" alt="" class="w-px-40 h-auto rounded-circle"> | |
| </div> | |
| </div> | |
| <div class="flex-grow-1"> | |
| <span class="fw-semibold d-block">John Doe</span> | |
| <small class="text-muted">Admin</small> | |
| </div> | |
| </div> | |
| </a> | |
| </li> | |
| <li> | |
| <div class="dropdown-divider"></div> | |
| </li> | |
| <li> | |
| <a class="dropdown-item" href="javascript:void(0);"> | |
| <i class="bx bx-user me-2"></i> | |
| <span class="align-middle">My Profile</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a class="dropdown-item" href="javascript:void(0);"> | |
| <i class="bx bx-cog me-2"></i> | |
| <span class="align-middle">Settings</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a class="dropdown-item" href="javascript:void(0);"> | |
| <span class="d-flex align-items-center align-middle"> | |
| <i class="flex-shrink-0 bx bx-credit-card me-2 pe-1"></i> | |
| <span class="flex-grow-1 align-middle">Billing</span> | |
| <span class="flex-shrink-0 badge badge-center rounded-pill bg-danger w-px-20 h-px-20">4</span> | |
| </span> | |
| </a> | |
| </li> | |
| <li> | |
| <div class="dropdown-divider"></div> | |
| </li> | |
| <li> | |
| <a class="dropdown-item" href="javascript:void(0);"> | |
| <i class="bx bx-power-off me-2"></i> | |
| <span class="align-middle">Log Out</span> | |
| </a> | |
| </li> | |
| </ul> | |
| </li> | |
| <!--/ User --> | |
| </ul> | |
| </div> | |
| </nav> | |
| <!-- / Navbar --> | |
| <!-- END: Navbar--> | |
| <!-- Content wrapper --> | |
| <div class="content-wrapper"> | |
| <!-- Content --> | |
| <div class="container-xxl flex-grow-1 container-p-y"> | |
| <h4 class="fw-semibold py-3 mb-4"><span class="text-muted fw-light">UI elements /</span> Toasts</h4> | |
| <!-- Toast with Placements --> | |
| <div class="bs-toast toast toast-placement-ex m-2 fade bg-dark bottom-0 start-0 hide" role="alert" aria-live="assertive" aria-atomic="true" data-delay="2000"> | |
| <div class="toast-header"> | |
| <i class="bx bx-bell me-2"></i> | |
| <div class="me-auto fw-semibold">Bootstrap</div> | |
| <small>11 mins ago</small> | |
| <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button> | |
| </div> | |
| <div class="toast-body"> | |
| Fruitcake chocolate bar tootsie roll gummies gummies jelly beans cake. | |
| </div> | |
| </div> | |
| <!-- Toast with Placements --> | |
| <!-- Bootstrap Toasts with Placement --> | |
| <div class="card mb-4"> | |
| <h5 class="card-header">Bootstrap Toasts Example With Placement</h5> | |
| <div class="card-body"> | |
| <div class="row gx-3 gy-2 align-items-center"> | |
| <div class="col-md-3"> | |
| <label class="form-label" for="selectTypeOpt">Type</label> | |
| <select id="selectTypeOpt" class="form-select color-dropdown"> | |
| <option value="bg-primary" selected="">Primary</option> | |
| <option value="bg-secondary">Secondary</option> | |
| <option value="bg-success">Success</option> | |
| <option value="bg-danger">Danger</option> | |
| <option value="bg-warning">Warning</option> | |
| <option value="bg-info">Info</option> | |
| <option value="bg-dark">Dark</option> | |
| </select> | |
| </div> | |
| <div class="col-md-3"> | |
| <label class="form-label" for="selectPlacement">Placement</label> | |
| <select class="form-select placement-dropdown" id="selectPlacement"> | |
| <option value="top-0 start-0">Top left</option> | |
| <option value="top-0 start-50 translate-middle-x">Top center</option> | |
| <option value="top-0 end-0">Top right</option> | |
| <option value="top-50 start-0 translate-middle-y">Middle left</option> | |
| <option value="top-50 start-50 translate-middle">Middle center</option> | |
| <option value="top-50 end-0 translate-middle-y">Middle right</option> | |
| <option value="bottom-0 start-0">Bottom left</option> | |
| <option value="bottom-0 start-50 translate-middle-x">Bottom center</option> | |
| <option value="bottom-0 end-0">Bottom right</option> | |
| </select> | |
| </div> | |
| <div class="col-md-3"> | |
| <label class="form-label" for="showToastPlacement"> </label> | |
| <button id="showToastPlacement" class="btn btn-primary d-block">Show Toast</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!--/ Bootstrap Toasts with Placement --> | |
| <!-- Bootstrap Toasts Styles --> | |
| <div class="card mb-4"> | |
| <h5 class="card-header">Bootstrap Toasts Styles</h5> | |
| <div class="row g-0"> | |
| <div class="col-md-6 p-4"> | |
| <div class="text-light small fw-semibold mb-3">Default</div> | |
| <div class="toast-container"> | |
| <div class="bs-toast toast fade show" role="alert" aria-live="assertive" aria-atomic="true"> | |
| <div class="toast-header"> | |
| <i class="bx bx-bell me-2"></i> | |
| <div class="me-auto fw-semibold">Bootstrap</div> | |
| <small>11 mins ago</small> | |
| <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button> | |
| </div> | |
| <div class="toast-body"> | |
| Fruitcake chocolate bar tootsie roll gummies gummies jelly beans cake. | |
| </div> | |
| </div> | |
| <div class="bs-toast toast fade show bg-primary" role="alert" aria-live="assertive" aria-atomic="true"> | |
| <div class="toast-header"> | |
| <i class="bx bx-bell me-2"></i> | |
| <div class="me-auto fw-semibold">Bootstrap</div> | |
| <small>11 mins ago</small> | |
| <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button> | |
| </div> | |
| <div class="toast-body"> | |
| Fruitcake chocolate bar tootsie roll gummies gummies jelly beans cake. | |
| </div> | |
| </div> | |
| <div class="bs-toast toast fade show bg-secondary" role="alert" aria-live="assertive" aria-atomic="true"> | |
| <div class="toast-header"> | |
| <i class="bx bx-bell me-2"></i> | |
| <div class="me-auto fw-semibold">Bootstrap</div> | |
| <small>11 mins ago</small> | |
| <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button> | |
| </div> | |
| <div class="toast-body"> | |
| Fruitcake chocolate bar tootsie roll gummies gummies jelly beans cake. | |
| </div> | |
| </div> | |
| <div class="bs-toast toast fade show bg-success" role="alert" aria-live="assertive" aria-atomic="true"> | |
| <div class="toast-header"> | |
| <i class="bx bx-bell me-2"></i> | |
| <div class="me-auto fw-semibold">Bootstrap</div> | |
| <small>11 mins ago</small> | |
| <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button> | |
| </div> | |
| <div class="toast-body"> | |
| Fruitcake chocolate bar tootsie roll gummies gummies jelly beans cake. | |
| </div> | |
| </div> | |
| <div class="bs-toast toast fade show bg-danger" role="alert" aria-live="assertive" aria-atomic="true"> | |
| <div class="toast-header"> | |
| <i class="bx bx-bell me-2"></i> | |
| <div class="me-auto fw-semibold">Bootstrap</div> | |
| <small>11 mins ago</small> | |
| <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button> | |
| </div> | |
| <div class="toast-body"> | |
| Fruitcake chocolate bar tootsie roll gummies gummies jelly beans cake. | |
| </div> | |
| </div> | |
| <div class="bs-toast toast fade show bg-warning" role="alert" aria-live="assertive" aria-atomic="true"> | |
| <div class="toast-header"> | |
| <i class="bx bx-bell me-2"></i> | |
| <div class="me-auto fw-semibold">Bootstrap</div> | |
| <small>11 mins ago</small> | |
| <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button> | |
| </div> | |
| <div class="toast-body"> | |
| Fruitcake chocolate bar tootsie roll gummies gummies jelly beans cake. | |
| </div> | |
| </div> | |
| <div class="bs-toast toast fade show bg-info" role="alert" aria-live="assertive" aria-atomic="true"> | |
| <div class="toast-header"> | |
| <i class="bx bx-bell me-2"></i> | |
| <div class="me-auto fw-semibold">Bootstrap</div> | |
| <small>11 mins ago</small> | |
| <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button> | |
| </div> | |
| <div class="toast-body"> | |
| Fruitcake chocolate bar tootsie roll gummies gummies jelly beans cake. | |
| </div> | |
| </div> | |
| <div class="bs-toast toast fade show bg-dark" role="alert" aria-live="assertive" aria-atomic="true"> | |
| <div class="toast-header"> | |
| <i class="bx bx-bell me-2"></i> | |
| <div class="me-auto fw-semibold">Bootstrap</div> | |
| <small>11 mins ago</small> | |
| <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button> | |
| </div> | |
| <div class="toast-body"> | |
| Fruitcake chocolate bar tootsie roll gummies gummies jelly beans cake. | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col-md-6 ui-bg-overlay-container p-4"> | |
| <div class="ui-bg-overlay bg-dark opacity-75 rounded-end-bottom"></div> | |
| <div class="text-white small fw-semibold mb-3">Translucent</div> | |
| <div class="toast-container"> | |
| <div class="bs-toast toast fade show" role="alert" aria-live="assertive" aria-atomic="true"> | |
| <div class="toast-header"> | |
| <i class="bx bx-bell me-2"></i> | |
| <div class="me-auto fw-semibold">Bootstrap</div> | |
| <small>11 mins ago</small> | |
| <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button> | |
| </div> | |
| <div class="toast-body"> | |
| Fruitcake chocolate bar tootsie roll gummies gummies jelly beans cake. | |
| </div> | |
| </div> | |
| <div class="bs-toast toast fade show bg-primary" role="alert" aria-live="assertive" aria-atomic="true"> | |
| <div class="toast-header"> | |
| <i class="bx bx-bell me-2"></i> | |
| <div class="me-auto fw-semibold">Bootstrap</div> | |
| <small>11 mins ago</small> | |
| <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button> | |
| </div> | |
| <div class="toast-body"> | |
| Fruitcake chocolate bar tootsie roll gummies gummies jelly beans cake. | |
| </div> | |
| </div> | |
| <div class="bs-toast toast fade show bg-secondary" role="alert" aria-live="assertive" aria-atomic="true"> | |
| <div class="toast-header"> | |
| <i class="bx bx-bell me-2"></i> | |
| <div class="me-auto fw-semibold">Bootstrap</div> | |
| <small>11 mins ago</small> | |
| <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button> | |
| </div> | |
| <div class="toast-body"> | |
| Fruitcake chocolate bar tootsie roll gummies gummies jelly beans cake. | |
| </div> | |
| </div> | |
| <div class="bs-toast toast fade show bg-success" role="alert" aria-live="assertive" aria-atomic="true"> | |
| <div class="toast-header"> | |
| <i class="bx bx-bell me-2"></i> | |
| <div class="me-auto fw-semibold">Bootstrap</div> | |
| <small>11 mins ago</small> | |
| <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button> | |
| </div> | |
| <div class="toast-body"> | |
| Fruitcake chocolate bar tootsie roll gummies gummies jelly beans cake. | |
| </div> | |
| </div> | |
| <div class="bs-toast toast fade show bg-danger" role="alert" aria-live="assertive" aria-atomic="true"> | |
| <div class="toast-header"> | |
| <i class="bx bx-bell me-2"></i> | |
| <div class="me-auto fw-semibold">Bootstrap</div> | |
| <small>11 mins ago</small> | |
| <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button> | |
| </div> | |
| <div class="toast-body"> | |
| Fruitcake chocolate bar tootsie roll gummies gummies jelly beans cake. | |
| </div> | |
| </div> | |
| <div class="bs-toast toast fade show bg-warning" role="alert" aria-live="assertive" aria-atomic="true"> | |
| <div class="toast-header"> | |
| <i class="bx bx-bell me-2"></i> | |
| <div class="me-auto fw-semibold">Bootstrap</div> | |
| <small>11 mins ago</small> | |
| <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button> | |
| </div> | |
| <div class="toast-body"> | |
| Fruitcake chocolate bar tootsie roll gummies gummies jelly beans cake. | |
| </div> | |
| </div> | |
| <div class="bs-toast toast fade show bg-info" role="alert" aria-live="assertive" aria-atomic="true"> | |
| <div class="toast-header"> | |
| <i class="bx bx-bell me-2"></i> | |
| <div class="me-auto fw-semibold">Bootstrap</div> | |
| <small>11 mins ago</small> | |
| <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button> | |
| </div> | |
| <div class="toast-body"> | |
| Fruitcake chocolate bar tootsie roll gummies gummies jelly beans cake. | |
| </div> | |
| </div> | |
| <div class="bs-toast toast fade show bg-dark" role="alert" aria-live="assertive" aria-atomic="true"> | |
| <div class="toast-header"> | |
| <i class="bx bx-bell me-2"></i> | |
| <div class="me-auto fw-semibold">Bootstrap</div> | |
| <small>11 mins ago</small> | |
| <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button> | |
| </div> | |
| <div class="toast-body"> | |
| Fruitcake chocolate bar tootsie roll gummies gummies jelly beans cake. | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!--/ Bootstrap Toasts Styles --> | |
| <!-- pricingModal --> | |
| <!--/ pricingModal --> | |
| </div> | |
| <!-- / Content --> | |
| <!-- Footer --> | |
| <!-- Footer--> | |
| <footer class="content-footer footer bg-footer-theme"> | |
| <div class="container-xxl d-flex flex-wrap justify-content-between py-2 flex-md-row flex-column"> | |
| <div class="mb-2 mb-md-0"> | |
| © <script> | |
| document.write(new Date().getFullYear()) | |
| </script>2022 | |
| , made with ❤️ by <a href="https://themeselection.com" target="_blank" class="footer-link fw-bolder">ThemeSelection</a> | |
| </div> | |
| <div> | |
| <a href="https://themeselection.com/license/" class="footer-link me-4" target="_blank">License</a> | |
| <a href="https://themeselection.com/" target="_blank" class="footer-link me-4">More Themes</a> | |
| <a href="https://themeselection.com/demo/sneat-bootstrap-html-admin-template/documentation/laravel-introduction.html" target="_blank" class="footer-link me-4">Documentation</a> | |
| <a href="https://github.com/themeselection/sneat-html-laravel-admin-template-free/issues" target="_blank" class="footer-link d-none d-sm-inline-block">Support</a> | |
| </div> | |
| </div> | |
| </footer> | |
| <!--/ Footer--> | |
| <!-- / Footer --> | |
| <div class="content-backdrop fade"></div> | |
| </div> | |
| <!--/ Content wrapper --> | |
| </div> | |
| <!-- / Layout page --> | |
| </div> | |
| <!-- Overlay --> | |
| <div class="layout-overlay layout-menu-toggle"></div> | |
| <!-- Drag Target Area To SlideIn Menu On Small Screens --> | |
| <div class="drag-target"></div> | |
| </div> | |
| <!-- / Layout wrapper --> | |
| <!--/ Layout Content --> | |
| <div class="buy-now"> | |
| <a href="https://themeselection.com/item/sneat-bootstrap-html-laravel-admin-template/" target="_blank" class="btn btn-danger btn-buy-now">Upgrade To Pro</a> | |
| </div> | |
| <!-- Include Scripts --> | |
| <!-- BEGIN: Vendor JS--> | |
| <script src="https://demos.themeselection.com/sneat-bootstrap-html-laravel-admin-template-free/demo/assets/vendor/libs/jquery/jquery.js?id=c9eab148c98f81221c99ba6da84fdbe2"></script> | |
| <script src="https://demos.themeselection.com/sneat-bootstrap-html-laravel-admin-template-free/demo/assets/vendor/libs/popper/popper.js?id=3b2f93fa0eb2f0ed310a789319de72fc"></script> | |
| <script src="https://demos.themeselection.com/sneat-bootstrap-html-laravel-admin-template-free/demo/assets/vendor/js/bootstrap.js?id=f4406bcd0acdeffbdcca24c2e1033ae6"></script> | |
| <script src="https://demos.themeselection.com/sneat-bootstrap-html-laravel-admin-template-free/demo/assets/vendor/libs/perfect-scrollbar/perfect-scrollbar.js?id=2f948c841c6aca9e3a18f6ef2c65b140"></script> | |
| <script src="https://demos.themeselection.com/sneat-bootstrap-html-laravel-admin-template-free/demo/assets/vendor/js/menu.js?id=3421096250c82e0d3760f641a4d2dba0"></script> | |
| <!-- END: Page Vendor JS--> | |
| <!-- BEGIN: Theme JS--> | |
| <script src="https://demos.themeselection.com/sneat-bootstrap-html-laravel-admin-template-free/demo/assets/js/main.js?id=0c91cceb5195b308a36d5ac021b16464"></script> | |
| <!-- END: Theme JS--> | |
| <!-- Pricing Modal JS--> | |
| <!-- END: Pricing Modal JS--> | |
| <!-- BEGIN: Page JS--> | |
| <script src="https://demos.themeselection.com/sneat-bootstrap-html-laravel-admin-template-free/demo/assets/js/ui-toasts.js"></script> | |
| <!-- END: Page JS--> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment