CINXE.COM

Build Laravel Admin Panels - Fast :: Backpack for Laravel

<!DOCTYPE html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="csrf-token" content="jOor6zipD7nIcPFHdrkRCklxiaXXc2GFgrrlDdmq" /> <meta name="google-site-verification" content="NfSJhLH4VVEn1n1Db6oV10MIF-9wCSny4LSvkD5CrB8" /> <link rel="canonical" href="https://backpackforlaravel.com"> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> <link rel="manifest" href="/site.webmanifest"> <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#7451c3"> <meta name="msapplication-TileColor" content="#7451c3"> <meta name="theme-color" content="#161c2d"> <title> Build Laravel Admin Panels - Fast :: Backpack for Laravel </title> <meta name="description" content="Administration panels on Laravel have never been so easy to build. And maintain. Developers have used Backpack to power everything from presentation websites to complex ERPs."> <meta property="og:title" content="Build Laravel Admin Panels - Fast"/> <meta property="og:type" content="website"/> <meta property="og:url" content="https://backpackforlaravel.com"/> <meta property="og:image" content="https://backpackforlaravel.com/presentation/img/backpack/socials/backpack_og_image_general.jpg"/> <meta property="og:description" content="Administration panels on Laravel have never been so easy to build. And maintain. Developers have used Backpack to power everything from presentation websites to complex ERPs."/> <meta name="twitter:card" content="Administration panels on Laravel have never been so easy to build. And maintain. Developers have used Backpack to power everything from presentation websites to complex ERPs."/> <meta name="twitter:creator" content="@laravelbackpack"/> <meta name="twitter:site" content="@laravelbackpack"/> <meta name="twitter:image" content="https://backpackforlaravel.com/presentation/img/backpack/socials/backpack_og_image_general.jpg"/> <!-- CSS for libraries needed on all static pages --> <link rel="stylesheet" href="https://backpackforlaravel.com/presentation/css/theme.css"> <link rel="stylesheet" href="https://backpackforlaravel.com/presentation/css/theme-overwrites.css?v=2"> <link rel="stylesheet" href="https://backpackforlaravel.com/presentation/css/noty.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jarallax/1.12.0/jarallax.css"> <!-- Non-critical CSS - their loading is deferred --> <link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'"> <link rel="preload" href="https://backpackforlaravel.com/presentation/fonts/Feather/feather.css" as="style" onload="this.onload=null;this.rel='stylesheet'"> <!-- But fall back to standard CSS loading if JavaScript is not enabled --> <noscript><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css"></noscript> <noscript><link rel="stylesheet" href="https://backpackforlaravel.com/presentation/fonts/Feather/feather.css"></noscript> <style >[wire\:loading], [wire\:loading\.delay], [wire\:loading\.inline-block], [wire\:loading\.inline], [wire\:loading\.block], [wire\:loading\.flex], [wire\:loading\.table], [wire\:loading\.grid], [wire\:loading\.inline-flex] {display: none;}[wire\:loading\.delay\.shortest], [wire\:loading\.delay\.shorter], [wire\:loading\.delay\.short], [wire\:loading\.delay\.long], [wire\:loading\.delay\.longer], [wire\:loading\.delay\.longest] {display:none;}[wire\:offline] {display: none;}[wire\:dirty]:not(textarea):not(input):not(select) {display: none;}input:-webkit-autofill, select:-webkit-autofill, textarea:-webkit-autofill {animation-duration: 50000s;animation-name: livewireautofill;}@keyframes livewireautofill { from {} }</style> <script defer data-domain="backpackforlaravel.com" src="https://sweet-surf-fd04.dhcfw.workers.dev/js/script.pageview-props.js"></script> <script> window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) } // mark this pageview as logged in or not plausible('pageview', {props: {logged_in: 'false'}}); </script> </head> <body class=""> <nav id="secondaryNavbar" class="bg-light d-print-none" aria-label="breadcrumb"> <div class="container"> <div class="row"> <div class="col-12"> <!-- WHEN NOT LOGGEN IN --> <div class="text-muted font-size-sm pt-3 float-left d-none d-sm-block">Create custom Laravel admin panels. Fast!</div> <ul class="nav font-size-sm float-right mt-1 mb-0"> <li class="nav-item"> <a class="nav-link text-muted" href="https://backpackforlaravel.com/login">Sign In</a> </li> <li class="nav-item"> <a class="nav-link text-muted" href="https://backpackforlaravel.com/register">Sign Up</a> </li> </ul> </div> </div> </div> </nav> <nav id="primaryNavbar" class="navbar navbar-expand-lg border-top navbar-light bg-white"> <div class="container"> <!-- Brand --> <a class="navbar-brand" href="https://backpackforlaravel.com"> <img src="https://backpackforlaravel.com/presentation/img/backpack/logos/backpack_logo.svg" class="navbar-brand-img" alt="..." style="min-width: 200px; max-height: 2.8rem; height: 80px;"> </a> <!-- Toggler --> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <!-- Collapse --> <div class="collapse navbar-collapse" id="navbarCollapse"> <!-- Toggler --> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> <i class="fe fe-x"></i> </button> <!-- Navigation --> <ul class="navbar-nav ml-auto "> <li class="nav-item"> <a class="nav-link" href="https://backpackforlaravel.com/docs/6.x"> Documentation </a> </li> <li class="nav-item"> <a class="nav-link" href="https://backpackforlaravel.com/pricing"> Pricing </a> </li> <li class="nav-item"> <a class="nav-link" href="https://backpackforlaravel.com/addons"> Add-Ons </a> </li> <li class="nav-item"> <a class="nav-link" href="https://backpackforlaravel.com/need-freelancer-or-development-team"> Services </a> </li> <li class="nav-item"> <a class="nav-link" style="padding-right: 0" href="https://backpackforlaravel.com/articles"> Blog <span class="badge text-danger" style="position: relative; left: -10px; top: -10px; padding: 0">New!</span> </a> </li> <li class="nav-item"> <a class="nav-link" href="https://backpackforlaravel.com/contact"> Contact </a> </li> <li class="nav-item"> <a href="https://github.com/laravel-backpack/crud" title="See on Github" class="d-block pt-1 ml-1 mr-1" style="padding-top: 0.28rem!important;" target="_blank"> <svg width="23" height="21" viewBox="0 0 45 43" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M22.4781 0.254117C10.4847 0.254117 0.760742 9.97812 0.760742 21.9741C0.760742 31.5701 6.98341 39.7101 15.6141 42.5834C16.7007 42.7821 17.0967 42.1114 17.0967 41.5354C17.0967 41.0208 17.0781 39.6541 17.0674 37.8421C11.0261 39.1541 9.75141 34.9301 9.75141 34.9301C8.76341 32.4221 7.33941 31.7541 7.33941 31.7541C5.36741 30.4061 7.48874 30.4328 7.48874 30.4328C9.66874 30.5874 10.8154 32.6714 10.8154 32.6714C12.7527 35.9901 15.8994 35.0314 17.1367 34.4768C17.3341 33.0728 17.8941 32.1154 18.5154 31.5728C13.6927 31.0248 8.62207 29.1608 8.62207 20.8381C8.62207 18.4674 9.46874 16.5288 10.8581 15.0101C10.6341 14.4608 9.88874 12.2528 11.0701 9.26212C11.0701 9.26212 12.8941 8.67812 17.0434 11.4888C18.7754 11.0075 20.6341 10.7661 22.4807 10.7581C24.3247 10.7661 26.1834 11.0075 27.9181 11.4888C32.0647 8.67812 33.8847 9.26212 33.8847 9.26212C35.0701 12.2528 34.3247 14.4608 34.1007 15.0101C35.4927 16.5288 36.3341 18.4674 36.3341 20.8381C36.3341 29.1821 31.2554 31.0181 26.4167 31.5554C27.1967 32.2261 27.8914 33.5514 27.8914 35.5781C27.8914 38.4808 27.8647 40.8234 27.8647 41.5354C27.8647 42.1168 28.2554 42.7928 29.3581 42.5808C37.9821 39.7021 44.1994 31.5675 44.1994 21.9741C44.1994 9.97812 34.4741 0.254117 22.4781 0.254117Z" fill="#525252"></path> </svg> </a> </li> </ul> <!-- Button --> <!-- <a class="navbar-btn btn btn-sm btn-info shadow ml-auto lift" href="docs/index.html" target="_blank"> Hire Us </a> --> </div> </div> </nav> <!-- HERO UNIT ================================================== --> <section class="pt-4 pt-md-8"> <div class="container"> <div class="row align-items-center"> <div class="col-12 col-md-7 col-lg-6 order-md-1" data-aos="fade-up"> <!-- Heading --> <h1 class="display-3 text-center text-md-left font-weight-bold" style="max-width: 480px!important;"> The most <span class="text-info">flexible admin panel</span> for Laravel. Since 2016. </h1> <!-- Text --> <p class="lead text-center text-md-left text-muted mb-6 mb-lg-8"> The admin panel widely regarded as both <span class="text-info">easy to learn</span> and <span class="text-info">easy to customize</span>. Because it keeps things simple. </p> <!-- Buttons --> <div class="text-center text-md-left"> <a href="https://demo.backpackforlaravel.com/admin" target='_blank' class="btn btn-info shadow mr-1 lift"> Live demo </a> <a href="https://backpackforlaravel.com/docs" class="btn btn-info-soft shadow lift"> Get started </a> </div> </div> <div class="col-12 col-md-5 col-lg-6 order-md-2"> <div class="w-md-150 w-lg-130 position-relative ml-n11" data-aos="fade-left"> <!-- Image --> <div class="img-skewed img-skewed-left ml-10 mt-4 ml-lg-0 mt-lg-0 pl-7 pr-7"> <!-- Image --> <!-- Video --> <a href="#" data-toggle="modal" data-target="#videoHeroModal"> <img src="https://backpackforlaravel.com/presentation/img/backpack/2021/hero-video.png" class="img-fluid" alt="..."> </a> </div> </div> </div> </div> <!-- / .row --> </div> <!-- / .container --> </section> <!-- STATS ================================================== --> <section class="py-6 py-md-4 pt-8 pt-md-10"> <div class="container"> <div class="row"> <div class="col-12 col-md-4 text-center"> <!-- Heading --> <div class="display-2 font-weight-bold text-info"> <span data-toggle="countup" data-from="0" data-to="2400000" data-aos data-aos-id="countup:in">0</span>+ </div> <!-- Text --> <p class="text-muted mb-6 mb-md-0"> Unique Downloads </p> </div> <div class="col-12 col-md-4 text-center"> <!-- Heading --> <div class="display-2 font-weight-bold text-info"> <span data-toggle="countup" data-from="00.0" data-to="30000" data-aos data-aos-id="countup:in">0</span>+ </div> <!-- Text --> <p class="text-muted mb-6 mb-md-0"> Active Users </p> </div> <div class="col-12 col-md-4 text-center"> <!-- Heading --> <div class="display-2 font-weight-bold text-info"> <span data-toggle="countup" data-from="0" data-to="300" data-aos data-aos-id="countup:in">0</span>+ </div> <!-- Text --> <p class="text-muted mb-0"> Code Contributors </p> </div> </div> <!-- / .row --> </div> <!-- / .container --> </section> <!-- MAIN BENEFITS OVER COMPETITORS ================================================== --> <section class="py-8 py-md-9 border-bottom"> <div class="container"> <div class="row"> <div class="col-12 col-lg-4 mb-md-4 mb-lg-0"> <div class="card bg-light rounded-lg p-5"> <!-- Icon --> <div class="icon text-info mb-3 text-center"> <?xml version="1.0" encoding="UTF-8"?> <svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- Generator: Sketch 52.2 (67145) - http://www.bohemiancoding.com/sketch --> <title>Stockholm-icons / Code / Git#4</title> <desc>Created with Sketch.</desc> <g id="Stockholm-icons-/-Code-/-Git#4" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <rect id="Rectangle-5" x="0" y="0" width="24" height="24"></rect> <path d="M6,7 C7.1045695,7 8,6.1045695 8,5 C8,3.8954305 7.1045695,3 6,3 C4.8954305,3 4,3.8954305 4,5 C4,6.1045695 4.8954305,7 6,7 Z M6,9 C3.790861,9 2,7.209139 2,5 C2,2.790861 3.790861,1 6,1 C8.209139,1 10,2.790861 10,5 C10,7.209139 8.209139,9 6,9 Z" id="Oval-7" fill="#335EEA"></path> <path d="M7,11.4648712 L7,17 C7,18.1045695 7.8954305,19 9,19 L15,19 L15,21 L9,21 C6.790861,21 5,19.209139 5,17 L5,8 L5,7 L7,7 L7,8 C7,9.1045695 7.8954305,10 9,10 L15,10 L15,12 L9,12 C8.27142571,12 7.58834673,11.8052114 7,11.4648712 Z" id="Combined-Shape" fill="#335EEA" opacity="0.3"></path> <path d="M18,22 C19.1045695,22 20,21.1045695 20,20 C20,18.8954305 19.1045695,18 18,18 C16.8954305,18 16,18.8954305 16,20 C16,21.1045695 16.8954305,22 18,22 Z M18,24 C15.790861,24 14,22.209139 14,20 C14,17.790861 15.790861,16 18,16 C20.209139,16 22,17.790861 22,20 C22,22.209139 20.209139,24 18,24 Z" id="Oval-7-Copy" fill="#335EEA"></path> <path d="M18,13 C19.1045695,13 20,12.1045695 20,11 C20,9.8954305 19.1045695,9 18,9 C16.8954305,9 16,9.8954305 16,11 C16,12.1045695 16.8954305,13 18,13 Z M18,15 C15.790861,15 14,13.209139 14,11 C14,8.790861 15.790861,7 18,7 C20.209139,7 22,8.790861 22,11 C22,13.209139 20.209139,15 18,15 Z" id="Oval-7-Copy-3" fill="#335EEA"></path> </g> </svg> </div> <!-- Heading --> <h3 class="text-center mb-4"> Simple MVC Architecture </h3> <!-- Text --> <p class="text-muted mb-6 mb-md-0"> Similar to how you'd build it <i>without</i> Backpack. To create a management page (aka CRUD), you create a CrudController. In there, configure or overwrite whatever you want. Load our views, or create your own. </p> </div> </div> <div class="col-12 col-lg-4 mb-md-4 mb-lg-0"> <div class="card bg-light rounded-lg p-5"> <!-- Icon --> <div class="icon text-info mb-3 text-center"> <?xml version="1.0" encoding="UTF-8"?> <svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- Generator: Sketch 52.2 (67145) - http://www.bohemiancoding.com/sketch --> <title>Stockholm-icons / Design / Layers</title> <desc>Created with Sketch.</desc> <g id="Stockholm-icons-/-Design-/-Layers" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <polygon id="Bound" points="0 0 24 0 24 24 0 24"></polygon> <path d="M12.9336061,16.072447 L19.36,10.9564761 L19.5181585,10.8312381 C20.1676248,10.3169571 20.2772143,9.3735535 19.7629333,8.72408713 C19.6917232,8.63415859 19.6104327,8.55269514 19.5206557,8.48129411 L12.9336854,3.24257445 C12.3871201,2.80788259 11.6128799,2.80788259 11.0663146,3.24257445 L4.47482784,8.48488609 C3.82645598,9.00054628 3.71887192,9.94418071 4.23453211,10.5925526 C4.30500305,10.6811601 4.38527899,10.7615046 4.47382636,10.8320511 L4.63,10.9564761 L11.0659024,16.0730648 C11.6126744,16.5077525 12.3871218,16.5074963 12.9336061,16.072447 Z" id="Shape" fill="#335EEA"></path> <path d="M11.0563554,18.6706981 L5.33593024,14.122919 C4.94553994,13.8125559 4.37746707,13.8774308 4.06710397,14.2678211 C4.06471678,14.2708238 4.06234874,14.2738418 4.06,14.2768747 L4.06,14.2768747 C3.75257288,14.6738539 3.82516916,15.244888 4.22214834,15.5523151 C4.22358765,15.5534297 4.2250303,15.55454 4.22647627,15.555646 L11.0872776,20.8031356 C11.6250734,21.2144692 12.371757,21.2145375 12.909628,20.8033023 L19.7677785,15.559828 C20.1693192,15.2528257 20.2459576,14.6784381 19.9389553,14.2768974 C19.9376429,14.2751809 19.9363245,14.2734691 19.935,14.2717619 L19.935,14.2717619 C19.6266937,13.8743807 19.0546209,13.8021712 18.6572397,14.1104775 C18.654352,14.112718 18.6514778,14.1149757 18.6486172,14.1172508 L12.9235044,18.6705218 C12.377022,19.1051477 11.6029199,19.1052208 11.0563554,18.6706981 Z" id="Path" fill="#335EEA" opacity="0.3"></path> </g> </svg> </div> <!-- Heading --> <h3 class="text-center mb-4"> Minimal Technology Stack </h3> <!-- Text --> <p class="text-muted mb-6 mb-md-0"> <strong>Laravel, Bootstrap & jQuery.</strong> Those are all the technologies you need to know, to customize <i>anything</i> in Backpack. You <i>can totally</i> use Vue, React, WebPack, Mix, Less, Sass, NPM etc. If you <i>want to</i>. But you don't <i>have to</i>. </p> </div> </div> <div class="col-12 col-lg-4"> <div class="card bg-light rounded-lg p-5"> <!-- Icon --> <div class="icon text-info mb-3 text-center"> <?xml version="1.0" encoding="UTF-8"?> <svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- Generator: Sketch 52.2 (67145) - http://www.bohemiancoding.com/sketch --> <title>Stockholm-icons / Code / Code</title> <desc>Created with Sketch.</desc> <g id="Stockholm-icons-/-Code-/-Code" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <rect id="bound" x="0" y="0" width="24" height="24"></rect> <path d="M17.2718029,8.68536757 C16.8932864,8.28319382 16.9124644,7.65031935 17.3146382,7.27180288 C17.7168119,6.89328641 18.3496864,6.91246442 18.7282029,7.31463817 L22.7282029,11.5646382 C23.0906029,11.9496882 23.0906029,12.5503176 22.7282029,12.9353676 L18.7282029,17.1853676 C18.3496864,17.5875413 17.7168119,17.6067193 17.3146382,17.2282029 C16.9124644,16.8496864 16.8932864,16.2168119 17.2718029,15.8146382 L20.6267538,12.2500029 L17.2718029,8.68536757 Z M6.72819712,8.6853647 L3.37324625,12.25 L6.72819712,15.8146353 C7.10671359,16.2168091 7.08753558,16.8496835 6.68536183,17.2282 C6.28318808,17.6067165 5.65031361,17.5875384 5.27179713,17.1853647 L1.27179713,12.9353647 C0.909397125,12.5503147 0.909397125,11.9496853 1.27179713,11.5646353 L5.27179713,7.3146353 C5.65031361,6.91246155 6.28318808,6.89328354 6.68536183,7.27180001 C7.08753558,7.65031648 7.10671359,8.28319095 6.72819712,8.6853647 Z" id="Combined-Shape" fill="#335EEA"></path> <rect id="Rectangle-28" fill="#335EEA" opacity="0.3" transform="translate(12.000000, 12.000000) rotate(-345.000000) translate(-12.000000, -12.000000) " x="11" y="4" width="2" height="16" rx="1"></rect> </g> </svg> </div> <!-- Heading --> <h3 class="text-center mb-4"> HTML Building Blocks </h3> <!-- Text --> <p class="text-muted mb-0"> Backpack comes with support for multiple Bootstrap themes. If you need to build a custom page, dashboard, component, you just copy-paste HTML blocks from its website. No designer required. No pixel pushing. </p> </div> </div> </div> <!-- / .row --> </div> <!-- / .container --> </section> <!-- BRANDS / LOGO REEL ================================================== --> <section class="py-11 border-bottom bg-black"> <div class="container"> <div class="row lign-items-center justify-content-center"> <span class="badge mb-6 mt-n8"> <span class="h6 text-uppercase text-muted" style="color: #aec5e8!important">Trusted by</span> </span> </div> <div class="row align-items-center justify-content-center"> <div class="col-6 col-sm-4 col-md-2 mb-4 mb-md-0"> <!-- Brand --> <div class="img-fluid text-gray-600 mb-2 mb-md-0 text-center"> <img loading="lazy" src="https://backpackforlaravel.com/presentation/img/backpack/brands/volkswagen_white.png" alt=""> </div> </div> <div class="col-6 col-sm-4 col-md-2 mb-4 mb-md-0"> <!-- Brand --> <div class="img-fluid text-gray-600 mb-2 mb-md-0 text-center"> <img loading="lazy" src="https://backpackforlaravel.com/presentation/img/backpack/brands/pwc_white.png" alt=""> </div> </div> <div class="col-6 col-sm-4 col-md-2 mb-4 mb-md-0"> <!-- Brand --> <div class="img-fluid text-gray-600 mb-2 mb-md-0 text-center"> <img loading="lazy" src="https://backpackforlaravel.com/presentation/img/backpack/brands/mcdonalds_white.png" alt=""> </div> </div> <div class="col-6 col-sm-4 col-md-2 mb-4 mb-md-0"> <!-- Brand --> <div class="img-fluid text-gray-600 mb-2 mb-md-0 text-center"> <img loading="lazy" src="https://backpackforlaravel.com/presentation/img/backpack/brands/greenpeace_white.png" alt=""> </div> </div> <div class="col-6 col-sm-4 col-md-2 mb-4 mb-md-0"> <!-- Brand --> <div class="img-fluid text-gray-600 mb-2 mb-md-0 text-center"> <img loading="lazy" src="https://backpackforlaravel.com/presentation/img/backpack/brands/honda_white.png" alt=""> </div> </div> <div class="col-6 col-sm-4 col-md-2 mb-4 mb-md-0"> <!-- Brand --> <div class="img-fluid text-gray-600 mb-2 mb-md-0 text-center"> <img loading="lazy" src="https://backpackforlaravel.com/presentation/img/backpack/brands/mailru_white.png" alt=""> </div> </div> </div> <!-- / .row --> </div> <!-- / .container --> </section> <!-- OPERATIONS ================================================== --> <section class="pt-8 pt-md-10 pb-10" id="about"> <div class="container"> <div class="row justify-content-center"> <div class="col-12 col-md-10 col-lg-8 text-center"> <!-- Heading --> <h2 class="font-weight-bold"> The <span class="text-info">Operations</span> most Eloquent models need, right out of the box. </h2> <!-- Text --> <p class="font-size-lg text-muted mb-9"> They're available as traits, to use on your Controller. That way, they're <span class="badge badge-info-soft">easy-to-use</span>, <span class="badge badge-info-soft">easy-to-understand</span>, <span class="badge badge-info-soft">easy-to-overwrite</span> and <span class="badge badge-info-soft">easy-to-create</span>. </p> </div> </div> <!-- / .row --> <div class="row"> <div class="col-12"> <!-- Card --> <div class="card card-row b-none mb-6"> <div class="row gx-0"> <div class="col-12 col-md-7 order-md-2 d-flex"> <a class="card-img-end"> <img loading="lazy" src="https://backpackforlaravel.com/presentation/img/backpack/2021/operations-list.png" alt="..." class="img-fluid"> </a> </div> <div class="col-12 col-md-5 order-md-1 d-flex"> <!-- Body --> <div class="pl-3 align-self-center"> <!-- Heading --> <h3 class='h2 text-info mt-3 mt-md-0'>List</h3> <!-- Text --> <p class="mb-0"> - 25+ column types<br> - search<br> - pagination<br> - bulk actions<br> - export to XLS, CSV, PDF<br> - filter entries using 12+ filter types </p> <!-- Meta --> <div class="mt-5"> <!-- Divider --> <a class="btn btn-info-soft btn-sm mb-1" href="https://backpackforlaravel.com/presentation/img/backpack/setupListOperation.png" data-fancybox>Code Example</a> <a class="btn btn-info-soft btn-sm mb-1" href="https://demo.backpackforlaravel.com/admin/monster" target="_blank">Demo</a> <a class="btn btn-info-soft btn-sm mb-1" href="https://backpackforlaravel.com/docs/crud-operation-list-entries">Docs</a> </div> </div> </div> </div> <!-- / .row --> </div> <!-- Card --> <div class="card card-row bg-black shadow mt-9 mb-9 pb-3"> <div class="row gx-0"> <div class="col-12 col-md-7 d-flex p-4 pl-6"> <a class="card-img-start mr-3"> <img loading="lazy" src="https://backpackforlaravel.com/presentation/img/backpack/2021/operations-create-update.png" alt="..." class="img-fluid"> </a> </div> <div class="col-12 col-md-5 d-flex"> <!-- Body --> <div class="pl-7 pl-md-0 pl-lg-7 align-self-center"> <!-- Heading --> <h3 class='h2 text-info mt-3 mt-lg-0'>Create & Update</h3> <!-- Text --> <p class="mb-0 text-white"> - 50+ field types<br> - split large forms using tabs<br> - multiple inputs per line<br> - validation using FormRequests<br> - multi-language entries </p> <!-- Meta --> <div class="mt-5"> <!-- Divider --> <a class="btn btn-info-soft btn-sm mb-1" href="https://backpackforlaravel.com/presentation/img/backpack/setupCreateOperation.png" data-fancybox>Code Example</a> <a class="btn btn-info-soft btn-sm mb-1" href="https://demo.backpackforlaravel.com/admin/monster/create" target="_blank">Demo</a> <a class="btn btn-info-soft btn-sm mb-1" href="https://backpackforlaravel.com/docs/crud-operation-create">Docs</a> </div> </div> </div> </div> </div> <!-- Card --> <div class="card card-row mb-6"> <div class="row gx-0"> <div class="col-12 col-md-6 order-md-2 d-flex p-4 pr-6"> <a class="card-img-end"> <img loading="lazy" src="https://backpackforlaravel.com/presentation/img/backpack/2021/operations-delete.png" alt="..." class="img-fluid"> </a> </div> <div class="col-12 col-md-6 order-md-1 d-flex"> <!-- Body --> <div class="pl-0 pl-lg-7 align-self-center"> <!-- Heading --> <h3 class='h2 text-info mt-3 mt-md-0'>Delete & BulkDelete</h3> <!-- Text --> <p class="mb-0"> Delete an entry. Or multiple entries, across multiple pagination pages. Want to soft delete them? No problem, just have that trait on your Eloquent model. </p> <!-- Meta --> <div class="mt-5"> <!-- Divider --> <a class="btn btn-info-soft btn-sm mb-1" href="https://backpackforlaravel.com/presentation/img/backpack/setupDeleteOperation.png" data-fancybox>Code Example</a> <a class="btn btn-info-soft btn-sm mb-1" href="https://demo.backpackforlaravel.com/admin/monster" target="_blank">Demo</a> <a class="btn btn-info-soft btn-sm mb-1" href="https://backpackforlaravel.com/docs/crud-operation-delete">Docs</a> </div> </div> </div> </div> <!-- / .row --> </div> <!-- Card --> <div class="card card-row mb-6"> <div class="row gx-0 justify-content-end"> <div class="col-12 col-md-6 order-md-1 d-flex p-4 pr-6"> <a class="card-img-end"> <img loading="lazy" src="https://backpackforlaravel.com/presentation/img/backpack/2021/operations-clone.png" alt="..." class="img-fluid"> </a> </div> <div class="col-12 col-md-6 order-md-2 d-flex"> <!-- Body --> <div class="pl-0 pl-lg-7 align-self-center"> <!-- Heading --> <h3 class='h2 text-info mt-3 mt-md-0'>Clone & BulkClone</h3> <!-- Text --> <p class="mb-0"> Duplicate an existing entry, instead of creating a similar one from scratch. No more copy-paste between windows. </p> <!-- Meta --> <div class="mt-5"> <!-- Divider --> <a class="btn btn-info-soft btn-sm mb-1" href="https://backpackforlaravel.com/presentation/img/backpack/setupCloneOperation.png" data-fancybox>Code Example</a> <a class="btn btn-info-soft btn-sm mb-1" href="https://demo.backpackforlaravel.com/admin/product" target="_blank">Demo</a> <a class="btn btn-info-soft btn-sm mb-1" href="https://backpackforlaravel.com/docs/crud-operation-clone">Docs</a> </div> </div> </div> </div> <!-- / .row --> </div> <!-- Card --> <div class="card card-row bg-light shadow mb-9 mt-9"> <div class="row gx-0"> <div class="col-12 col-md-6 order-md-2 d-flex p-4 pr-6"> <a class="card-img-end ml-4 ml-md-0"> <!-- Image (placeholder) --> <img loading="lazy" src="https://backpackforlaravel.com/presentation/img/backpack/2021/operations-reorder.png" alt="..." class="img-fluid"> </a> </div> <div class="col-12 col-md-6 order-md-1 d-flex"> <!-- Body --> <div class="pl-5 pr-5 mb-5 mt-5 align-self-center"> <!-- Heading --> <h3 class='h2 text-info mt-3 mt-md-0'>Reorder</h3> <!-- Text --> <p class="mb-0"> Allow your admins to drag&drop entries to reorder and nest them. One level deep, two levels deep... or in an infinite nested hierarchy. </p> <!-- Meta --> <div class="mt-5"> <!-- Divider --> <a class="btn btn-info-soft btn-sm mb-1" href="https://backpackforlaravel.com/presentation/img/backpack/setupReorderOperation.png" data-fancybox>Code Example</a> <a class="btn btn-info-soft btn-sm mb-1" href="https://demo.backpackforlaravel.com/admin/category/reorder" target="_blank">Demo</a> <a class="btn btn-info-soft btn-sm mb-1" href="https://backpackforlaravel.com/docs/crud-operation-reorder">Docs</a> </div> </div> </div> </div> <!-- / .row --> </div> <!-- Card --> <div class="card card-row mb-6"> <div class="row gx-0"> <div class="col-12 col-md-6 d-flex"> <a class="card-img-start"> <!-- Image (placeholder) --> <img loading="lazy" src="https://backpackforlaravel.com/presentation/img/backpack/2021/operations-revise.png" alt="..." class="img-fluid"> </a> </div> <div class="col-12 col-md-6 d-flex"> <!-- Body --> <div class="pl-2 pl-md-0 pl-lg-7 align-self-center"> <!-- Heading --> <h3 class='h2 text-info mt-3 mt-md-0'>Revise</h3> <!-- Text --> <p class="mb-0"> Always know who modified what. Then allow your admins to Undo and Redo changes. A.k.a. audit trait or audit log. </p> <!-- Meta --> <div class="mt-5"> <!-- Divider --> <a class="btn btn-info-soft btn-sm mb-1" href="https://backpackforlaravel.com/presentation/img/backpack/setupRevisionsOperation.png" data-fancybox>Code Example</a> <a class="btn btn-info-soft btn-sm mb-1" href="https://demo.backpackforlaravel.com/admin/icon" target="_blank">Demo</a> <a class="btn btn-info-soft btn-sm mb-1" href="https://backpackforlaravel.com/docs/crud-operation-revisions">Docs</a> </div> </div> </div> </div> </div> </div> </div> </div> <!-- / .container --> </section> <!-- COMPOSER INSTALL ================================================== --> <section class="py-10 border-bottom bg-black"> <div class="container"> <div class="row justify-content-center"> <div class="col-12 text-center"> <h2 class="display-4 text-white"> Get started in minutes! </h2> <p class="font-size-lg text-muted mb-3"> To install our free & open-source core in your project, just run these two commands: </p> </div> <div class="card rounded-lg mt-4 mb-6 mb-md-0 img-skewed-item screenshot w-100 w-lg-75"> <div class="card-header" style="border-bottom: 1px solid #f1f4f81f;"> <!-- Controls --> <div class="d-flex"> <span class="bg-danger rounded-circle" style="width: 10px; height: 10px;"></span> <span class="bg-warning rounded-circle ml-2" style="width: 10px; height: 10px;"></span> <span class="bg-success rounded-circle ml-2" style="width: 10px; height: 10px;"></span> </div> </div> <div class="card-body"> <!-- Code --> <code class="highlight" data-toggle="typed" data-options='{"backSpeed":1, "typeSpeed":4, "backDelay":25000, "strings": ["&gt;&nbsp;<span class=\"text-info\">composer&nbsp;require&nbsp;backpack/crud&nbsp;</span><br><span class=\"text-success\">./composer.json has been updated</span><br/><span class=\"text-success\">Running composer update backpack/crud</span><br><br/>&gt;&nbsp;<span class=\"text-info\">php artisan backpack:install</span><br/><span class=\"text-dark\">Installing Backpack CRUD:<br>Publishing configs, views, js and css files <span class=\"d-none d-md-inline\">...................</span><span class=\"text-success\">DONE</span><br/>Creating users table <span class=\"d-none d-md-inline\">..........................................</span><span class=\"text-success\">DONE</span><br>Creating CheckIfAdmin middleware <span class=\"d-none d-md-inline\">..............................</span><span class=\"text-success\">DONE</span><br>Installing Backpack Generators <span class=\"d-none d-md-inline\">................................</span><span class=\"text-success\">DONE</span><br><br><span class=\"bg-info text-white p-1\">DONE</span> Backpack installation complete.</span><br><br><span class=\"text-dark\">Go to <a href=\"https://backpackforlaravel.com/docs\">https://backpackforlaravel.com/docs</a> to learn more about your new admin panel.</span>"]}' style="min-height: 183px; display:block;"></code> </div> </div> </div> </div> <!-- / .container --> </section> <!-- SHAPE ================================================== --> <div class="position-relative"> <div class="shape shape-bottom shape-fluid-x svg-shim text-light"> <svg viewBox="0 0 2880 48" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M0 48H1437.5H2880V0H2160C1442.5 52 720 0 720 0H0V48Z" fill="currentColor"/> </svg> </div> </div> <!-- CUSTOMIZABLE AS FUCK ================================================== --> <section class="pt-8 pt-md-11 bg-gradient-light"> <div class="container"> <div class="row align-items-center justify-content-between mb-8 mb-md-11"> <div class="col-12 col-lg-6 order-sm-1 mb-4" data-aos="fade-right"> <!-- Code --> <div class="card rounded-lg bg-black mb-6 mb-md-0 img-skewed-item screenshot"> <div class="card-header bg-black" style="border-bottom: 1px solid #f1f4f81f;"> <!-- Controls --> <div class="d-flex"> <span class="bg-danger rounded-circle" style="width: 10px; height: 10px;"></span> <span class="bg-warning rounded-circle ml-2" style="width: 10px; height: 10px;"></span> <span class="bg-success rounded-circle ml-2" style="width: 10px; height: 10px;"></span> </div> </div> <div class="card-body"> <!-- Code --> <code class="highlight" data-toggle="typed" data-options='{"backSpeed":2, "strings": ["&gt;&nbsp;php&nbsp;artisan&nbsp;backpack:publish&nbsp;crud/fields/select<br/><span class=\"text-success\">Published to resources/views/vendor/backpack/..&nbsp;Go&nbsp;edit&nbsp;it.</span><br/><br/>&gt;&nbsp;php artisan backpack:publish crud/columns/text<br/><span class=\"text-success\">Published to resources/views/vendor/backpack/..&nbsp;Go&nbsp;edit&nbsp;it.</span><br/><br/>&gt;&nbsp;php artisan backpack:publish base/widgets/chart<br/><span class=\"text-success\">Published to resources/views/vendor/backpack/..&nbsp;Go&nbsp;edit&nbsp;it.</span>"]}' style="min-height: 183px; display:block; color: white;"></code> </div> </div> </div> <div class="col-12 col-lg-6 order-md-2" data-aos="fade-left"> <!-- Heading --> <h2> Impossible? No such thing.<br> <span class="text-info">Easily create custom components.</span> </h2> <!-- Text --> <p class="font-size-lg text-muted mb-6"> Real projects come with <i>really specific</i> needs. That's why companies, agencies & freelancers use Backpack - because it's <i>ridiculously</i> simple to overwrite the default behaviour. In addition, most particularities can be done in custom files, <i>without</i> overwriting anything: </p> <!-- List --> <div class="row"> <div class="col-12 col-sm-6"> <!-- Item --> <div class="d-flex"> <!-- Check --> <div class="badge badge-rounded-circle badge-info-soft mt-1 mr-4"> <i class="fe fe-check"></i> </div> <!-- Text --> <p class="text-info"> Custom fields </p> </div> <!-- Item --> <div class="d-flex"> <!-- Check --> <div class="badge badge-rounded-circle badge-info-soft mt-1 mr-4"> <i class="fe fe-check"></i> </div> <p class="text-info"> Custom columns </p> </div> <!-- Item --> <div class="d-flex"> <!-- Check --> <span class="badge badge-rounded-circle badge-info-soft mt-1 mr-4"> <i class="fe fe-check"></i> </span> <!-- Text --> <p class="text-info"> Custom filters </p> </div> <!-- Item --> <div class="d-flex"> <!-- Check --> <div class="badge badge-rounded-circle badge-info-soft mr-1 mr-4"> <i class="fe fe-check"></i> </div> <!-- Text --> <p class="text-info"> Custom buttons </p> </div> <!-- Item --> <div class="d-flex"> <!-- Check --> <div class="badge badge-rounded-circle badge-info-soft mr-1 mr-4"> <i class="fe fe-check"></i> </div> <!-- Text --> <p class="text-info"> Custom widgets </p> </div> </div> <div class="col-12 col-sm-6 mb-6 mb-md-0"> <!-- Item --> <div class="d-flex"> <!-- Check --> <div class="badge badge-rounded-circle badge-info-soft mr-1 mr-4"> <i class="fe fe-check"></i> </div> <!-- Text --> <p class="text-info"> Custom operations </p> </div> <!-- Item --> <div class="d-flex"> <!-- Check --> <div class="badge badge-rounded-circle badge-info-soft mr-1 mr-4"> <i class="fe fe-check"></i> </div> <!-- Text --> <p class="text-info"> Custom pages </p> </div> <!-- Item --> <div class="d-flex"> <!-- Check --> <div class="badge badge-rounded-circle badge-info-soft mr-1 mr-4"> <i class="fe fe-check"></i> </div> <!-- Text --> <p class="text-info"> Custom views </p> </div> <!-- Item --> <div class="d-flex"> <!-- Check --> <div class="badge badge-rounded-circle badge-info-soft mr-1 mr-4"> <i class="fe fe-check"></i> </div> <!-- Text --> <p class="text-info"> Custom JavaScript </p> </div> <!-- Item --> <div class="d-flex"> <!-- Check --> <div class="badge badge-rounded-circle badge-info-soft mr-1 mr-4"> <i class="fe fe-check"></i> </div> <!-- Text --> <p class="text-info"> Custom CSS </p> </div> </div> </div> <!-- / .row --> </div> </div> <!-- / .row --> </div> <!-- / .container --> </section> <!-- THE MOST ADVANCED TABLE UX ================================================== --> <section class="py-8 py-md-11"> <div class="container"> <div class="row align-items-center"> <div class="col-12 col-md-5 col-lg-6 order-md-2"> <!-- iPhone + Macbook --> <div class="w-md-150 w-lg-130 mb-6 mb-md-0"> <div class="device-combo device-combo-iphonex-macbook"> <!-- iPhone --> <div class="device device-iphonex"> <img loading="lazy" src="https://backpackforlaravel.com/presentation/img/backpack/responsive/ux_mobile.png" class="device-screen" alt="..."> <img loading="lazy" src="https://backpackforlaravel.com/presentation/img/devices/iphonex.svg" class="img-fluid" alt="..."> </div> <!-- Macbook --> <div class="device device-macbook"> <img loading="lazy" src="https://backpackforlaravel.com/presentation/img/backpack/responsive/ux_desktop.png" class="device-screen" alt="..."> <img loading="lazy" src="https://backpackforlaravel.com/presentation/img/devices/macbook.svg" class="img-fluid" alt="..."> </div> </div> </div> </div> <div class="col-12 col-md-7 col-lg-6 order-md-1"> <!-- Heading --> <h2> The most <span class="text-info">advanced UX</span> for tables. </h2> <!-- Text --> <p class="font-size-lg text-muted mb-6"> We've spent years making sure your admin panels will be easy to use. By anyone. On any device. </p> <!-- List --> <div class="d-flex"> <!-- Icon --> <div class="icon text-info"> <?xml version="1.0" encoding="UTF-8"?> <svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- Generator: Sketch 52.2 (67145) - http://www.bohemiancoding.com/sketch --> <title>Stockholm-icons / General / Clipboard</title> <desc>Created with Sketch.</desc> <g id="Stockholm-icons-/-General-/-Clipboard" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <rect id="bound" x="0" y="0" width="24" height="24"></rect> <path d="M8,3 L8,3.5 C8,4.32842712 8.67157288,5 9.5,5 L14.5,5 C15.3284271,5 16,4.32842712 16,3.5 L16,3 L18,3 C19.1045695,3 20,3.8954305 20,5 L20,21 C20,22.1045695 19.1045695,23 18,23 L6,23 C4.8954305,23 4,22.1045695 4,21 L4,5 C4,3.8954305 4.8954305,3 6,3 L8,3 Z" id="Combined-Shape" fill="#335EEA" opacity="0.3"></path> <path d="M11,2 C11,1.44771525 11.4477153,1 12,1 C12.5522847,1 13,1.44771525 13,2 L14.5,2 C14.7761424,2 15,2.22385763 15,2.5 L15,3.5 C15,3.77614237 14.7761424,4 14.5,4 L9.5,4 C9.22385763,4 9,3.77614237 9,3.5 L9,2.5 C9,2.22385763 9.22385763,2 9.5,2 L11,2 Z" id="Combined-Shape" fill="#335EEA"></path> <rect id="Rectangle-152" fill="#335EEA" opacity="0.3" x="7" y="10" width="5" height="2" rx="1"></rect> <rect id="Rectangle-152-Copy" fill="#335EEA" opacity="0.3" x="7" y="14" width="9" height="2" rx="1"></rect> </g> </svg> </div> <div class="ml-5"> <!-- Heading --> <h4 class="mb-1"> Easy to use tabels? On smartphones? </h4> <!-- Text --> <p class="text-muted mb-5"> Yes. Backpack shows as many columns as possible, ordered by importance. Everything else gets hidden behind a "..." symbol - just only click away. </p> </div> </div> <div class="d-flex"> <!-- Icon --> <div class="icon text-info"> <?xml version="1.0" encoding="UTF-8"?> <svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- Generator: Sketch 52.2 (67145) - http://www.bohemiancoding.com/sketch --> <title>Stockholm-icons / Files / Folder-star</title> <desc>Created with Sketch.</desc> <g id="Stockholm-icons-/-Files-/-Folder-star" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <rect id="bound" x="0" y="0" width="24" height="24"></rect> <path d="M3.5,21 L20.5,21 C21.3284271,21 22,20.3284271 22,19.5 L22,8.5 C22,7.67157288 21.3284271,7 20.5,7 L10,7 L7.43933983,4.43933983 C7.15803526,4.15803526 6.77650439,4 6.37867966,4 L3.5,4 C2.67157288,4 2,4.67157288 2,5.5 L2,19.5 C2,20.3284271 2.67157288,21 3.5,21 Z" id="Combined-Shape" fill="#335EEA" opacity="0.3"></path> <path d="M11.9999651,17.2276651 L9.80187391,18.4352848 C9.53879239,18.5798204 9.21340017,18.4741205 9.07509004,18.1991974 C9.02001422,18.0897216 9.00100892,17.9643258 9.02101638,17.8424227 L9.44081443,15.2846431 L7.66252134,13.4732136 C7.44968392,13.2564102 7.44532889,12.9003514 7.65279409,12.677934 C7.73540782,12.5893662 7.84365664,12.5317281 7.96078237,12.5139426 L10.418323,12.1407676 L11.5173686,9.81362288 C11.6489093,9.53509542 11.97161,9.42073887 12.2381407,9.5582004 C12.3442746,9.6129383 12.4301813,9.70271178 12.4825615,9.81362288 L13.5816071,12.1407676 L16.0391477,12.5139426 C16.3332818,12.5586066 16.5370768,12.8439892 16.4943366,13.1513625 C16.4773173,13.2737601 16.4221618,13.3868813 16.3374088,13.4732136 L14.5591157,15.2846431 L14.9789137,17.8424227 C15.0291578,18.148554 14.8324094,18.4392867 14.5394638,18.4917923 C14.4228114,18.5127004 14.3028166,18.4928396 14.1980562,18.4352848 L11.9999651,17.2276651 Z" id="Star" fill="#335EEA" opacity="0.3"></path> </g> </svg> </div> <div class="ml-5"> <!-- Heading --> <h4 class="mb-1"> Hundreds of attributes? </h4> <!-- Text --> <p class="text-muted mb-0"> Go ahead. The interface won't become overwhelming, we've made sure of it. Anything from presentation websites to ERPs, Backpack can take it. </p> </div> </div> </div> </div> <!-- / .row --> </div> <!-- / .container --> </section> <!-- TOOLS & SERVICES --> <section class="pt-8 pt-md-11 mb-5" id="tools-and-services"> <div class="container"> <div class="row justify-content-center"> <div class="col-12 col-md-10 col-lg-8 text-center"> <!-- Badge --> <!-- Heading --> <h2 class="h1"> Now with <span class="text-info">tools & services</span> for the other parts of your web development process. </h2> <!-- Text --> <p class="lead text-gray-700 mb-7 mb-md-9"> Those who use Backpack regularly will find that coding is no longer the bottleneck - the other parts of the process are. So we've improved those too. </p> </div> </div> <!-- / .row --> <div class="row align-items-center"> <div class="col-12 col-md-6 col-lg-7"> <!-- Screenshot --> <div class="mb-8 mb-md-0"> <!-- Image --> <img loading="lazy" src="https://user-images.githubusercontent.com/1032474/128379216-72ae55fa-fcff-4747-8c35-42c733923c94.gif" alt="..." class="screenshot img-fluid"> </div> </div> <div class="col-12 col-md-6 col-lg-5"> <!-- List --> <div class="d-flex"> <!-- Badge --> <div class="badge badge-lg badge-rounded-circle badge-info"> <span>1</span> </div> <!-- Body --> <div class="ml-5"> <!-- Heading --> <h3> Wireframing & Design </h3> <!-- Text --> <p class="text-gray-700 mb-6"> Use our <a href="https://backpackforlaravel.com/products/figma-template" class="text-info">Backpack Figma Template</a> to quickly design admin panels that are easy-to-code. Paid extra. </p> </div> </div> <div class="d-flex"> <!-- Badge --> <div class="badge badge-lg badge-rounded-circle badge-info"> <span>2</span> </div> <!-- Body --> <div class="ml-5"> <!-- Heading --> <h3> Generating Code </h3> <!-- Text --> <p class="text-gray-700 mb-6"> Use <a href="https://backpackforlaravel.com/products/devtools" class="text-info">Backpack DevTools</a> instead of the command line, to generate Models, Migrations, Seeders, Factories, CRUDs... easily. Paid extra. </p> </div> </div> <div class="d-flex"> <!-- Badge --> <div class="badge badge-lg badge-rounded-circle badge-info"> <span>3</span> </div> <!-- Body --> <div class="ml-5"> <!-- Heading --> <h3> Coding </h3> <!-- Text --> <p class="text-gray-700 mb-6"> Use <a href="https://backpackforlaravel.com/pricing">Backpack\CRUD</a> (our main product) to create admin panels that are easy to use, create, overwrite and maintain. At an incredible price. </p> </div> </div> <div class="d-flex"> <!-- Badge --> <div class="badge badge-lg badge-rounded-circle badge-info"> <span>4</span> </div> <!-- Body --> <div class="ml-5"> <!-- Heading --> <h3> Outsourcing </h3> <!-- Text --> <p class="text-gray-700 mb-0"> Don't have the time or experience to do something yourself? <a href="https://backpackforlaravel.com/need-freelancer-or-development-team" class="text-info">Get our team</a> to do it. Paid extra. </p> </div> </div> </div> </div> <!-- / .row --> </div> <!-- / .container --> </section> <!-- SHAPE ================================================== --> <div class="position-relative"> <div class="shape shape-bottom shape-fluid-x svg-shim text-gray-200"> <svg viewBox="0 0 2880 480" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M2160 0C1440 240 720 240 720 240H0V480H2880V0H2160Z" fill="currentColor"/> </svg> </div> </div> <!-- TESTIMONIALS ================================================== --> <section class="py-8 pt-md-10 bg-gray-200"> <div class="container"> <h2>Testimonials</h2> <p class="font-size-lg text-muted mb-6"> Kind words from amazing people who love our product. They inspire us to move forward with bigger ambitions. </p> <div class="row mt-8"> <div class="col-12 col-md-5 col-lg-4 mb-8"> <!-- Card --> <div class="card shadow-light-lg" style="border-top-color: #6772E5;"> <div class="card-body" style="padding: 1.75rem"> <!-- Text --> <p class="text-gray-700 mb-5"> “Backpack for Laravel is highly customizable. Easy to use by a back-end developer with lots of built-in features.” </p> <!-- Icon --> <div class="row"> <div class="col-md-9 text-left"> <strong>Ivelin Pavlov</strong> <small class="text-muted d-block" style="font-size: 0.8em">Senior Engineer, VMware Carbon Black</small> </div> <div class="col-md-3"> <div class="avatar avatar-lg mt-2"> <img src="https://github.com/ibpavlov.png" alt="" class="avatar-img rounded-circle"> </div> </div> </div> </div> </div> </div> <div class="col-12 col-md-5 col-lg-4 mb-8"> <!-- Card --> <div class="card shadow-light-lg" style="border-top-color: #6772E5;"> <div class="card-body" style="padding: 1.75rem"> <!-- Text --> <p class="text-gray-700 mb-5"> “Surely the starting point for every Laravel project. Don't reinvent the wheel, use the best wheel ever made!!” </p> <!-- Icon --> <div class="row"> <div class="col-md-9 text-left"> <strong>Michael Di Prisco</strong> <small class="text-muted d-block" style="font-size: 0.8em">Full Stack Developer</small> </div> <div class="col-md-3"> <div class="avatar avatar-lg mt-2"> <img src="https://github.com/cadienvan.png" alt="" class="avatar-img rounded-circle"> </div> </div> </div> </div> </div> </div> <div class="col-12 col-md-5 col-lg-4 mb-8"> <!-- Card --> <div class="card shadow-light-lg" style="border-top-color: #6772E5;"> <div class="card-body" style="padding: 1.75rem"> <!-- Text --> <p class="text-gray-700 mb-5"> “The best admin panel for Laravel that exists! Using it since 2018 without any issues. They are responsible, listens to the community and works hard to support new features.” </p> <!-- Icon --> <div class="row"> <div class="col-md-9 text-left"> <strong>Stefan Azarić</strong> <small class="text-muted d-block" style="font-size: 0.8em">Program Manager, Microsoft</small> </div> <div class="col-md-3"> <div class="avatar avatar-lg mt-2"> <img src="https://github.com/azaricstefan.png" alt="" class="avatar-img rounded-circle"> </div> </div> </div> </div> </div> </div> <div class="col-12 col-md-5 col-lg-4 mb-8"> <!-- Card --> <div class="card shadow-light-lg" style="border-top-color: #6772E5;"> <div class="card-body" style="padding: 1.75rem"> <!-- Text --> <p class="text-gray-700 mb-5"> “It's a great product and also well documented which is usually the weak point of a lot of software. We developed a portal with our hotels information for our customers. Backpack feels like a very solid piece of software.” </p> <!-- Icon --> <div class="row"> <div class="col-md-9 text-left"> <strong>Miquel Angel Daniel</strong> <small class="text-muted d-block" style="font-size: 0.8em">Software Engineer</small> </div> <div class="col-md-3"> <div class="avatar avatar-lg mt-2"> <img src="https://github.com/miquelangeld.png" alt="" class="avatar-img rounded-circle"> </div> </div> </div> </div> </div> </div> <div class="col-12 col-md-5 col-lg-4 mb-8"> <!-- Card --> <div class="card shadow-light-lg" style="border-top-color: #6772E5;"> <div class="card-body" style="padding: 1.75rem"> <!-- Text --> <p class="text-gray-700 mb-5"> “Backpack is very useful for quickly building usable CRUD / admin portals, while also having plenty of hooks to build custom functionality. The team supporting and developing Backpack are incredibly helpful, responsive, and are very welcoming.” </p> <!-- Icon --> <div class="row"> <div class="col-md-9 text-left"> <strong>Dave Mills</strong> <small class="text-muted d-block" style="font-size: 0.8em">Data Engineer &amp; Developer, Stats4SD</small> </div> <div class="col-md-3"> <div class="avatar avatar-lg mt-2"> <img src="https://github.com/dave-mills.png" alt="" class="avatar-img rounded-circle"> </div> </div> </div> </div> </div> </div> <div class="col-12 col-md-5 col-lg-4 mb-8"> <!-- Card --> <div class="card shadow-light-lg" style="border-top-color: #6772E5;"> <div class="card-body" style="padding: 1.75rem"> <!-- Text --> <p class="text-gray-700 mb-5"> “Whether I have to scaffold a new project for a client or build a completely new solution, Backpack saves me a ton of time. If you are building any Laravel project that requires an admin panel, you should seriously consider Backpack.” </p> <!-- Icon --> <div class="row"> <div class="col-md-9 text-left"> <strong>Arber Strazimiri</strong> <small class="text-muted d-block" style="font-size: 0.8em">Software Engineer</small> </div> <div class="col-md-3"> <div class="avatar avatar-lg mt-2"> <img src="https://user-images.githubusercontent.com/171715/216962529-1255dffc-cd71-47e6-9cb3-cb01e788ab19.png" alt="" class="avatar-img rounded-circle"> </div> </div> </div> </div> </div> </div> <div class="col-12 col-md-5 col-lg-4 mb-8"> <!-- Card --> <div class="card shadow-light-lg" style="border-top-color: #6772E5;"> <div class="card-body" style="padding: 1.75rem"> <!-- Text --> <p class="text-gray-700 mb-5"> “Hands-down the best Laravel CRUD out there. Easy to use, fully featured, fully customizable and very affordable for production use as well.” </p> <!-- Icon --> <div class="row"> <div class="col-md-9 text-left"> <strong>Nik Linders</strong> <small class="text-muted d-block" style="font-size: 0.8em">Backend Developer, Eleven59</small> </div> <div class="col-md-3"> <div class="avatar avatar-lg mt-2"> <img src="https://github.com/eleven59.png" alt="" class="avatar-img rounded-circle"> </div> </div> </div> </div> </div> </div> <div class="col-12 col-md-5 col-lg-4 mb-8"> <!-- Card --> <div class="card shadow-light-lg" style="border-top-color: #6772E5;"> <div class="card-body" style="padding: 1.75rem"> <!-- Text --> <p class="text-gray-700 mb-5"> “I love Backpack for Laravel because it makes things easier and it is easy to customise.” </p> <!-- Icon --> <div class="row"> <div class="col-md-9 text-left"> <strong>Mauro Martinez</strong> <small class="text-muted d-block" style="font-size: 0.8em">Backend Developer</small> </div> <div class="col-md-3"> <div class="avatar avatar-lg mt-2"> <img src="https://github.com/maurohmartinez.png" alt="" class="avatar-img rounded-circle"> </div> </div> </div> </div> </div> </div> <div class="col-12 col-md-5 col-lg-4 mb-8"> <!-- Card --> <div class="card shadow-light-lg" style="border-top-color: #6772E5;"> <div class="card-body" style="padding: 1.75rem"> <!-- Text --> <p class="text-gray-700 mb-5"> “Backpack speeds up CRUD development time and allows adding complex features (such as revision history) with just a few lines of code.” </p> <!-- Icon --> <div class="row"> <div class="col-md-9 text-left"> <strong>Sean</strong> <small class="text-muted d-block" style="font-size: 0.8em">Backend Developer</small> </div> <div class="col-md-3"> <div class="avatar avatar-lg mt-2"> <img src="https://github.com/juventus18.png" alt="" class="avatar-img rounded-circle"> </div> </div> </div> </div> </div> </div> </div> <p class="text-center mt-5 d-none"> <a href="#" class="btn btn-info-soft shadow btn-xs px-6 lift">VIEW MORE TESTIMONIALS</a> </p> </div> <!-- / .container --> </section> <!-- SHAPE ================================================== --> <div class="position-relative"> <div class="shape shape-bottom shape-fluid-x svg-shim text-black"> <svg viewBox="0 0 2880 48" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M0 48H1437.5H2880V0H2160C1442.5 52 720 0 720 0H0V48Z" fill="currentColor"/> </svg> </div> </div> <!-- CALL TO ACTION ================================================== --> <section class="py-8 py-md-11 bg-black"> <div class="container"> <div class="row justify-content-center"> <div class="col-12 col-md-10 col-lg-8 text-center"> <!-- Badge --> <span class="badge badge-pill badge-gray-700-soft mb-4"> <span class="h6 font-weight-bold text-uppercase">Get started</span> </span> <!-- Heading --> <h2 class="display-4 text-white"> It's easy to get started. </h2> <!-- Text --> <p class="font-size-lg text-muted mb-6 mb-md-8"> No matter how you prefer to learn, we have it. Check out our <a href="https://backpackforlaravel.com/docs/getting-started-videos" class="text-muted"><u>59-minute video course</u></a>, our <a href="https://backpackforlaravel.com/docs/getting-started-basics" class="text-muted"><u>20-minute text course</u></a> and even a <a href="https://backpackforlaravel.com/docs/crud-tutorial" class="text-muted"><u>crash course</u></a>. </p> <!-- Button --> <a href="https://backpackforlaravel.com/docs/installation" class="btn btn-info shadow lift"> Install Now </a> <a href="https://demo.backpackforlaravel.com/admin" target="_blank" class="btn btn-info-soft shadow lift"> Demo </a> <br> <div class="text-muted font-size-sm mt-3 d-none"> <small>Our software is open-core. Feel free to test it out.</small><br> <small>See our <a href="https://backpackforlaravel.com/pricing" class="text-white">Pricing</a> page for details.</small> </div> </div> </div> <!-- / .row --> </div> <!-- / .container --> </section> <!-- SHAPE ================================================== --> <div class="position-relative"> <div class="shape shape-bottom shape-fluid-x svg-shim text-gray-200"> <svg viewBox="0 0 2880 48" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M0 48H1437.5H2880V0H2160C1442.5 52 720 0 720 0H0V48Z" fill="currentColor"/> </svg> </div> </div> <div class="modal fade" id="videoHeroModal" tabindex="-1" role="dialog" aria-labelledby="videoHeroModalTitle" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered modal-xl" role="document"> <div class="modal-content bg-black"> <div style="padding:56.25% 0 0 0; position:relative;"> <iframe src="" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen style="position:absolute;top:0;left:0;width:100%;height:100%;border:0; border-radius:5px" ></iframe> </div> </div> </div> </div> <footer class="py-8 py-md-11 bg-gray-200 d-print-none"> <div class="container"> <div class="row"> <div class="d-none d-lg-block col-md-6 col-lg-4"> <!-- Brand --> <img src="https://backpackforlaravel.com/presentation/img/backpack/logos/backpack_logo.svg" alt="..." class="footer-brand img-fluid mb-2" style="max-width: 80%; filter: none!important;"> <!-- Text --> <p class="text-gray-600 mb-2 font-size-sm"> Build admin panels for your clients, the easy way. </p> <!-- Social --> <ul class="list-unstyled list-inline list-social mb-6 mb-md-0"> <li class="list-inline-item list-social-item mr-3"> <a href="https://github.com/laravel-backpack" class="text-decoration-none"> <i class="fe fe-github"></i> </a> </li> <li class="list-inline-item list-social-item mr-3"> <a href="https://www.twitter.com/laravelbackpack/" class="text-decoration-none"> <i class="fe fe-twitter"></i> </a> </li> <li class="list-inline-item list-social-item mr-3"> <a href="https://www.facebook.com/BackpackForLaravel/" class="text-decoration-none"> <i class="fe fe-facebook"></i> </a> </li> <li class="list-inline-item list-social-item mr-3"> <a href="https://stackoverflow.com/questions/tagged/backpack-for-laravel" class="text-decoration-none"> <i class="fe fe-layers"></i> </a> </li> </ul> </div> <div class="col-6 col-md-3 col-lg-2"> <!-- Heading --> <div class="h6 font-weight-bold text-uppercase text-gray-700"> First time? </div> <!-- List --> <ul class="list-unstyled text-muted mb-6 mb-md-8 mb-lg-0"> <li class="mb-3"> <a href="https://backpackforlaravel.com/docs/6.x/getting-started-basics" class="text-reset"> Text Tutorial </a> </li> <li class="mb-3"> <a href="https://backpackforlaravel.com/docs/6.x/getting-started-videos" class="text-reset"> Video Tutorial </a> </li> <li class="mb-3"> <a href="https://backpackforlaravel.com/docs/6.x" class="text-reset"> Documentation </a> </li> <li class="mb-3"> <a href="https://backpackforlaravel.com/docs/features-free-vs-paid" class="text-reset"> Free vs Paid </a> </li> </ul> </div> <div class="col-6 col-md-3 col-lg-2 offset-lg-0"> <!-- Heading --> <div class="h6 font-weight-bold text-uppercase text-gray-700"> Features </div> <!-- List --> <ul class="list-unstyled text-muted mb-0"> <li class="mb-3"> <a href="https://backpackforlaravel.com/laravel-crud" class="text-reset"> CRUDs </a> </li> <li class="mb-3"> <a href="https://backpackforlaravel.com/laravel-forms" class="text-reset"> Forms </a> </li> <li class="mb-3"> <a href="https://backpackforlaravel.com/laravel-dashboard" class="text-reset"> Dashboards </a> </li> <li class="mb-3"> <a href="https://backpackforlaravel.com/laravel-crud-generator" class="text-reset"> Generators </a> </li> <!-- <li class="mb-3"> <a href="https://backpackforlaravel.com/newsletter" class="text-reset"> Newsletter </a> </li> --> </ul> </div> <div class="col-6 col-md-3 col-lg-2 offset-lg-0"> <!-- Heading --> <div class="h6 font-weight-bold text-uppercase text-gray-700"> Community </div> <!-- List --> <ul class="list-unstyled text-muted mb-0"> <li class="mb-3"> <a href="https://github.com/Laravel-Backpack/community-forum/discussions" class="text-reset"> Forum </a> </li> <li class="mb-3"> <a href="https://backpackforlaravel.com/articles" class="text-reset"> Articles </a> </li> <li class="mb-3"> <a href="https://backpackforlaravel.com/addons" class="text-reset"> Add-ons </a> </li> <li class="mb-3"> <a href="https://backpackforlaravel.com/newsletter" class="text-reset"> Newsletter </a> </li> <!-- <li class="mb-3"> <a href="" class="text-reset"> Github </a> </li> --> <!-- <li class="mb-3"> <a href="https://backpackforlaravel.com/newsletter" class="text-reset"> Newsletter </a> </li> --> </ul> </div> <div class="col-6 col-md-3 col-lg-2"> <!-- Heading --> <div class="h6 font-weight-bold text-uppercase text-gray-700"> Legal </div> <!-- List --> <ul class="list-unstyled text-muted mb-0"> <li class="mb-3"> <a href="https://backpackforlaravel.com/eula" class="text-reset"> EULA </a> </li> <li class="mb-3"> <a href="https://backpackforlaravel.com/cookie-policy" class="text-reset"> Cookie Policy </a> </li> <li class="mb-3"> <a href="https://backpackforlaravel.com/privacy-policy" class="text-reset"> Privacy Policy </a> </li> <li class="mb-3"> <a href="https://backpackforlaravel.com/rewards-policy" class="text-reset"> Rewards T&C </a> </li> </ul> </div> </div> <!-- / .row --> </div> <!-- / .container --> </footer> <!-- JS needed on all static pages --> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/loadCSS/2.1.0/cssrelpreload.min.js"></script> <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/aos/3.0.0-beta.6/aos.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/smooth-scroll/16.1.0/smooth-scroll.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jarallax/1.12.0/jarallax.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jarallax/1.12.0/jarallax-video.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jarallax/1.12.0/jarallax-element.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script> <!-- Theme JS --> <!-- build:js @webRoot/assets/js/theme.min.js --> <script src="https://backpackforlaravel.com/presentation/js/aos.js"></script> <script src="https://backpackforlaravel.com/presentation/js/fancybox.js"></script> <script src="https://backpackforlaravel.com/presentation/js/navbar.js"></script> <script src="https://backpackforlaravel.com/presentation/js/polyfills.js"></script> <script src="https://backpackforlaravel.com/presentation/js/popovers.js"></script> <script src="https://backpackforlaravel.com/presentation/js/smooth-scroll.js"></script> <script src="https://backpackforlaravel.com/presentation/js/theme.js"></script> <script src="https://backpackforlaravel.com/presentation/js/tooltips.js"></script> <script src="https://backpackforlaravel.com/presentation/js/dropdown.js"></script> <!-- endbuild --> <script> // Set active state on navbar links jQuery(document).ready(function($) { var current_url = "https://backpackforlaravel.com"; var full_url = current_url+location.search; var $navLinks = $("#primaryNavbar li a"); // Don't do that on homepage if (current_url == "https://backpackforlaravel.com") { return ; } // First look for an exact match including the search string var $curentPageLink = $navLinks.filter( function() { return $(this).attr('href') === full_url; } ); // If not found, look for the link that starts with the url if(!$curentPageLink.length > 0){ $curentPageLink = $navLinks.filter( function() { return $(this).attr('href').startsWith(current_url) || current_url.startsWith($(this).attr('href')); } ); } if($curentPageLink.length > 0) { $curentPageLink.addClass('active'); } }); </script> <script src="https://cdnjs.cloudflare.com/ajax/libs/noty/3.1.4/noty.min.js"></script> <script> $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') } }); </script> <script type="text/javascript"> Noty.overrideDefaults({ layout : 'topRight', theme : 'sunset', timeout : 2500, closeWith: ['click', 'button'], }); </script> <script src="/livewire/livewire.js?id=90730a3b0e7144480175" data-turbo-eval="false" data-turbolinks-eval="false" ></script><script data-turbo-eval="false" data-turbolinks-eval="false" >window.livewire = new Livewire();window.Livewire = window.livewire;window.livewire_app_url = '';window.livewire_token = 'jOor6zipD7nIcPFHdrkRCklxiaXXc2GFgrrlDdmq';window.deferLoadingAlpine = function (callback) {window.addEventListener('livewire:load', function () {callback();});};let started = false;window.addEventListener('alpine:initializing', function () {if (! started) {window.livewire.start();started = true;}});document.addEventListener("DOMContentLoaded", function () {if (! started) {window.livewire.start();started = true;}});</script> <script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.11/typed.min.js"></script> <script src="https://backpackforlaravel.com/presentation/js/typed.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/countup.js/1.9.3/countUp.min.js"></script> <script src="https://backpackforlaravel.com/presentation/js/countup.js"></script> <script> const videoHeroModal = $('#videoHeroModal'); videoHeroModal.on('show.bs.modal', function (e) { const src = 'https://player.vimeo.com/video/790792153?autoplay=1&h=853e94ef69&badge=0&autoplay=1&autopause=0&player_id=0&app_id=58479/embed'; $(e.currentTarget).find('iframe').prop('src', src); }); videoHeroModal.on('hide.bs.modal', function (e) { $(e.currentTarget).find('iframe').prop('src', ''); }) </script> </body> </html>

Pages: 1 2 3 4 5 6 7 8 9 10