update,
This commit is contained in:
louiscklaw
@@ -0,0 +1,661 @@
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="apple-touch-icon" sizes="76x76" href="../../assets/img/apple-icon.png">
|
||||
<link rel="icon" href="../../assets/img/favicon.png" type="image/png">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="author" content="Creative Tim">
|
||||
<title>
|
||||
Colors | Material Dashboard 2 FREE Laravel by Creative Tim & UPDIVISION
|
||||
</title>
|
||||
<link rel="canonical" href="https://www.creative-tim.com/learning-lab/bootstrap/colors/material-dashboard" />
|
||||
|
||||
<meta name="keywords" content="creative tim, updivision, html dashboard, laravel, material, html css dashboard laravel, material dashboard laravel, laravel material dashboard, material admin, laravel dashboard, laravel admin, web dashboard, bootstrap 5 dashboard laravel, bootstrap 5, css3 dashboard, bootstrap 5 admin laravel, material dashboard bootstrap 5 laravel, frontend, responsive bootstrap 5 dashboard, material dashboard, material laravel bootstrap 5 dashboard" />
|
||||
<meta name="description" content="A free Laravel Dashboard featuring dozens of UI components & basic Laravel CRUDs." />
|
||||
<meta itemprop="name" content="Material Dashboard 2 Laravel by Creative Tim & UPDIVISION" />
|
||||
<meta itemprop="description" content="A free Laravel Dashboard featuring dozens of UI components & basic Laravel CRUDs." />
|
||||
<meta itemprop="image" content="https://s3.amazonaws.com/creativetim_bucket/products/598/original/material-dashboard-laravel.jpg" />
|
||||
<meta name="twitter:card" content="product" />
|
||||
<meta name="twitter:site" content="@creativetim" />
|
||||
<meta name="twitter:title" content="Material Dashboard 2 Laravel by Creative Tim & UPDIVISION" />
|
||||
<meta name="twitter:description" content="A free Laravel Dashboard featuring dozens of UI components & basic Laravel CRUDs." />
|
||||
<meta name="twitter:creator" content="@creativetim" />
|
||||
<meta name="twitter:image" content="https://s3.amazonaws.com/creativetim_bucket/products/598/original/material-dashboard-laravel.jpg" />
|
||||
<meta property="fb:app_id" content="655968634437471" />
|
||||
<meta property="og:title" content="Material Dashboard 2 Laravel by Creative Tim & UPDIVISION" />
|
||||
<meta property="og:type" content="article" />
|
||||
<meta property="og:url" content="https://www.creative-tim.com/live/material-dashboard-laravel" />
|
||||
<meta property="og:image" content="https://s3.amazonaws.com/creativetim_bucket/products/598/original/material-dashboard-laravel.jpg" />
|
||||
<meta property="og:description" content="A free Laravel Dashboard featuring dozens of UI components & basic Laravel CRUDs." />
|
||||
<meta property="og:site_name" content="Creative Tim" />
|
||||
|
||||
|
||||
<link rel="stylesheet" href="../../assets/css/nucleo-icons.css" type="text/css">
|
||||
|
||||
<link rel="stylesheet" href="../../assets/css/nextjs-material-dashboard-pro.min.css" type="text/css">
|
||||
|
||||
<link rel="stylesheet" href="../../assets/css/material-dashboard.min.css" type="text/css">
|
||||
<link rel="stylesheet" href="../../assets/css/demo.css" type="text/css">
|
||||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Round" rel="stylesheet">
|
||||
|
||||
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700" rel="stylesheet">
|
||||
|
||||
<link href="../../assets/css/nucleo-icons.css" rel="stylesheet">
|
||||
|
||||
<script src="https://kit.fontawesome.com/42d5adcbca.js" crossorigin="anonymous"></script>
|
||||
<!-- Anti-flicker snippet (recommended) -->
|
||||
<style>
|
||||
.async-hide {
|
||||
opacity: 0 !important
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
(function(a, s, y, n, c, h, i, d, e) {
|
||||
s.className += ' ' + y;
|
||||
h.start = 1 * new Date;
|
||||
h.end = i = function() {
|
||||
s.className = s.className.replace(RegExp(' ?' + y), '')
|
||||
};
|
||||
(a[n] = a[n] || []).hide = h;
|
||||
setTimeout(function() {
|
||||
i();
|
||||
h.end = null
|
||||
}, c);
|
||||
h.timeout = c;
|
||||
})(window, document.documentElement, 'async-hide', 'dataLayer', 4000, {
|
||||
'GTM-K9BGS8K': true
|
||||
});
|
||||
</script>
|
||||
<!-- Analytics-Optimize Snippet -->
|
||||
<script>
|
||||
(function(i, s, o, g, r, a, m) {
|
||||
i['GoogleAnalyticsObject'] = r;
|
||||
i[r] = i[r] || function() {
|
||||
(i[r].q = i[r].q || []).push(arguments)
|
||||
}, i[r].l = 1 * new Date();
|
||||
a = s.createElement(o),
|
||||
m = s.getElementsByTagName(o)[0];
|
||||
a.async = 1;
|
||||
a.src = g;
|
||||
m.parentNode.insertBefore(a, m)
|
||||
})(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
|
||||
ga('create', 'UA-46172202-22', 'auto', {
|
||||
allowLinker: true
|
||||
});
|
||||
ga('set', 'anonymizeIp', true);
|
||||
ga('require', 'GTM-K9BGS8K');
|
||||
ga('require', 'displayfeatures');
|
||||
ga('require', 'linker');
|
||||
ga('linker:autoLink', ["2checkout.com", "avangate.com"]);
|
||||
</script>
|
||||
<!-- end Analytics-Optimize Snippet -->
|
||||
<!-- Google Tag Manager -->
|
||||
<script>
|
||||
(function(w, d, s, l, i) {
|
||||
w[l] = w[l] || [];
|
||||
w[l].push({
|
||||
'gtm.start': new Date().getTime(),
|
||||
event: 'gtm.js'
|
||||
});
|
||||
var f = d.getElementsByTagName(s)[0],
|
||||
j = d.createElement(s),
|
||||
dl = l != 'dataLayer' ? '&l=' + l : '';
|
||||
j.async = true;
|
||||
j.src =
|
||||
'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
|
||||
f.parentNode.insertBefore(j, f);
|
||||
})(window, document, 'script', 'dataLayer', 'GTM-NKDMSK6');
|
||||
</script>
|
||||
<!-- End Google Tag Manager -->
|
||||
<!-- This is for docs typography and layout -->
|
||||
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet">
|
||||
<link href="../../assets/css/docs.css" rel="stylesheet" />
|
||||
</head>
|
||||
<body class="docs ">
|
||||
<!-- Google Tag Manager (noscript) -->
|
||||
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-NKDMSK6" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
|
||||
<!-- End Google Tag Manager (noscript) -->
|
||||
<header class="ct-docs-navbar">
|
||||
<a class="ct-docs-navbar-brand" href="javascript:void(0)" aria-label="Bootstrap">
|
||||
</a><a href="https://www.creative-tim.com/" class="ct-docs-navbar-text" target="_blank">
|
||||
Creative Tim
|
||||
</a>
|
||||
<div class="ct-docs-navbar-border"></div>
|
||||
<a href="../../documentation/getting-started/installation.html" class="ct-docs-navbar-text">
|
||||
Docs
|
||||
</a>
|
||||
|
||||
<ul class="ct-docs-navbar-nav-left">
|
||||
<li class="ct-docs-nav-item-dropdown">
|
||||
<a href="javascript:;" class="ct-docs-navbar-nav-link" role="button">
|
||||
<span class="ct-docs-navbar-nav-link-inner--text">Live Preview</span>
|
||||
</a>
|
||||
<div class="ct-docs-navbar-dropdown-menu" aria-labelledby="DropdownPreview">
|
||||
<a class="ct-docs-navbar-dropdown-item" href="https://material-dashboard-laravel.creative-tim.com" target="_blank">
|
||||
Material Dashboard 2 Laravel
|
||||
</a>
|
||||
<a class="ct-docs-navbar-dropdown-item" href="https://material-dashboard-pro-laravel.creative-tim.com" target="_blank">
|
||||
Material Dashboard 2 Pro Laravel
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="ct-docs-nav-item-dropdown">
|
||||
<a href="javascript:;" class="ct-docs-navbar-nav-link" role="button">
|
||||
<span class="ct-docs-navbar-nav-link-inner--text">Support</span>
|
||||
</a>
|
||||
<div class="ct-docs-navbar-dropdown-menu" aria-labelledby="DropdownSupport">
|
||||
<a class="ct-docs-navbar-dropdown-item" href="https://github.com/creativetimofficial/material-dashboard-laravel/issues" target="_blank">
|
||||
Material Dashboard 2 Laravel
|
||||
</a>
|
||||
<a class="ct-docs-navbar-dropdown-item" href="https://github.com/creativetimofficial/ct-material-dashboard-pro-laravel/issues" target="_blank">
|
||||
Material Dashboard 2 Pro Laravel
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="ct-docs-navbar-nav-right">
|
||||
<li class="ct-docs-navbar-nav-item">
|
||||
<a class="ct-docs-navbar-nav-link" href="https://www.creative-tim.com/product/material-dashboard-laravel" target="_blank">Download Free</a>
|
||||
</li>
|
||||
</ul>
|
||||
<a href="https://www.creative-tim.com/product/material-dashboard-pro-laravel" target="_blank" class="ct-docs-btn-upgrade">
|
||||
<span class="ct-docs-btn-inner--icon">
|
||||
<i class="fas fa-download mr-2" aria-hidden="true"></i>
|
||||
</span>
|
||||
<span class="ct-docs-navbar-nav-link-inner--text">Upgrade to PRO</span>
|
||||
</a>
|
||||
<button class="ct-docs-navbar-toggler" type="button">
|
||||
<span class="ct-docs-navbar-toggler-icon"></span>
|
||||
</button>
|
||||
</header>
|
||||
<div class="ct-docs-main-container">
|
||||
<div class="ct-docs-main-content-row">
|
||||
<div class="ct-docs-sidebar-col">
|
||||
<nav class="ct-docs-sidebar-collapse-links">
|
||||
<div class="ct-docs-sidebar-product">
|
||||
<div class="ct-docs-sidebar-product-image">
|
||||
<img src="../../assets/img/bootstrap.png">
|
||||
</div>
|
||||
<p class="ct-docs-sidebar-product-text">Material Dashboard</p>
|
||||
</div>
|
||||
<div class="ct-docs-toc-item-active">
|
||||
<a class="ct-docs-toc-link" href="javascript:void(0)">
|
||||
<div class="d-inline-block">
|
||||
<div class="icon icon-xs border-radius-md bg-gradient-primary text-center mr-2 d-flex align-items-center justify-content-center me-1">
|
||||
<i class="ni ni-active-40 text-white"></i>
|
||||
</div>
|
||||
</div>
|
||||
Getting started
|
||||
</a>
|
||||
<ul class="ct-docs-nav-sidenav ms-4 ps-1">
|
||||
<li class="">
|
||||
<a href="../../documentation/getting-started/overview.html">
|
||||
Overview
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/getting-started/license.html">
|
||||
License
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/getting-started/installation.html">
|
||||
Installation
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/getting-started/build-tools.html">
|
||||
Build Tools
|
||||
</a>
|
||||
</li>
|
||||
<li class="ct-docs-nav-sidenav-active">
|
||||
<a href="../../documentation/getting-started/bootstrap.html">
|
||||
What is Bootstrap
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ct-docs-toc-item-active">
|
||||
<a class="ct-docs-toc-link" href="javascript:void(0)">
|
||||
<div class="d-inline-block">
|
||||
<div class="icon icon-xs border-radius-md bg-gradient-primary text-center mr-2 d-flex align-items-center justify-content-center me-1">
|
||||
<i class="ni ni-folder-17 text-white"></i>
|
||||
</div>
|
||||
</div>
|
||||
Laravel
|
||||
</a>
|
||||
<ul class="ct-docs-nav-sidenav ms-4 ps-1">
|
||||
<li class="">
|
||||
<a href="../../documentation/laravel/login.html">
|
||||
Login
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/laravel/sign-up.html">
|
||||
Sign Up
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/laravel/forgot-password.html">
|
||||
Forgot Password
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/laravel/user-profile.html">
|
||||
User Profile
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/laravel/user-management.html">
|
||||
User Management
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ct-docs-toc-item-active">
|
||||
<a class="ct-docs-toc-link" href="javascript:void(0)">
|
||||
<div class="d-inline-block">
|
||||
<div class="icon icon-xs border-radius-md bg-gradient-primary text-center mr-2 d-flex align-items-center justify-content-center me-1">
|
||||
<i class="ni ni-folder-17 text-white"></i>
|
||||
</div>
|
||||
</div>
|
||||
Foundation
|
||||
</a>
|
||||
<ul class="ct-docs-nav-sidenav ms-4 ps-1">
|
||||
<li class=" ct-docs-nav-sidenav ">
|
||||
<a href="../../documentation/foundation/colors.html">
|
||||
Colors
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/foundation/grid.html">
|
||||
Grid
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/foundation/typography.html">
|
||||
Typography
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/foundation/icons.html">
|
||||
Icons
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/foundation/utilities.html">
|
||||
Utilities
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ct-docs-toc-item-active">
|
||||
<a class="ct-docs-toc-link" href="javascript:void(0)">
|
||||
<div class="d-inline-block">
|
||||
<div class="icon icon-xs border-radius-md bg-gradient-primary text-center mr-2 d-flex align-items-center justify-content-center me-1">
|
||||
<i class="ni ni-app text-white"></i>
|
||||
</div>
|
||||
</div>
|
||||
Components
|
||||
</a>
|
||||
<ul class="ct-docs-nav-sidenav ms-4 ps-1">
|
||||
<li class="">
|
||||
<a href="../../documentation/components/alerts.html">
|
||||
Alerts
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/badge.html">
|
||||
Badge
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/buttons.html">
|
||||
Buttons
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/social-buttons.html">
|
||||
Social Buttons
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/cards.html">
|
||||
Cards
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/carousel.html">
|
||||
Carousel
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/collapse.html">
|
||||
Collapse
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/dropdowns.html">
|
||||
Dropdowns
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/forms.html">
|
||||
Forms
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/input-group.html">
|
||||
Input Group
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/list-group.html">
|
||||
List Group
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/modal.html">
|
||||
Modal
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/navs.html">
|
||||
Navs
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/navbar.html">
|
||||
Navbar
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/pagination.html">
|
||||
Pagination
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/popovers.html">
|
||||
Popovers
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/progress.html">
|
||||
Progress
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/spinners.html">
|
||||
Spinners
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/tables.html">
|
||||
Tables
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/tooltips.html">
|
||||
Tooltips
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ct-docs-toc-item-active">
|
||||
<a class="ct-docs-toc-link" href="javascript:void(0)">
|
||||
<div class="d-inline-block">
|
||||
<div class="icon icon-xs border-radius-md bg-gradient-primary text-center mr-2 d-flex align-items-center justify-content-center me-1">
|
||||
<i class="ni ni-settings text-white"></i>
|
||||
</div>
|
||||
</div>
|
||||
Plugins
|
||||
</a>
|
||||
<ul class="ct-docs-nav-sidenav ms-4 ps-1">
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/countUpJs.html">
|
||||
CountUp JS
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/charts.html">
|
||||
Charts
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/datepicker.html">
|
||||
Datepicker
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/fullcalendar.html">
|
||||
Fullcalendar
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/sliders.html">
|
||||
Sliders
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/choices.html">
|
||||
Choices
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/dropzone.html">
|
||||
Dropzone
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/datatables.html">
|
||||
Datatables
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/kanban.html">
|
||||
Kanban
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/photo-swipe.html">
|
||||
Photo Swipe
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/quill.html">
|
||||
Quill
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/sweet-alerts.html">
|
||||
Sweet Alerts
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/wizard.html">
|
||||
Wizard
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="ct-docs-toc-col">
|
||||
<ul class="section-nav">
|
||||
<li class="toc-entry toc-h2"><a href="#bootstrap">Bootstrap</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#bootstrap-examples">Bootstrap Examples</a></li>
|
||||
<li class="toc-entry toc-h1"><a href="#my-first-bootstrap-page">My First Bootstrap Page</a>
|
||||
<ul>
|
||||
<li class="toc-entry toc-h3"><a href="#column-1">Column 1</a></li>
|
||||
<li class="toc-entry toc-h3"><a href="#column-2">Column 2</a></li>
|
||||
<li class="toc-entry toc-h3"><a href="#column-3">Column 3</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<main class="ct-docs-content-col" role="main">
|
||||
<div class="ct-docs-page-title">
|
||||
<h1 class="ct-docs-page-h1-title" id="content">
|
||||
What is Bootstrap
|
||||
</h1>
|
||||
<div class="avatar-group mt-3">
|
||||
</div>
|
||||
</div>
|
||||
<p class="ct-docs-page-title-lead">Build responsive, mobile-first projects on the web with the world’s most popular front-end component library.</p>
|
||||
<hr class="ct-docs-hr">
|
||||
<h2 id="bootstrap">Bootstrap</h2>
|
||||
<p>Bootstrap is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with our Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful plugins.</p>
|
||||
<p>Bootstrap includes HTML and CSS based design templates for typography, forms, buttons, tables, navigation, modals, image carousels and many other, as well as optional JavaScript plugins</p>
|
||||
<h2 id="bootstrap-examples">Bootstrap Examples</h2>
|
||||
<div class="bg-light text-center border-radius-lg py-4 mb-4">
|
||||
<h1>My First Bootstrap Page</h1>
|
||||
<p>Resize this responsive page to see the effect!</p>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-sm-4">
|
||||
<h3>Column 1</h3>
|
||||
<p>Lorem ipsum dolor..</p>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<h3>Column 2</h3>
|
||||
<p>Lorem ipsum dolor..</p>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<h3>Column 3</h3>
|
||||
<p>Lorem ipsum dolor..</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="position-relative">
|
||||
<div class="bd-clipboard"><span class="btn-clipboard" title="" data-bs-original-title="Copy to clipboard">Copy</span></div><figure class="highlight"><pre class=" language-html"><code class=" language-html" data-lang="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>bg-light text-center border-radius-lg py-4 mb-4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>My First Bootstrap Page<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Resize this responsive page to see the effect!<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>container<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>row<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>col-sm-4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h3</span><span class="token punctuation">></span></span>Column 1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h3</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Lorem ipsum dolor..<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>col-sm-4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h3</span><span class="token punctuation">></span></span>Column 2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h3</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Lorem ipsum dolor..<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>col-sm-4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h3</span><span class="token punctuation">></span></span>Column 3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h3</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Lorem ipsum dolor..<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
|
||||
</figure>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
<div class="ct-docs-main-footer-row">
|
||||
<div class="ct-docs-main-footer-blank-col">
|
||||
</div>
|
||||
<div class="ct-docs-main-footer-col">
|
||||
<footer class="ct-docs-footer">
|
||||
<div class="ct-docs-footer-inner-row">
|
||||
<div class="ct-docs-footer-col">
|
||||
<div class="ct-docs-footer-copyright">
|
||||
© <script>
|
||||
document.write(new Date().getFullYear())
|
||||
</script> <a href="https://creative-tim.com" class="ct-docs-footer-copyright-author" target="_blank">Creative Tim</a> & <a href="https://www.updivision.com" class="ct-docs-footer-copyright-author" target="_blank">UPDIVISION</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ct-docs-footer-col">
|
||||
<ul class="ct-docs-footer-nav-footer">
|
||||
<li>
|
||||
<a href="https://creative-tim.com" class="ct-docs-footer-nav-link" target="_blank">Creative Tim</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="https://www.updivision.com" class="ct-docs-footer-nav-link" target="_blank">UPDIVISION</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://www.creative-tim.com/contact-us" class="ct-docs-footer-nav-link" target="_blank">Contact Us</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://creative-tim.com/blog" class="ct-docs-footer-nav-link" target="_blank">Blog</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="../../assets/js/jquery.min.js" type="text/javascript"></script>
|
||||
<script src="../../assets/js/core/popper.min.js" type="text/javascript"></script>
|
||||
<script src="../../assets/js/core/bootstrap.bundle.min.js" type="text/javascript"></script>
|
||||
<script src="" type="text/javascript"></script>
|
||||
<script src="" type="text/javascript"></script>
|
||||
<script src="" type="text/javascript"></script>
|
||||
<script src="" type="text/javascript"></script>
|
||||
<script src="../../assets/js/prism.js" type="text/javascript"></script>
|
||||
<script src="../../assets/js/docs.min.js" type="text/javascript"></script>
|
||||
<script src="../../assets/js/holder.min.js" type="text/javascript"></script>
|
||||
<script src="../../assets/js/moment.min.js" type="text/javascript"></script>
|
||||
<script src="../../assets/js/material-dashboard.min.js" type="text/javascript"></script>
|
||||
<script>
|
||||
Holder.addTheme('gray', {
|
||||
bg: '#777',
|
||||
fg: 'rgba(255,255,255,.75)',
|
||||
font: 'Helvetica',
|
||||
fontweight: 'normal'
|
||||
})
|
||||
</script>
|
||||
<script>
|
||||
// Facebook Pixel Code Don't Delete
|
||||
! function(f, b, e, v, n, t, s) {
|
||||
if (f.fbq) return;
|
||||
n = f.fbq = function() {
|
||||
n.callMethod ?
|
||||
n.callMethod.apply(n, arguments) : n.queue.push(arguments)
|
||||
};
|
||||
if (!f._fbq) f._fbq = n;
|
||||
n.push = n;
|
||||
n.loaded = !0;
|
||||
n.version = '2.0';
|
||||
n.queue = [];
|
||||
t = b.createElement(e);
|
||||
t.async = !0;
|
||||
t.src = v;
|
||||
s = b.getElementsByTagName(e)[0];
|
||||
s.parentNode.insertBefore(t, s)
|
||||
}(window,
|
||||
document, 'script', '//connect.facebook.net/en_US/fbevents.js');
|
||||
|
||||
try {
|
||||
fbq('init', '111649226022273');
|
||||
fbq('track', "PageView");
|
||||
|
||||
} catch (err) {
|
||||
console.log('Facebook Track Error:', err);
|
||||
}
|
||||
</script>
|
||||
<script src="../../assets/js/docs.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,642 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="apple-touch-icon" sizes="76x76" href="../../assets/img/apple-icon.png">
|
||||
<link rel="icon" href="../../assets/img/favicon.png" type="image/png">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="author" content="Creative Tim">
|
||||
<title>
|
||||
Build Tools | Material Dashboard 2 FREE Laravel by Creative Tim & UPDIVISION
|
||||
</title>
|
||||
<link rel="canonical" href="https://www.creative-tim.com/learning-lab/bootstrap/colors/material-dashboard" />
|
||||
|
||||
<meta name="keywords" content="creative tim, updivision, html dashboard, laravel, material, html css dashboard laravel, material dashboard laravel, laravel material dashboard, material admin, laravel dashboard, laravel admin, web dashboard, bootstrap 5 dashboard laravel, bootstrap 5, css3 dashboard, bootstrap 5 admin laravel, material dashboard bootstrap 5 laravel, frontend, responsive bootstrap 5 dashboard, material dashboard, material laravel bootstrap 5 dashboard" />
|
||||
<meta name="description" content="A free Laravel Dashboard featuring dozens of UI components & basic Laravel CRUDs." />
|
||||
<meta itemprop="name" content="Material Dashboard 2 Laravel by Creative Tim & UPDIVISION" />
|
||||
<meta itemprop="description" content="A free Laravel Dashboard featuring dozens of UI components & basic Laravel CRUDs." />
|
||||
<meta itemprop="image" content="https://s3.amazonaws.com/creativetim_bucket/products/598/original/material-dashboard-laravel.jpg" />
|
||||
<meta name="twitter:card" content="product" />
|
||||
<meta name="twitter:site" content="@creativetim" />
|
||||
<meta name="twitter:title" content="Material Dashboard 2 Laravel by Creative Tim & UPDIVISION" />
|
||||
<meta name="twitter:description" content="A free Laravel Dashboard featuring dozens of UI components & basic Laravel CRUDs." />
|
||||
<meta name="twitter:creator" content="@creativetim" />
|
||||
<meta name="twitter:image" content="https://s3.amazonaws.com/creativetim_bucket/products/598/original/material-dashboard-laravel.jpg" />
|
||||
<meta property="fb:app_id" content="655968634437471" />
|
||||
<meta property="og:title" content="Material Dashboard 2 Laravel by Creative Tim & UPDIVISION" />
|
||||
<meta property="og:type" content="article" />
|
||||
<meta property="og:url" content="https://www.creative-tim.com/live/material-dashboard-laravel" />
|
||||
<meta property="og:image" content="https://s3.amazonaws.com/creativetim_bucket/products/598/original/material-dashboard-laravel.jpg" />
|
||||
<meta property="og:description" content="A free Laravel Dashboard featuring dozens of UI components & basic Laravel CRUDs." />
|
||||
<meta property="og:site_name" content="Creative Tim" />
|
||||
|
||||
|
||||
|
||||
<link rel="stylesheet" href="../../assets/css/nucleo-icons.css" type="text/css">
|
||||
|
||||
<link rel="stylesheet" href="../../assets/css/nextjs-material-dashboard-pro.min.css" type="text/css">
|
||||
|
||||
<link rel="stylesheet" href="../../assets/css/material-dashboard.min.css" type="text/css">
|
||||
<link rel="stylesheet" href="../../assets/css/demo.css" type="text/css">
|
||||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Round" rel="stylesheet">
|
||||
|
||||
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700" rel="stylesheet">
|
||||
|
||||
<link href="../../assets/css/nucleo-icons.css" rel="stylesheet">
|
||||
|
||||
<script src="https://kit.fontawesome.com/42d5adcbca.js" crossorigin="anonymous"></script>
|
||||
<!-- Anti-flicker snippet (recommended) -->
|
||||
<style>
|
||||
.async-hide {
|
||||
opacity: 0 !important
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
(function(a, s, y, n, c, h, i, d, e) {
|
||||
s.className += ' ' + y;
|
||||
h.start = 1 * new Date;
|
||||
h.end = i = function() {
|
||||
s.className = s.className.replace(RegExp(' ?' + y), '')
|
||||
};
|
||||
(a[n] = a[n] || []).hide = h;
|
||||
setTimeout(function() {
|
||||
i();
|
||||
h.end = null
|
||||
}, c);
|
||||
h.timeout = c;
|
||||
})(window, document.documentElement, 'async-hide', 'dataLayer', 4000, {
|
||||
'GTM-K9BGS8K': true
|
||||
});
|
||||
</script>
|
||||
<!-- Analytics-Optimize Snippet -->
|
||||
<script>
|
||||
(function(i, s, o, g, r, a, m) {
|
||||
i['GoogleAnalyticsObject'] = r;
|
||||
i[r] = i[r] || function() {
|
||||
(i[r].q = i[r].q || []).push(arguments)
|
||||
}, i[r].l = 1 * new Date();
|
||||
a = s.createElement(o),
|
||||
m = s.getElementsByTagName(o)[0];
|
||||
a.async = 1;
|
||||
a.src = g;
|
||||
m.parentNode.insertBefore(a, m)
|
||||
})(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
|
||||
ga('create', 'UA-46172202-22', 'auto', {
|
||||
allowLinker: true
|
||||
});
|
||||
ga('set', 'anonymizeIp', true);
|
||||
ga('require', 'GTM-K9BGS8K');
|
||||
ga('require', 'displayfeatures');
|
||||
ga('require', 'linker');
|
||||
ga('linker:autoLink', ["2checkout.com", "avangate.com"]);
|
||||
</script>
|
||||
<!-- end Analytics-Optimize Snippet -->
|
||||
<!-- Google Tag Manager -->
|
||||
<script>
|
||||
(function(w, d, s, l, i) {
|
||||
w[l] = w[l] || [];
|
||||
w[l].push({
|
||||
'gtm.start': new Date().getTime(),
|
||||
event: 'gtm.js'
|
||||
});
|
||||
var f = d.getElementsByTagName(s)[0],
|
||||
j = d.createElement(s),
|
||||
dl = l != 'dataLayer' ? '&l=' + l : '';
|
||||
j.async = true;
|
||||
j.src =
|
||||
'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
|
||||
f.parentNode.insertBefore(j, f);
|
||||
})(window, document, 'script', 'dataLayer', 'GTM-NKDMSK6');
|
||||
</script>
|
||||
<!-- End Google Tag Manager -->
|
||||
<!-- This is for docs typography and layout -->
|
||||
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet">
|
||||
<link href="../../assets/css/docs.css" rel="stylesheet" />
|
||||
</head>
|
||||
<body class="docs ">
|
||||
<!-- Google Tag Manager (noscript) -->
|
||||
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-NKDMSK6" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
|
||||
<!-- End Google Tag Manager (noscript) -->
|
||||
<header class="ct-docs-navbar">
|
||||
<a class="ct-docs-navbar-brand" href="javascript:void(0)" aria-label="Bootstrap">
|
||||
</a><a href="https://www.creative-tim.com/" class="ct-docs-navbar-text" target="_blank">
|
||||
Creative Tim
|
||||
</a>
|
||||
<div class="ct-docs-navbar-border"></div>
|
||||
<a href="../../documentation/getting-started/installation.html" class="ct-docs-navbar-text">
|
||||
Docs
|
||||
</a>
|
||||
|
||||
<ul class="ct-docs-navbar-nav-left">
|
||||
<li class="ct-docs-nav-item-dropdown">
|
||||
<a href="javascript:;" class="ct-docs-navbar-nav-link" role="button">
|
||||
<span class="ct-docs-navbar-nav-link-inner--text">Live Preview</span>
|
||||
</a>
|
||||
<div class="ct-docs-navbar-dropdown-menu" aria-labelledby="DropdownPreview">
|
||||
<a class="ct-docs-navbar-dropdown-item" href="https://material-dashboard-laravel.creative-tim.com" target="_blank">
|
||||
Material Dashboard 2 Laravel
|
||||
</a>
|
||||
<a class="ct-docs-navbar-dropdown-item" href="https://material-dashboard-pro-laravel.creative-tim.com" target="_blank">
|
||||
Material Dashboard 2 Pro Laravel
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="ct-docs-nav-item-dropdown">
|
||||
<a href="javascript:;" class="ct-docs-navbar-nav-link" role="button">
|
||||
<span class="ct-docs-navbar-nav-link-inner--text">Support</span>
|
||||
</a>
|
||||
<div class="ct-docs-navbar-dropdown-menu" aria-labelledby="DropdownSupport">
|
||||
<a class="ct-docs-navbar-dropdown-item" href="https://github.com/creativetimofficial/material-dashboard-laravel/issues" target="_blank">
|
||||
Material Dashboard 2 Laravel
|
||||
</a>
|
||||
<a class="ct-docs-navbar-dropdown-item" href="https://github.com/creativetimofficial/ct-material-dashboard-pro-laravel/issues" target="_blank">
|
||||
Material Dashboard 2 Pro Laravel
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="ct-docs-navbar-nav-right">
|
||||
<li class="ct-docs-navbar-nav-item">
|
||||
<a class="ct-docs-navbar-nav-link" href="https://www.creative-tim.com/product/material-dashboard-laravel" target="_blank">Download Free</a>
|
||||
</li>
|
||||
</ul>
|
||||
<a href="https://www.creative-tim.com/product/material-dashboard-pro-laravel" target="_blank" class="ct-docs-btn-upgrade">
|
||||
<span class="ct-docs-btn-inner--icon">
|
||||
<i class="fas fa-download mr-2" aria-hidden="true"></i>
|
||||
</span>
|
||||
<span class="ct-docs-navbar-nav-link-inner--text">Upgrade to PRO</span>
|
||||
</a>
|
||||
<button class="ct-docs-navbar-toggler" type="button">
|
||||
<span class="ct-docs-navbar-toggler-icon"></span>
|
||||
</button>
|
||||
</header>
|
||||
<div class="ct-docs-main-container">
|
||||
<div class="ct-docs-main-content-row">
|
||||
<div class="ct-docs-sidebar-col">
|
||||
<nav class="ct-docs-sidebar-collapse-links">
|
||||
<div class="ct-docs-sidebar-product">
|
||||
<div class="ct-docs-sidebar-product-image">
|
||||
<img src="../../assets/img/bootstrap.png">
|
||||
</div>
|
||||
<p class="ct-docs-sidebar-product-text">Material Dashboard</p>
|
||||
</div>
|
||||
<div class="ct-docs-toc-item-active">
|
||||
<a class="ct-docs-toc-link" href="javascript:void(0)">
|
||||
<div class="d-inline-block">
|
||||
<div class="icon icon-xs border-radius-md bg-gradient-primary text-center mr-2 d-flex align-items-center justify-content-center me-1">
|
||||
<i class="ni ni-active-40 text-white"></i>
|
||||
</div>
|
||||
</div>
|
||||
Getting started
|
||||
</a>
|
||||
<ul class="ct-docs-nav-sidenav ms-4 ps-1">
|
||||
<li class="">
|
||||
<a href="../../documentation/getting-started/overview.html">
|
||||
Overview
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/getting-started/license.html">
|
||||
License
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/getting-started/installation.html">
|
||||
Installation
|
||||
</a>
|
||||
</li>
|
||||
<li class="ct-docs-nav-sidenav-active">
|
||||
<a href="../../documentation/getting-started/build-tools.html">
|
||||
Build Tools
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/getting-started/bootstrap.html">
|
||||
What is Bootstrap
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ct-docs-toc-item-active">
|
||||
<a class="ct-docs-toc-link" href="javascript:void(0)">
|
||||
<div class="d-inline-block">
|
||||
<div class="icon icon-xs border-radius-md bg-gradient-primary text-center mr-2 d-flex align-items-center justify-content-center me-1">
|
||||
<i class="ni ni-folder-17 text-white"></i>
|
||||
</div>
|
||||
</div>
|
||||
Laravel
|
||||
</a>
|
||||
<ul class="ct-docs-nav-sidenav ms-4 ps-1">
|
||||
<li class="">
|
||||
<a href="../../documentation/laravel/login.html">
|
||||
Login
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/laravel/sign-up.html">
|
||||
Sign Up
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/laravel/forgot-password.html">
|
||||
Forgot Password
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/laravel/user-profile.html">
|
||||
User Profile
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/laravel/user-management.html">
|
||||
User Management
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ct-docs-toc-item-active">
|
||||
<a class="ct-docs-toc-link" href="javascript:void(0)">
|
||||
<div class="d-inline-block">
|
||||
<div class="icon icon-xs border-radius-md bg-gradient-primary text-center mr-2 d-flex align-items-center justify-content-center me-1">
|
||||
<i class="ni ni-folder-17 text-white"></i>
|
||||
</div>
|
||||
</div>
|
||||
Foundation
|
||||
</a>
|
||||
<ul class="ct-docs-nav-sidenav ms-4 ps-1">
|
||||
<li class=" ct-docs-nav-sidenav ">
|
||||
<a href="../../documentation/foundation/colors.html">
|
||||
Colors
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/foundation/grid.html">
|
||||
Grid
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/foundation/typography.html">
|
||||
Typography
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/foundation/icons.html">
|
||||
Icons
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/foundation/utilities.html">
|
||||
Utilities
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ct-docs-toc-item-active">
|
||||
<a class="ct-docs-toc-link" href="javascript:void(0)">
|
||||
<div class="d-inline-block">
|
||||
<div class="icon icon-xs border-radius-md bg-gradient-primary text-center mr-2 d-flex align-items-center justify-content-center me-1">
|
||||
<i class="ni ni-app text-white"></i>
|
||||
</div>
|
||||
</div>
|
||||
Components
|
||||
</a>
|
||||
<ul class="ct-docs-nav-sidenav ms-4 ps-1">
|
||||
<li class="">
|
||||
<a href="../../documentation/components/alerts.html">
|
||||
Alerts
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/badge.html">
|
||||
Badge
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/buttons.html">
|
||||
Buttons
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/social-buttons.html">
|
||||
Social Buttons
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/cards.html">
|
||||
Cards
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/carousel.html">
|
||||
Carousel
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/collapse.html">
|
||||
Collapse
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/dropdowns.html">
|
||||
Dropdowns
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/forms.html">
|
||||
Forms
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/input-group.html">
|
||||
Input Group
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/list-group.html">
|
||||
List Group
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/modal.html">
|
||||
Modal
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/navs.html">
|
||||
Navs
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/navbar.html">
|
||||
Navbar
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/pagination.html">
|
||||
Pagination
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/popovers.html">
|
||||
Popovers
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/progress.html">
|
||||
Progress
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/spinners.html">
|
||||
Spinners
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/tables.html">
|
||||
Tables
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/tooltips.html">
|
||||
Tooltips
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ct-docs-toc-item-active">
|
||||
<a class="ct-docs-toc-link" href="javascript:void(0)">
|
||||
<div class="d-inline-block">
|
||||
<div class="icon icon-xs border-radius-md bg-gradient-primary text-center mr-2 d-flex align-items-center justify-content-center me-1">
|
||||
<i class="ni ni-settings text-white"></i>
|
||||
</div>
|
||||
</div>
|
||||
Plugins
|
||||
</a>
|
||||
<ul class="ct-docs-nav-sidenav ms-4 ps-1">
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/countUpJs.html">
|
||||
CountUp JS
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/charts.html">
|
||||
Charts
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/datepicker.html">
|
||||
Datepicker
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/fullcalendar.html">
|
||||
Fullcalendar
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/sliders.html">
|
||||
Sliders
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/choices.html">
|
||||
Choices
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/dropzone.html">
|
||||
Dropzone
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/datatables.html">
|
||||
Datatables
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/kanban.html">
|
||||
Kanban
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/photo-swipe.html">
|
||||
Photo Swipe
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/quill.html">
|
||||
Quill
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/sweet-alerts.html">
|
||||
Sweet Alerts
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/wizard.html">
|
||||
Wizard
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="ct-docs-toc-col">
|
||||
<ul class="section-nav">
|
||||
<li class="toc-entry toc-h2"><a href="#using-gulp">Using Gulp</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#autoprefixer">Autoprefixer</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#troubleshooting">Troubleshooting</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<main class="ct-docs-content-col" role="main">
|
||||
<div class="ct-docs-page-title">
|
||||
<h1 class="ct-docs-page-h1-title" id="content">
|
||||
Build tools
|
||||
</h1>
|
||||
<div class="avatar-group mt-3">
|
||||
</div>
|
||||
</div>
|
||||
<p class="ct-docs-page-title-lead">Learn how to use Material Dashboard’s included npm scripts to start a local server, compile source scss code, run tests, and more.</p>
|
||||
<hr class="ct-docs-hr">
|
||||
<p>Bootstrap uses <a href="https://docs.npmjs.com/misc/scripts" rel="nofollow">NPM scripts</a> for its build system. Our package.json includes convenient methods for working with the framework, including compiling code, running tests, and more.</p>
|
||||
<p>To use our build system and use Sass to customize your website you’ll need a copy of Material Dashboard source files and Node. Follow these steps and you should be ready to rock:</p>
|
||||
<ol>
|
||||
<li><a href="https://nodejs.org/en/download/" rel="nofollow">Download and install Node.js</a>, which we use to manage our dependencies.</li>
|
||||
<li>Navigate to the root <code class=" highlighter-rouge language-plaintext">/</code> directory and run <code class=" highlighter-rouge language-plaintext">npm install</code> to install our local dependencies.</li>
|
||||
</ol>
|
||||
<p>When completed, you’ll be able to run the various commands provided from the command line.</p>
|
||||
<h2 id="using-gulp">Using Gulp</h2>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Task</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code class=" highlighter-rouge language-plaintext">gulp open-app</code></td>
|
||||
<td>for opening the Presentation Page (default) of the product. You can set in gulpfile.js from your downloaded archive any page you want to open in browser, at line 30: gulp.src(‘index.html’).</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code class=" highlighter-rouge language-plaintext">gulp compile-scss</code></td>
|
||||
<td>for a single compilation</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code class=" highlighter-rouge language-plaintext">gulp watch</code></td>
|
||||
<td>for continous compilation of the changes that you make in *.scss files. This command should be run in the same folder where gulpfile.js and package.json are located.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h2 id="autoprefixer">Autoprefixer</h2>
|
||||
<p><b>Material Dashboard</b> uses <a href="https://github.com/postcss/autoprefixer">Autoprefixer</a> (included in our build process) to automatically add vendor prefixes to some CSS properties at build time. Doing so saves us time and code by allowing us to write key parts of our CSS a single time while eliminating the need for vendor mixins like those found in v3.</p>
|
||||
<h2 id="troubleshooting">Troubleshooting</h2>
|
||||
<p>Should you encounter problems with installing dependencies, uninstall all previous dependency versions (global and local). Then, rerun <code class=" highlighter-rouge language-plaintext">npm install</code>.</p>
|
||||
</main>
|
||||
</div>
|
||||
<div class="ct-docs-main-footer-row">
|
||||
<div class="ct-docs-main-footer-blank-col">
|
||||
</div>
|
||||
<div class="ct-docs-main-footer-col">
|
||||
<footer class="ct-docs-footer">
|
||||
<div class="ct-docs-footer-inner-row">
|
||||
<div class="ct-docs-footer-col">
|
||||
<div class="ct-docs-footer-copyright">
|
||||
© <script>
|
||||
document.write(new Date().getFullYear())
|
||||
</script> <a href="https://creative-tim.com" class="ct-docs-footer-copyright-author" target="_blank">Creative Tim</a> & <a href="https://www.updivision.com" class="ct-docs-footer-copyright-author" target="_blank">UPDIVISION</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ct-docs-footer-col">
|
||||
<ul class="ct-docs-footer-nav-footer">
|
||||
<li>
|
||||
<a href="https://creative-tim.com" class="ct-docs-footer-nav-link" target="_blank">Creative Tim</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="https://www.updivision.com" class="ct-docs-footer-nav-link" target="_blank">UPDIVISION</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://www.creative-tim.com/contact-us" class="ct-docs-footer-nav-link" target="_blank">Contact Us</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://creative-tim.com/blog" class="ct-docs-footer-nav-link" target="_blank">Blog</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="../../assets/js/jquery.min.js" type="text/javascript"></script>
|
||||
<script src="../../assets/js/core/popper.min.js" type="text/javascript"></script>
|
||||
<script src="../../assets/js/core/bootstrap.bundle.min.js" type="text/javascript"></script>
|
||||
<script src="" type="text/javascript"></script>
|
||||
<script src="" type="text/javascript"></script>
|
||||
<script src="" type="text/javascript"></script>
|
||||
<script src="" type="text/javascript"></script>
|
||||
<script src="../../assets/js/prism.js" type="text/javascript"></script>
|
||||
<script src="../../assets/js/docs.min.js" type="text/javascript"></script>
|
||||
<script src="../../assets/js/holder.min.js" type="text/javascript"></script>
|
||||
<script src="../../assets/js/moment.min.js" type="text/javascript"></script>
|
||||
<script src="../../assets/js/material-dashboard.min.js" type="text/javascript"></script>
|
||||
<script>
|
||||
Holder.addTheme('gray', {
|
||||
bg: '#777',
|
||||
fg: 'rgba(255,255,255,.75)',
|
||||
font: 'Helvetica',
|
||||
fontweight: 'normal'
|
||||
})
|
||||
</script>
|
||||
<script>
|
||||
// Facebook Pixel Code Don't Delete
|
||||
! function(f, b, e, v, n, t, s) {
|
||||
if (f.fbq) return;
|
||||
n = f.fbq = function() {
|
||||
n.callMethod ?
|
||||
n.callMethod.apply(n, arguments) : n.queue.push(arguments)
|
||||
};
|
||||
if (!f._fbq) f._fbq = n;
|
||||
n.push = n;
|
||||
n.loaded = !0;
|
||||
n.version = '2.0';
|
||||
n.queue = [];
|
||||
t = b.createElement(e);
|
||||
t.async = !0;
|
||||
t.src = v;
|
||||
s = b.getElementsByTagName(e)[0];
|
||||
s.parentNode.insertBefore(t, s)
|
||||
}(window,
|
||||
document, 'script', '//connect.facebook.net/en_US/fbevents.js');
|
||||
|
||||
try {
|
||||
fbq('init', '111649226022273');
|
||||
fbq('track', "PageView");
|
||||
|
||||
} catch (err) {
|
||||
console.log('Facebook Track Error:', err);
|
||||
}
|
||||
</script>
|
||||
<script src="../../assets/js/docs.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,885 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="apple-touch-icon" sizes="76x76" href="../../assets/img/apple-icon.png">
|
||||
<link rel="icon" href="../../assets/img/favicon.png" type="image/png">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="author" content="Creative Tim">
|
||||
<title>
|
||||
Installation | Material Dashboard 2 FREE Laravel by Creative Tim & UPDIVISION
|
||||
</title>
|
||||
<link rel="canonical" href="https://www.creative-tim.com/learning-lab/bootstrap/colors/material-dashboard" />
|
||||
|
||||
<meta name="keywords" content="creative tim, updivision, html dashboard, laravel, material, html css dashboard laravel, material dashboard laravel, laravel material dashboard, material admin, laravel dashboard, laravel admin, web dashboard, bootstrap 5 dashboard laravel, bootstrap 5, css3 dashboard, bootstrap 5 admin laravel, material dashboard bootstrap 5 laravel, frontend, responsive bootstrap 5 dashboard, material dashboard, material laravel bootstrap 5 dashboard" />
|
||||
<meta name="description" content="A free Laravel Dashboard featuring dozens of UI components & basic Laravel CRUDs." />
|
||||
<meta itemprop="name" content="Material Dashboard 2 Laravel by Creative Tim & UPDIVISION" />
|
||||
<meta itemprop="description" content="A free Laravel Dashboard featuring dozens of UI components & basic Laravel CRUDs." />
|
||||
<meta itemprop="image" content="https://s3.amazonaws.com/creativetim_bucket/products/598/original/material-dashboard-laravel.jpg" />
|
||||
<meta name="twitter:card" content="product" />
|
||||
<meta name="twitter:site" content="@creativetim" />
|
||||
<meta name="twitter:title" content="Material Dashboard 2 Laravel by Creative Tim & UPDIVISION" />
|
||||
<meta name="twitter:description" content="A free Laravel Dashboard featuring dozens of UI components & basic Laravel CRUDs." />
|
||||
<meta name="twitter:creator" content="@creativetim" />
|
||||
<meta name="twitter:image" content="https://s3.amazonaws.com/creativetim_bucket/products/598/original/material-dashboard-laravel.jpg" />
|
||||
<meta property="fb:app_id" content="655968634437471" />
|
||||
<meta property="og:title" content="Material Dashboard 2 Laravel by Creative Tim & UPDIVISION" />
|
||||
<meta property="og:type" content="article" />
|
||||
<meta property="og:url" content="https://www.creative-tim.com/live/material-dashboard-laravel" />
|
||||
<meta property="og:image" content="https://s3.amazonaws.com/creativetim_bucket/products/598/original/material-dashboard-laravel.jpg" />
|
||||
<meta property="og:description" content="A free Laravel Dashboard featuring dozens of UI components & basic Laravel CRUDs." />
|
||||
<meta property="og:site_name" content="Creative Tim" />
|
||||
|
||||
<link rel="stylesheet" href="../../assets/css/nucleo-icons.css" type="text/css">
|
||||
|
||||
<link rel="stylesheet" href="../../assets/css/nextjs-material-dashboard-pro.min.css" type="text/css">
|
||||
|
||||
<link rel="stylesheet" href="../../assets/css/material-dashboard.min.css" type="text/css">
|
||||
<link rel="stylesheet" href="../../assets/css/demo.css" type="text/css">
|
||||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Round" rel="stylesheet">
|
||||
|
||||
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700" rel="stylesheet">
|
||||
|
||||
<link href="../../assets/css/nucleo-icons.css" rel="stylesheet">
|
||||
|
||||
<script src="https://kit.fontawesome.com/42d5adcbca.js" crossorigin="anonymous"></script>
|
||||
<!-- Anti-flicker snippet (recommended) -->
|
||||
<style>
|
||||
.async-hide {
|
||||
opacity: 0 !important
|
||||
}
|
||||
|
||||
</style>
|
||||
<script>
|
||||
(function (a, s, y, n, c, h, i, d, e) {
|
||||
s.className += ' ' + y;
|
||||
h.start = 1 * new Date;
|
||||
h.end = i = function () {
|
||||
s.className = s.className.replace(RegExp(' ?' + y), '')
|
||||
};
|
||||
(a[n] = a[n] || []).hide = h;
|
||||
setTimeout(function () {
|
||||
i();
|
||||
h.end = null
|
||||
}, c);
|
||||
h.timeout = c;
|
||||
})(window, document.documentElement, 'async-hide', 'dataLayer', 4000, {
|
||||
'GTM-K9BGS8K': true
|
||||
});
|
||||
|
||||
</script>
|
||||
<!-- Analytics-Optimize Snippet -->
|
||||
<script>
|
||||
(function (i, s, o, g, r, a, m) {
|
||||
i['GoogleAnalyticsObject'] = r;
|
||||
i[r] = i[r] || function () {
|
||||
(i[r].q = i[r].q || []).push(arguments)
|
||||
}, i[r].l = 1 * new Date();
|
||||
a = s.createElement(o),
|
||||
m = s.getElementsByTagName(o)[0];
|
||||
a.async = 1;
|
||||
a.src = g;
|
||||
m.parentNode.insertBefore(a, m)
|
||||
})(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
|
||||
ga('create', 'UA-46172202-22', 'auto', {
|
||||
allowLinker: true
|
||||
});
|
||||
ga('set', 'anonymizeIp', true);
|
||||
ga('require', 'GTM-K9BGS8K');
|
||||
ga('require', 'displayfeatures');
|
||||
ga('require', 'linker');
|
||||
ga('linker:autoLink', ["2checkout.com", "avangate.com"]);
|
||||
|
||||
</script>
|
||||
<!-- end Analytics-Optimize Snippet -->
|
||||
<!-- Google Tag Manager -->
|
||||
<script>
|
||||
(function (w, d, s, l, i) {
|
||||
w[l] = w[l] || [];
|
||||
w[l].push({
|
||||
'gtm.start': new Date().getTime(),
|
||||
event: 'gtm.js'
|
||||
});
|
||||
var f = d.getElementsByTagName(s)[0],
|
||||
j = d.createElement(s),
|
||||
dl = l != 'dataLayer' ? '&l=' + l : '';
|
||||
j.async = true;
|
||||
j.src =
|
||||
'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
|
||||
f.parentNode.insertBefore(j, f);
|
||||
})(window, document, 'script', 'dataLayer', 'GTM-NKDMSK6');
|
||||
|
||||
</script>
|
||||
<!-- End Google Tag Manager -->
|
||||
<!-- This is for docs typography and layout -->
|
||||
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet">
|
||||
<link href="../../assets/css/docs.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
||||
<body class="docs ">
|
||||
<!-- Google Tag Manager (noscript) -->
|
||||
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-NKDMSK6" height="0" width="0"
|
||||
style="display:none;visibility:hidden"></iframe></noscript>
|
||||
<!-- End Google Tag Manager (noscript) -->
|
||||
<header class="ct-docs-navbar">
|
||||
<a class="ct-docs-navbar-brand" href="javascript:void(0)" aria-label="Bootstrap">
|
||||
</a><a href="https://www.creative-tim.com/" class="ct-docs-navbar-text" target="_blank">
|
||||
Creative Tim
|
||||
</a>
|
||||
<div class="ct-docs-navbar-border"></div>
|
||||
<a href="../../documentation/getting-started/installation.html" class="ct-docs-navbar-text">
|
||||
Docs
|
||||
</a>
|
||||
|
||||
<ul class="ct-docs-navbar-nav-left">
|
||||
<li class="ct-docs-nav-item-dropdown">
|
||||
<a href="javascript:;" class="ct-docs-navbar-nav-link" role="button">
|
||||
<span class="ct-docs-navbar-nav-link-inner--text">Live Preview</span>
|
||||
</a>
|
||||
<div class="ct-docs-navbar-dropdown-menu" aria-labelledby="DropdownPreview">
|
||||
<a class="ct-docs-navbar-dropdown-item" href="https://material-dashboard-laravel.creative-tim.com" target="_blank">
|
||||
Material Dashboard 2 Laravel
|
||||
</a>
|
||||
<a class="ct-docs-navbar-dropdown-item" href="https://material-dashboard-pro-laravel.creative-tim.com" target="_blank">
|
||||
Material Dashboard 2 Pro Laravel
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="ct-docs-nav-item-dropdown">
|
||||
<a href="javascript:;" class="ct-docs-navbar-nav-link" role="button">
|
||||
<span class="ct-docs-navbar-nav-link-inner--text">Support</span>
|
||||
</a>
|
||||
<div class="ct-docs-navbar-dropdown-menu" aria-labelledby="DropdownSupport">
|
||||
<a class="ct-docs-navbar-dropdown-item" href="https://github.com/creativetimofficial/material-dashboard-laravel/issues" target="_blank">
|
||||
Material Dashboard 2 Laravel
|
||||
</a>
|
||||
<a class="ct-docs-navbar-dropdown-item" href="https://github.com/creativetimofficial/ct-material-dashboard-pro-laravel/issues" target="_blank">
|
||||
Material Dashboard 2 Pro Laravel
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="ct-docs-navbar-nav-right">
|
||||
<li class="ct-docs-navbar-nav-item">
|
||||
<a class="ct-docs-navbar-nav-link" href="https://www.creative-tim.com/product/material-dashboard-laravel" target="_blank">Download Free</a>
|
||||
</li>
|
||||
</ul>
|
||||
<a href="https://www.creative-tim.com/product/material-dashboard-pro-laravel" target="_blank" class="ct-docs-btn-upgrade">
|
||||
<span class="ct-docs-btn-inner--icon">
|
||||
<i class="fas fa-download mr-2" aria-hidden="true"></i>
|
||||
</span>
|
||||
<span class="ct-docs-navbar-nav-link-inner--text">Upgrade to PRO</span>
|
||||
</a>
|
||||
<button class="ct-docs-navbar-toggler" type="button">
|
||||
<span class="ct-docs-navbar-toggler-icon"></span>
|
||||
</button>
|
||||
</header>
|
||||
<div class="ct-docs-main-container">
|
||||
<div class="ct-docs-main-content-row">
|
||||
<div class="ct-docs-sidebar-col">
|
||||
<nav class="ct-docs-sidebar-collapse-links">
|
||||
<div class="ct-docs-sidebar-product">
|
||||
<div class="ct-docs-sidebar-product-image">
|
||||
<img src="../../assets/img/bootstrap.png">
|
||||
</div>
|
||||
<p class="ct-docs-sidebar-product-text">Material Dashboard</p>
|
||||
</div>
|
||||
<div class="ct-docs-toc-item-active">
|
||||
<a class="ct-docs-toc-link" href="javascript:void(0)">
|
||||
<div class="d-inline-block">
|
||||
<div class="icon icon-xs border-radius-md bg-gradient-primary text-center mr-2 d-flex align-items-center justify-content-center me-1">
|
||||
<i class="ni ni-active-40 text-white"></i>
|
||||
</div>
|
||||
</div>
|
||||
Getting started
|
||||
</a>
|
||||
<ul class="ct-docs-nav-sidenav ms-4 ps-1">
|
||||
<li class="">
|
||||
<a href="../../documentation/getting-started/overview.html">
|
||||
Overview
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/getting-started/license.html">
|
||||
License
|
||||
</a>
|
||||
</li>
|
||||
<li class="ct-docs-nav-sidenav-active">
|
||||
<a href="../../documentation/getting-started/installation.html">
|
||||
installation
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/getting-started/build-tools.html">
|
||||
Build Tools
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/getting-started/bootstrap.html">
|
||||
What is Bootstrap
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ct-docs-toc-item-active">
|
||||
<a class="ct-docs-toc-link" href="javascript:void(0)">
|
||||
<div class="d-inline-block">
|
||||
<div class="icon icon-xs border-radius-md bg-gradient-primary text-center mr-2 d-flex align-items-center justify-content-center me-1">
|
||||
<i class="ni ni-folder-17 text-white"></i>
|
||||
</div>
|
||||
</div>
|
||||
Laravel
|
||||
</a>
|
||||
<ul class="ct-docs-nav-sidenav ms-4 ps-1">
|
||||
<li class="">
|
||||
<a href="../../documentation/laravel/login.html">
|
||||
Login
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/laravel/sign-up.html">
|
||||
Sign Up
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/laravel/forgot-password.html">
|
||||
Forgot Password
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/laravel/user-profile.html">
|
||||
User Profile
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/laravel/user-management.html">
|
||||
User Management
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ct-docs-toc-item-active">
|
||||
<a class="ct-docs-toc-link" href="javascript:void(0)">
|
||||
<div class="d-inline-block">
|
||||
<div class="icon icon-xs border-radius-md bg-gradient-primary text-center mr-2 d-flex align-items-center justify-content-center me-1">
|
||||
<i class="ni ni-folder-17 text-white"></i>
|
||||
</div>
|
||||
</div>
|
||||
Foundation
|
||||
</a>
|
||||
<ul class="ct-docs-nav-sidenav ms-4 ps-1">
|
||||
<li class=" ct-docs-nav-sidenav ">
|
||||
<a href="../../documentation/foundation/colors.html">
|
||||
Colors
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/foundation/grid.html">
|
||||
Grid
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/foundation/typography.html">
|
||||
Typography
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/foundation/icons.html">
|
||||
Icons
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/foundation/utilities.html">
|
||||
Utilities
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ct-docs-toc-item-active">
|
||||
<a class="ct-docs-toc-link" href="javascript:void(0)">
|
||||
<div class="d-inline-block">
|
||||
<div class="icon icon-xs border-radius-md bg-gradient-primary text-center mr-2 d-flex align-items-center justify-content-center me-1">
|
||||
<i class="ni ni-app text-white"></i>
|
||||
</div>
|
||||
</div>
|
||||
Components
|
||||
</a>
|
||||
<ul class="ct-docs-nav-sidenav ms-4 ps-1">
|
||||
<li class="">
|
||||
<a href="../../documentation/components/alerts.html">
|
||||
Alerts
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/badge.html">
|
||||
Badge
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/buttons.html">
|
||||
Buttons
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/social-buttons.html">
|
||||
Social Buttons
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/cards.html">
|
||||
Cards
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/carousel.html">
|
||||
Carousel
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/collapse.html">
|
||||
Collapse
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/dropdowns.html">
|
||||
Dropdowns
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/forms.html">
|
||||
Forms
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/input-group.html">
|
||||
Input Group
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/list-group.html">
|
||||
List Group
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/modal.html">
|
||||
Modal
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/navs.html">
|
||||
Navs
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/navbar.html">
|
||||
Navbar
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/pagination.html">
|
||||
Pagination
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/popovers.html">
|
||||
Popovers
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/progress.html">
|
||||
Progress
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/spinners.html">
|
||||
Spinners
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/tables.html">
|
||||
Tables
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/tooltips.html">
|
||||
Tooltips
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ct-docs-toc-item-active">
|
||||
<a class="ct-docs-toc-link" href="javascript:void(0)">
|
||||
<div class="d-inline-block">
|
||||
<div class="icon icon-xs border-radius-md bg-gradient-primary text-center mr-2 d-flex align-items-center justify-content-center me-1">
|
||||
<i class="ni ni-settings text-white"></i>
|
||||
</div>
|
||||
</div>
|
||||
Plugins
|
||||
</a>
|
||||
<ul class="ct-docs-nav-sidenav ms-4 ps-1">
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/countUpJs.html">
|
||||
CountUp JS
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/charts.html">
|
||||
Charts
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/datepicker.html">
|
||||
Datepicker
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/fullcalendar.html">
|
||||
Fullcalendar
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/sliders.html">
|
||||
Sliders
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/choices.html">
|
||||
Choices
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/dropzone.html">
|
||||
Dropzone
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/datatables.html">
|
||||
Datatables
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/kanban.html">
|
||||
Kanban
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/photo-swipe.html">
|
||||
Photo Swipe
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/quill.html">
|
||||
Quill
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/sweet-alerts.html">
|
||||
Sweet Alerts
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/wizard.html">
|
||||
Wizard
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="ct-docs-toc-col">
|
||||
<ul class="section-nav">
|
||||
<li class="toc-entry toc-h2">
|
||||
<a href="#prerequisites">Prerequisites</a>
|
||||
</li>
|
||||
<li class="toc-entry toc-h2">
|
||||
<a href="#installation">Installation</a>
|
||||
</li>
|
||||
<li class="toc-entry toc-h2">
|
||||
<a href="#usage">Usage</a>
|
||||
</li>
|
||||
<li class="toc-entry toc-h2"><a href="#tooling-setup">Tooling setup</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#bootstrap-cdn">Bootstrap CDN</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#css">CSS</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#js">JS</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#dark-mode">Dark mode</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#bootstrap-starter-template">Bootstrap starter template</a>
|
||||
</li>
|
||||
<li class="toc-entry toc-h2"><a href="#important-globals">Important globals</a>
|
||||
<ul>
|
||||
<li class="toc-entry toc-h3"><a href="#html5-doctype">HTML5 doctype</a></li>
|
||||
<li class="toc-entry toc-h3"><a href="#responsive-meta-tag">Responsive meta tag</a></li>
|
||||
<li class="toc-entry toc-h3"><a href="#bootstrap-components">Bootstrap components</a></li>
|
||||
<li class="toc-entry toc-h3"><a href="#bootstrap-tutorial">Bootstrap tutorial</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<main class="ct-docs-content-col" role="main">
|
||||
<div class="ct-docs-page-title">
|
||||
<h1 class="ct-docs-page-h1-title" id="content">
|
||||
Installation
|
||||
</h1>
|
||||
<div class="avatar-group mt-3">
|
||||
</div>
|
||||
</div>
|
||||
<p class="ct-docs-page-title-lead">To start using this dashboard you will need to import some files in
|
||||
your current project or start from scratch using our template (scroll down in this page to view it).
|
||||
</p>
|
||||
<hr class="ct-docs-hr">
|
||||
<h2 id="prerequisites">Prerequisites</h2>
|
||||
<p>
|
||||
If you don't already have an Apache local environment
|
||||
with PHP and MySQL, use one of the following links:
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
Windows
|
||||
<a
|
||||
href="https://updivision.com/blog/post/beginner-s-guide-to-setting-up-your-local-development-environment-on-windows">https://updivision.com/blog/post/beginner-s-guide-to-setting-up-your-local-development-environment-on-windows</a>
|
||||
</li>
|
||||
<li>
|
||||
Linux
|
||||
<a
|
||||
href="https://howtoubuntu.org/how-to-install-lamp-on-ubuntu">https://howtoubuntu.org/how-to-install-lamp-on-ubuntu</a>
|
||||
</li>
|
||||
<li>
|
||||
Mac
|
||||
<a href=" https://wpshout.com/quick-guides/how-to-install-mamp-on-your-mac/">
|
||||
https://wpshout.com/quick-guides/how-to-install-mamp-on-your-mac/</a>
|
||||
</li>
|
||||
</ul>
|
||||
<p>
|
||||
Also, you will need to install Composer:
|
||||
<a href="https://getcomposer.org/doc/00-intro.md">https://getcomposer.org/doc/00-intro.md</a>
|
||||
</p>
|
||||
<p>
|
||||
And Laravel:
|
||||
<a href="https://laravel.com/docs/9.x/installation">https://laravel.com/docs/9.x/installation</a>
|
||||
</p>
|
||||
|
||||
<h2 id="installation">Installation</h2>
|
||||
<h3>Via Composer</h3>
|
||||
<ol>
|
||||
<li><b>Cd</b> to your Laravel app</li>
|
||||
<li>
|
||||
Type in your terminal: <code class="language-html">composer require laravel/ui</code> and <code class="language-html">php artisan ui vue --auth</code>.
|
||||
</li>
|
||||
<li>
|
||||
Install this preset via
|
||||
<code class="language-html">composer require laravel-frontend-presets/material</code>. No need to register the service provider. Laravel 9.x & up can auto detect the package.
|
||||
</li>
|
||||
<li>
|
||||
Run
|
||||
<code class="language-html">php artisan ui material</code> command to install the Argon preset. This will install all the necessary assets and also the custom auth views, it will also add the auth route in
|
||||
<code class="language-html">routes/web.php</code> (NOTE: If you run this command several times, be sure to clean up the duplicate Auth entries in routes/web.php)
|
||||
</li>
|
||||
<li>
|
||||
In your terminal run
|
||||
<code class="language-html">composer dump-autoload</code>
|
||||
</li>
|
||||
<li>
|
||||
Add your DB info in
|
||||
<code class="language-html">.env</code>
|
||||
</li>
|
||||
<li>
|
||||
Run
|
||||
<code class="language-html">php artisan migrate:fresh --seed
|
||||
</code>
|
||||
to create basic users table
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
<h3>By using the archive</h3>
|
||||
<ol>
|
||||
<li>In your application's root create a <b>presets</b> folder</li>
|
||||
<li>Download the archive of the repo and unzip it</li>
|
||||
<li>Copy and paste the downloaded folder in presets (created in step 2) and rename it to material</li>
|
||||
<li>Open <code class="language-html">composer.json</code></li>
|
||||
<li>
|
||||
Add <code class="language-html">"LaravelFrontendPresets\\MaterialPreset\\": "presets/material/src"</code> to
|
||||
<code class="language-html">autoload/psr-4</code> and to <code class="language-html">autoload-dev/psr-4</code>.
|
||||
</li>
|
||||
<li>
|
||||
Add <code class="language-html">LaravelFrontendPresets\MaterialPreset\MaterialPresetServiceProvider::class</code> to
|
||||
<code class="language-html">config/app.php</code>.
|
||||
</li>
|
||||
<li>
|
||||
Type in your terminal: <code class="language-html">composer require laravel/ui</code> and <code class="language-html">php artisan ui vue --auth</code>.
|
||||
</li>
|
||||
<li>
|
||||
In your terminal run
|
||||
<code class="language-html">composer dump-autoload</code>
|
||||
</li>
|
||||
<li>
|
||||
Run
|
||||
<code class="language-html">php artisan ui material</code> command to install the Argon preset. This will install all the necessary assets and also the custom auth views, it will also add the auth route in
|
||||
<code class="language-html">routes/web.php</code> (NOTE: If you run this command several times, be sure to clean up the duplicate Auth entries in routes/web.php)
|
||||
</li>
|
||||
<li>
|
||||
Add your DB info in
|
||||
<code class="language-html">.env</code>
|
||||
</li>
|
||||
<li>
|
||||
Run
|
||||
<code class="language-html">php artisan migrate:fresh --seed
|
||||
</code>
|
||||
to create basic users table
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
<h2 id="usage">Usage</h2>
|
||||
<p>
|
||||
Register an user or login with data from your database and start testing (make sure to run the
|
||||
migrations and seeders for the credentials to be available).
|
||||
</p>
|
||||
<p>
|
||||
|
||||
Besides the dashboard, the auth pages, the billing and tables pages, it has also an edit profile
|
||||
page. All the necessary files are installed out of the box and all the needed routes are added to
|
||||
<code class="language-html">routes/web.php</code>. Keep in mind that all of the features can be
|
||||
viewed once you login using the credentials provided or by registering your own user.
|
||||
</p>
|
||||
<h2 id="tooling-setup">Tooling setup</h2>
|
||||
<h2 id="bootstrap-cdn">Bootstrap CDN</h2>
|
||||
<p>Skip the download with <a href="https://www.bootstrapcdn.com/" target="_blank"
|
||||
rel="nofollow">BootstrapCDN</a> to deliver cached version of Bootstrap’s compiled CSS and JS to
|
||||
your project.</p>
|
||||
<figure class="highlight">
|
||||
<pre><code class="language-html" data-lang="html"><span class="c"><!-- CSS only --></span>
|
||||
<span class="nt"><link</span> <span class="na">href=</span><span class="s">"https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="89ebe6e6fdfafdfbe8f9c9bca7b8a7b9">[email protected]</a>/dist/css/bootstrap.min.css"</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">integrity=</span><span class="s">"sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0"</span> <span class="na">crossorigin=</span><span class="s">"anonymous"</span><span class="nt">></span>
|
||||
<span class="c"><!-- JavaScript Bundle with Popper --></span>
|
||||
<span class="nt"><script </span><span class="na">src=</span><span class="s">"https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a2c0cdcdd6d1d6d0c3d2e2978c938c92">[email protected]</a>/dist/js/bootstrap.bundle.min.js"</span> <span class="na">integrity=</span><span class="s">"sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8"</span> <span class="na">crossorigin=</span><span class="s">"anonymous"</span><span class="nt">></script></span></code></pre>
|
||||
</figure>
|
||||
<h2 id="css">CSS</h2>
|
||||
<p>Copy-paste the stylesheet <code class="language-plaintext highlighter-rouge"><link></code> into
|
||||
your <code class="language-plaintext highlighter-rouge"><head></code> before all other
|
||||
stylesheets to load our CSS.</p>
|
||||
<figure class="highlight">
|
||||
<pre><code class="language-html" data-lang="html"><span class="c"><!-- Fonts --></span>
|
||||
<span class="nt"><link</span> <span class="na">href=</span><span class="s">"https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700"</span> <span class="na">rel=</span><span class="s">"stylesheet"</span><span class="nt">></span>
|
||||
|
||||
<span class="c"><!-- Icons --></span>
|
||||
<span class="nt"><link</span> <span class="na">href=</span><span class="s">"../assets/css/nucleo-icons.css"</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="nt">/></span>
|
||||
<span class="nt"><link</span> <span class="na">href=</span><span class="s">"../assets/css/nucleo-svg.css"</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="nt">/></span>
|
||||
|
||||
<span class="c"><!-- Font Awesome Icons --></span>
|
||||
<span class="nt"><script </span><span class="na">src=</span><span class="s">"https://kit.fontawesome.com/42d5adcbca.js"</span> <span class="na">crossorigin=</span><span class="s">"anonymous"</span><span class="nt">></script></span>
|
||||
|
||||
<span class="c"><!-- CSS Files --></span>
|
||||
<span class="nt"><link</span> <span class="na">id=</span><span class="s">"pagestyle"</span> <span class="na">href=</span><span class="s">"../assets/css/material-dashboard.css"</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="nt">/></span></code></pre>
|
||||
</figure>
|
||||
<h2 id="js">JS</h2>
|
||||
<p>Many of our components require the use of JavaScript to function. Specifically , <a
|
||||
href="https://popper.js.org/" rel="nofollow">Popper.js</a>, and our own JavaScript plugins.
|
||||
Place the following <code class="language-plaintext highlighter-rouge"><script></code>s near
|
||||
the end of your pages, right before the closing <code
|
||||
class="language-plaintext highlighter-rouge"></body></code> tag, to enable them. Popper.js
|
||||
must come and then our JavaScript plugins.</p>
|
||||
<figure class="highlight">
|
||||
<pre><code class="language-html" data-lang="html"><span class="c"><!-- Core --></span>
|
||||
<span class="nt"><script </span><span class="na">src=</span><span class="s">"../assets/js/core/popper.min.js"</span><span class="nt">></script></span>
|
||||
<span class="nt"><script </span><span class="na">src=</span><span class="s">"../assets/js/core/bootstrap.min.js"</span><span class="nt">></script></span>
|
||||
|
||||
<span class="c"><!-- Theme JS --></span>
|
||||
<span class="nt"><script </span><span class="na">src=</span><span class="s">"../assets/js/material-dashboard.min.js"</span><span class="nt">></script></span></code></pre>
|
||||
</figure>
|
||||
<p>Need to use a certain plugin in your page? You can find out how to integrate them and make them work
|
||||
in the Plugins dedicated page. In this way you will be sure that your website is optimized and uses
|
||||
only the needed resources.</p>
|
||||
<h2 id="dark-mode">Dark mode</h2>
|
||||
<p>Material Dashboard PRO comes in 2 modes: dark & light. To turn on the dark version you need to
|
||||
add <code class="language-plaintext highlighter-rouge">dark-version</code> class on the body tag.
|
||||
</p>
|
||||
<figure class="highlight">
|
||||
<pre><code class="language-html" data-lang="html"><span class="c"><!-- Dark version --></span>
|
||||
<span class="nt"><body</span> <span class="na">class=</span><span class="s">"dark-version"</span><span class="nt">></span>
|
||||
...
|
||||
<span class="nt"></body></span></code></pre>
|
||||
</figure>
|
||||
<h2 id="bootstrap-starter-template">Bootstrap starter template</h2>
|
||||
<p>Be sure to have your pages set up with the latest design and development standards. That means using
|
||||
an HTML5 doctype and including a viewport meta tag for proper responsive behaviors. Put it all
|
||||
together and your pages should look like this:</p>
|
||||
<figure class="highlight">
|
||||
<pre><code class="language-html" data-lang="html"><span class="cp"><!DOCTYPE html></span>
|
||||
<span class="nt"><html</span> <span class="na">lang=</span><span class="s">"en"</span><span class="nt">></span>
|
||||
|
||||
<span class="nt"><head></span>
|
||||
<span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"utf-8"</span> <span class="nt">/></span>
|
||||
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"viewport"</span> <span class="na">content=</span><span class="s">"width=device-width, initial-scale=1, shrink-to-fit=no"</span><span class="nt">></span>
|
||||
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"apple-touch-icon"</span> <span class="na">sizes=</span><span class="s">"76x76"</span> <span class="na">href=</span><span class="s">"../assets/img/apple-icon.png"</span><span class="nt">></span>
|
||||
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"icon"</span> <span class="na">type=</span><span class="s">"image/png"</span> <span class="na">href=</span><span class="s">"../assets/img/favicon.png"</span><span class="nt">></span>
|
||||
<span class="nt"><title></span>
|
||||
Material Dashboard by Creative Tim
|
||||
<span class="nt"></title></span>
|
||||
<span class="c"><!-- Fonts and icons --></span>
|
||||
<span class="nt"><link</span> <span class="na">href=</span><span class="s">"https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700"</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="nt">/></span>
|
||||
<span class="c"><!-- Nucleo Icons --></span>
|
||||
<span class="nt"><link</span> <span class="na">href=</span><span class="s">"../assets/css/nucleo-icons.css"</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="nt">/></span>
|
||||
<span class="nt"><link</span> <span class="na">href=</span><span class="s">"../assets/css/nucleo-svg.css"</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="nt">/></span>
|
||||
<span class="c"><!-- Font Awesome Icons --></span>
|
||||
<span class="nt"><script </span><span class="na">src=</span><span class="s">"https://kit.fontawesome.com/42d5adcbca.js"</span> <span class="na">crossorigin=</span><span class="s">"anonymous"</span><span class="nt">></script></span>
|
||||
<span class="nt"><link</span> <span class="na">href=</span><span class="s">"../assets/css/nucleo-svg.css"</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="nt">/></span>
|
||||
<span class="c"><!-- CSS Files --></span>
|
||||
<span class="nt"><link</span> <span class="na">id=</span><span class="s">"pagestyle"</span> <span class="na">href=</span><span class="s">"../assets/css/material-dashboard.css"</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="nt">/></span>
|
||||
<span class="nt"></head></span>
|
||||
|
||||
<span class="nt"><body</span> <span class="na">class=</span><span class="s">"g-sidenav-show bg-gray-100"</span><span class="nt">></span>
|
||||
|
||||
<span class="nt"><h1></span>Hello, world!<span class="nt"></h1></span>
|
||||
|
||||
<span class="c"><!-- Core JS Files --></span>
|
||||
<span class="nt"><script </span><span class="na">src=</span><span class="s">"../assets/js/core/popper.min.js"</span><span class="nt">></script></span>
|
||||
<span class="nt"><script </span><span class="na">src=</span><span class="s">"../assets/js/core/bootstrap.min.js"</span><span class="nt">></script></span>
|
||||
|
||||
<span class="c"><!-- Plugin for the charts, full documentation here: https://www.chartjs.org/ --></span>
|
||||
<span class="nt"><script </span><span class="na">src=</span><span class="s">"../assets/js/plugins/chartjs.min.js"</span><span class="nt">></script></span>
|
||||
<span class="nt"><script </span><span class="na">src=</span><span class="s">"../assets/js/plugins/Chart.extension.js"</span><span class="nt">></script></span>
|
||||
|
||||
<span class="c"><!-- Control Center for Material Dashboard: parallax effects, scripts for the example pages etc --></span>
|
||||
<span class="nt"><script </span><span class="na">src=</span><span class="s">"../assets/js/material-dashboard.min.js"</span><span class="nt">></script></span>
|
||||
<span class="nt"></body></span>
|
||||
|
||||
<span class="nt"></html></span></code></pre>
|
||||
</figure>
|
||||
<h2 id="important-globals">Important globals</h2>
|
||||
<p>Material Dashboard employs a handful of important global styles and settings that you’ll need to be
|
||||
aware of when using it, all of which are almost exclusively geared towards the
|
||||
<em>normalization</em> of cross browser styles. Let’s dive in.</p>
|
||||
<h3 id="html5-doctype">HTML5 doctype</h3>
|
||||
<p>Bootstrap requires the use of the HTML5 doctype. Without it, you’ll see some funky incomplete
|
||||
styling, but including it shouldn’t cause any considerable hiccups.</p>
|
||||
<figure class="highlight">
|
||||
<pre><code class="language-html" data-lang="html"><span class="cp"><!doctype html></span>
|
||||
<span class="nt"><html</span> <span class="na">lang=</span><span class="s">"en"</span><span class="nt">></span>
|
||||
...
|
||||
<span class="nt"></html></span></code></pre>
|
||||
</figure>
|
||||
<h3 id="responsive-meta-tag">Responsive meta tag</h3>
|
||||
<p>Bootstrap is developed <em>mobile first</em>, a strategy in which we optimize code for mobile devices
|
||||
first and then scale up components as necessary using CSS media queries. To ensure proper rendering
|
||||
and touch zooming for all devices, <strong>add the responsive viewport meta tag</strong> to your
|
||||
<code class="language-plaintext highlighter-rouge"><head></code>.</p>
|
||||
<figure class="highlight">
|
||||
<pre><code class="language-html" data-lang="html"><span class="nt"><meta</span> <span class="na">name=</span><span class="s">"viewport"</span> <span class="na">content=</span><span class="s">"width=device-width, initial-scale=1, shrink-to-fit=no"</span><span class="nt">></span></code></pre>
|
||||
</figure>
|
||||
<p>You can see an example of this in action in the <a href="#starter-template">starter template</a>.</p>
|
||||
<h3 id="bootstrap-components">Bootstrap components</h3>
|
||||
<p>Many of Bootstrap’s components and utilities are built with <code
|
||||
class="language-plaintext highlighter-rouge">@each</code> loops that iterate over a Sass map.
|
||||
This is especially helpful for generating variants of a component by our <code
|
||||
class="language-plaintext highlighter-rouge">$theme-colors</code> and creating responsive
|
||||
variants for each breakpoint. As you customize these Sass maps and recompile, you’ll automatically
|
||||
see your changes reflected in these loops.</p>
|
||||
<h3 id="bootstrap-tutorial">Bootstrap tutorial</h3>
|
||||
<p>Please check our official <a href="https://www.youtube.com/channel/UCVyTG4sCw-rOvB9oHkzZD1w/videos"
|
||||
rel="nofollow" target="_blank">Youtube channel</a> for more tutorials.</p>
|
||||
</main>
|
||||
</div>
|
||||
<div class="ct-docs-main-footer-row">
|
||||
<div class="ct-docs-main-footer-blank-col">
|
||||
</div>
|
||||
<div class="ct-docs-main-footer-col">
|
||||
<footer class="ct-docs-footer">
|
||||
<div class="ct-docs-footer-inner-row">
|
||||
<div class="ct-docs-footer-col">
|
||||
<div class="ct-docs-footer-copyright">
|
||||
© <script>
|
||||
document.write(new Date().getFullYear())
|
||||
</script> <a href="https://creative-tim.com" class="ct-docs-footer-copyright-author" target="_blank">Creative Tim</a> & <a href="https://www.updivision.com" class="ct-docs-footer-copyright-author" target="_blank">UPDIVISION</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ct-docs-footer-col">
|
||||
<ul class="ct-docs-footer-nav-footer">
|
||||
<li>
|
||||
<a href="https://creative-tim.com" class="ct-docs-footer-nav-link" target="_blank">Creative Tim</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="https://www.updivision.com" class="ct-docs-footer-nav-link" target="_blank">UPDIVISION</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://www.creative-tim.com/contact-us" class="ct-docs-footer-nav-link" target="_blank">Contact Us</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://creative-tim.com/blog" class="ct-docs-footer-nav-link" target="_blank">Blog</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="../../assets/js/jquery.min.js" type="text/javascript"></script>
|
||||
<script src="../../assets/js/core/popper.min.js" type="text/javascript"></script>
|
||||
<script src="../../assets/js/core/bootstrap.bundle.min.js" type="text/javascript"></script>
|
||||
<script src="" type="text/javascript"></script>
|
||||
<script src="" type="text/javascript"></script>
|
||||
<script src="" type="text/javascript"></script>
|
||||
<script src="" type="text/javascript"></script>
|
||||
<script src="../../assets/js/prism.js" type="text/javascript"></script>
|
||||
<script src="../../assets/js/docs.min.js" type="text/javascript"></script>
|
||||
<script src="../../assets/js/holder.min.js" type="text/javascript"></script>
|
||||
<script src="../../assets/js/moment.min.js" type="text/javascript"></script>
|
||||
<script src="../../assets/js/material-dashboard.min.js" type="text/javascript"></script>
|
||||
<script>
|
||||
Holder.addTheme('gray', {
|
||||
bg: '#777',
|
||||
fg: 'rgba(255,255,255,.75)',
|
||||
font: 'Helvetica',
|
||||
fontweight: 'normal'
|
||||
})
|
||||
|
||||
</script>
|
||||
<script>
|
||||
// Facebook Pixel Code Don't Delete
|
||||
! function (f, b, e, v, n, t, s) {
|
||||
if (f.fbq) return;
|
||||
n = f.fbq = function () {
|
||||
n.callMethod ?
|
||||
n.callMethod.apply(n, arguments) : n.queue.push(arguments)
|
||||
};
|
||||
if (!f._fbq) f._fbq = n;
|
||||
n.push = n;
|
||||
n.loaded = !0;
|
||||
n.version = '2.0';
|
||||
n.queue = [];
|
||||
t = b.createElement(e);
|
||||
t.async = !0;
|
||||
t.src = v;
|
||||
s = b.getElementsByTagName(e)[0];
|
||||
s.parentNode.insertBefore(t, s)
|
||||
}(window,
|
||||
document, 'script', '//connect.facebook.net/en_US/fbevents.js');
|
||||
|
||||
try {
|
||||
fbq('init', '111649226022273');
|
||||
fbq('track', "PageView");
|
||||
|
||||
} catch (err) {
|
||||
console.log('Facebook Track Error:', err);
|
||||
}
|
||||
|
||||
</script>
|
||||
<script src="../../assets/js/docs.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,620 @@
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="apple-touch-icon" sizes="76x76" href="../../assets/img/apple-icon.png">
|
||||
<link rel="icon" href="../../assets/img/favicon.png" type="image/png">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="author" content="Creative Tim">
|
||||
<title>
|
||||
License | Material Dashboard 2 FREE Laravel by Creative Tim & UPDIVISION
|
||||
</title>
|
||||
<link rel="canonical" href="https://www.creative-tim.com/learning-lab/bootstrap/colors/material-dashboard" />
|
||||
|
||||
<meta name="keywords" content="creative tim, updivision, html dashboard, laravel, material, html css dashboard laravel, material dashboard laravel, laravel material dashboard, material admin, laravel dashboard, laravel admin, web dashboard, bootstrap 5 dashboard laravel, bootstrap 5, css3 dashboard, bootstrap 5 admin laravel, material dashboard bootstrap 5 laravel, frontend, responsive bootstrap 5 dashboard, material dashboard, material laravel bootstrap 5 dashboard" />
|
||||
<meta name="description" content="A free Laravel Dashboard featuring dozens of UI components & basic Laravel CRUDs." />
|
||||
<meta itemprop="name" content="Material Dashboard 2 Laravel by Creative Tim & UPDIVISION" />
|
||||
<meta itemprop="description" content="A free Laravel Dashboard featuring dozens of UI components & basic Laravel CRUDs." />
|
||||
<meta itemprop="image" content="https://s3.amazonaws.com/creativetim_bucket/products/598/original/material-dashboard-laravel.jpg" />
|
||||
<meta name="twitter:card" content="product" />
|
||||
<meta name="twitter:site" content="@creativetim" />
|
||||
<meta name="twitter:title" content="Material Dashboard 2 Laravel by Creative Tim & UPDIVISION" />
|
||||
<meta name="twitter:description" content="A free Laravel Dashboard featuring dozens of UI components & basic Laravel CRUDs." />
|
||||
<meta name="twitter:creator" content="@creativetim" />
|
||||
<meta name="twitter:image" content="https://s3.amazonaws.com/creativetim_bucket/products/598/original/material-dashboard-laravel.jpg" />
|
||||
<meta property="fb:app_id" content="655968634437471" />
|
||||
<meta property="og:title" content="Material Dashboard 2 Laravel by Creative Tim & UPDIVISION" />
|
||||
<meta property="og:type" content="article" />
|
||||
<meta property="og:url" content="https://www.creative-tim.com/live/material-dashboard-laravel" />
|
||||
<meta property="og:image" content="https://s3.amazonaws.com/creativetim_bucket/products/598/original/material-dashboard-laravel.jpg" />
|
||||
<meta property="og:description" content="A free Laravel Dashboard featuring dozens of UI components & basic Laravel CRUDs." />
|
||||
<meta property="og:site_name" content="Creative Tim" />
|
||||
|
||||
|
||||
<link rel="stylesheet" href="../../assets/css/nucleo-icons.css" type="text/css">
|
||||
|
||||
<link rel="stylesheet" href="../../assets/css/nextjs-material-dashboard-pro.min.css" type="text/css">
|
||||
|
||||
<link rel="stylesheet" href="../../assets/css/material-dashboard.min.css" type="text/css">
|
||||
<link rel="stylesheet" href="../../assets/css/demo.css" type="text/css">
|
||||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Round" rel="stylesheet">
|
||||
|
||||
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700" rel="stylesheet">
|
||||
|
||||
<link href="../../assets/css/nucleo-icons.css" rel="stylesheet">
|
||||
|
||||
<script src="https://kit.fontawesome.com/42d5adcbca.js" crossorigin="anonymous"></script>
|
||||
<!-- Anti-flicker snippet (recommended) -->
|
||||
<style>
|
||||
.async-hide {
|
||||
opacity: 0 !important
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
(function(a, s, y, n, c, h, i, d, e) {
|
||||
s.className += ' ' + y;
|
||||
h.start = 1 * new Date;
|
||||
h.end = i = function() {
|
||||
s.className = s.className.replace(RegExp(' ?' + y), '')
|
||||
};
|
||||
(a[n] = a[n] || []).hide = h;
|
||||
setTimeout(function() {
|
||||
i();
|
||||
h.end = null
|
||||
}, c);
|
||||
h.timeout = c;
|
||||
})(window, document.documentElement, 'async-hide', 'dataLayer', 4000, {
|
||||
'GTM-K9BGS8K': true
|
||||
});
|
||||
</script>
|
||||
<!-- Analytics-Optimize Snippet -->
|
||||
<script>
|
||||
(function(i, s, o, g, r, a, m) {
|
||||
i['GoogleAnalyticsObject'] = r;
|
||||
i[r] = i[r] || function() {
|
||||
(i[r].q = i[r].q || []).push(arguments)
|
||||
}, i[r].l = 1 * new Date();
|
||||
a = s.createElement(o),
|
||||
m = s.getElementsByTagName(o)[0];
|
||||
a.async = 1;
|
||||
a.src = g;
|
||||
m.parentNode.insertBefore(a, m)
|
||||
})(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
|
||||
ga('create', 'UA-46172202-22', 'auto', {
|
||||
allowLinker: true
|
||||
});
|
||||
ga('set', 'anonymizeIp', true);
|
||||
ga('require', 'GTM-K9BGS8K');
|
||||
ga('require', 'displayfeatures');
|
||||
ga('require', 'linker');
|
||||
ga('linker:autoLink', ["2checkout.com", "avangate.com"]);
|
||||
</script>
|
||||
<!-- end Analytics-Optimize Snippet -->
|
||||
<!-- Google Tag Manager -->
|
||||
<script>
|
||||
(function(w, d, s, l, i) {
|
||||
w[l] = w[l] || [];
|
||||
w[l].push({
|
||||
'gtm.start': new Date().getTime(),
|
||||
event: 'gtm.js'
|
||||
});
|
||||
var f = d.getElementsByTagName(s)[0],
|
||||
j = d.createElement(s),
|
||||
dl = l != 'dataLayer' ? '&l=' + l : '';
|
||||
j.async = true;
|
||||
j.src =
|
||||
'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
|
||||
f.parentNode.insertBefore(j, f);
|
||||
})(window, document, 'script', 'dataLayer', 'GTM-NKDMSK6');
|
||||
</script>
|
||||
<!-- End Google Tag Manager -->
|
||||
<!-- This is for docs typography and layout -->
|
||||
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet">
|
||||
<link href="../../assets/css/docs.css" rel="stylesheet" />
|
||||
</head>
|
||||
<body class="docs ">
|
||||
<!-- Google Tag Manager (noscript) -->
|
||||
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-NKDMSK6" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
|
||||
<!-- End Google Tag Manager (noscript) -->
|
||||
<header class="ct-docs-navbar">
|
||||
<a class="ct-docs-navbar-brand" href="javascript:void(0)" aria-label="Bootstrap">
|
||||
</a><a href="https://www.creative-tim.com/" class="ct-docs-navbar-text" target="_blank">
|
||||
Creative Tim
|
||||
</a>
|
||||
<div class="ct-docs-navbar-border"></div>
|
||||
<a href="../../documentation/getting-started/installation.html" class="ct-docs-navbar-text">
|
||||
Docs
|
||||
</a>
|
||||
|
||||
<ul class="ct-docs-navbar-nav-left">
|
||||
<li class="ct-docs-nav-item-dropdown">
|
||||
<a href="javascript:;" class="ct-docs-navbar-nav-link" role="button">
|
||||
<span class="ct-docs-navbar-nav-link-inner--text">Live Preview</span>
|
||||
</a>
|
||||
<div class="ct-docs-navbar-dropdown-menu" aria-labelledby="DropdownPreview">
|
||||
<a class="ct-docs-navbar-dropdown-item" href="https://material-dashboard-laravel.creative-tim.com" target="_blank">
|
||||
Material Dashboard 2 Laravel
|
||||
</a>
|
||||
<a class="ct-docs-navbar-dropdown-item" href="https://material-dashboard-pro-laravel.creative-tim.com" target="_blank">
|
||||
Material Dashboard 2 Pro Laravel
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="ct-docs-nav-item-dropdown">
|
||||
<a href="javascript:;" class="ct-docs-navbar-nav-link" role="button">
|
||||
<span class="ct-docs-navbar-nav-link-inner--text">Support</span>
|
||||
</a>
|
||||
<div class="ct-docs-navbar-dropdown-menu" aria-labelledby="DropdownSupport">
|
||||
<a class="ct-docs-navbar-dropdown-item" href="https://github.com/creativetimofficial/material-dashboard-laravel/issues" target="_blank">
|
||||
Material Dashboard 2 Laravel
|
||||
</a>
|
||||
<a class="ct-docs-navbar-dropdown-item" href="https://github.com/creativetimofficial/ct-material-dashboard-pro-laravel/issues" target="_blank">
|
||||
Material Dashboard 2 Pro Laravel
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="ct-docs-navbar-nav-right">
|
||||
<li class="ct-docs-navbar-nav-item">
|
||||
<a class="ct-docs-navbar-nav-link" href="https://www.creative-tim.com/product/material-dashboard-laravel" target="_blank">Download Free</a>
|
||||
</li>
|
||||
</ul>
|
||||
<a href="https://www.creative-tim.com/product/material-dashboard-pro-laravel" target="_blank" class="ct-docs-btn-upgrade">
|
||||
<span class="ct-docs-btn-inner--icon">
|
||||
<i class="fas fa-download mr-2" aria-hidden="true"></i>
|
||||
</span>
|
||||
<span class="ct-docs-navbar-nav-link-inner--text">Upgrade to PRO</span>
|
||||
</a>
|
||||
<button class="ct-docs-navbar-toggler" type="button">
|
||||
<span class="ct-docs-navbar-toggler-icon"></span>
|
||||
</button>
|
||||
</header>
|
||||
<div class="ct-docs-main-container">
|
||||
<div class="ct-docs-main-content-row">
|
||||
<div class="ct-docs-sidebar-col">
|
||||
<nav class="ct-docs-sidebar-collapse-links">
|
||||
<div class="ct-docs-sidebar-product">
|
||||
<div class="ct-docs-sidebar-product-image">
|
||||
<img src="../../assets/img/bootstrap.png">
|
||||
</div>
|
||||
<p class="ct-docs-sidebar-product-text">Material Dashboard</p>
|
||||
</div>
|
||||
<div class="ct-docs-toc-item-active">
|
||||
<a class="ct-docs-toc-link" href="javascript:void(0)">
|
||||
<div class="d-inline-block">
|
||||
<div class="icon icon-xs border-radius-md bg-gradient-primary text-center mr-2 d-flex align-items-center justify-content-center me-1">
|
||||
<i class="ni ni-active-40 text-white"></i>
|
||||
</div>
|
||||
</div>
|
||||
Getting started
|
||||
</a>
|
||||
<ul class="ct-docs-nav-sidenav ms-4 ps-1">
|
||||
<li class="">
|
||||
<a href="../../documentation/getting-started/overview.html">
|
||||
Overview
|
||||
</a>
|
||||
</li>
|
||||
<li class="ct-docs-nav-sidenav-active">
|
||||
<a href="../../documentation/getting-started/license.html">
|
||||
License
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/getting-started/installation.html">
|
||||
Installation
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/getting-started/build-tools.html">
|
||||
Build Tools
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/getting-started/bootstrap.html">
|
||||
What is Bootstrap
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ct-docs-toc-item-active">
|
||||
<a class="ct-docs-toc-link" href="javascript:void(0)">
|
||||
<div class="d-inline-block">
|
||||
<div class="icon icon-xs border-radius-md bg-gradient-primary text-center mr-2 d-flex align-items-center justify-content-center me-1">
|
||||
<i class="ni ni-folder-17 text-white"></i>
|
||||
</div>
|
||||
</div>
|
||||
Laravel
|
||||
</a>
|
||||
<ul class="ct-docs-nav-sidenav ms-4 ps-1">
|
||||
<li class="">
|
||||
<a href="../../documentation/laravel/login.html">
|
||||
Login
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/laravel/sign-up.html">
|
||||
Sign Up
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/laravel/forgot-password.html">
|
||||
Forgot Password
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/laravel/user-profile.html">
|
||||
User Profile
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/laravel/user-management.html">
|
||||
User Management
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ct-docs-toc-item-active">
|
||||
<a class="ct-docs-toc-link" href="javascript:void(0)">
|
||||
<div class="d-inline-block">
|
||||
<div class="icon icon-xs border-radius-md bg-gradient-primary text-center mr-2 d-flex align-items-center justify-content-center me-1">
|
||||
<i class="ni ni-folder-17 text-white"></i>
|
||||
</div>
|
||||
</div>
|
||||
Foundation
|
||||
</a>
|
||||
<ul class="ct-docs-nav-sidenav ms-4 ps-1">
|
||||
<li class=" ct-docs-nav-sidenav ">
|
||||
<a href="../../documentation/foundation/colors.html">
|
||||
Colors
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/foundation/grid.html">
|
||||
Grid
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/foundation/typography.html">
|
||||
Typography
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/foundation/icons.html">
|
||||
Icons
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/foundation/utilities.html">
|
||||
Utilities
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ct-docs-toc-item-active">
|
||||
<a class="ct-docs-toc-link" href="javascript:void(0)">
|
||||
<div class="d-inline-block">
|
||||
<div class="icon icon-xs border-radius-md bg-gradient-primary text-center mr-2 d-flex align-items-center justify-content-center me-1">
|
||||
<i class="ni ni-app text-white"></i>
|
||||
</div>
|
||||
</div>
|
||||
Components
|
||||
</a>
|
||||
<ul class="ct-docs-nav-sidenav ms-4 ps-1">
|
||||
<li class="">
|
||||
<a href="../../documentation/components/alerts.html">
|
||||
Alerts
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/badge.html">
|
||||
Badge
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/buttons.html">
|
||||
Buttons
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/social-buttons.html">
|
||||
Social Buttons
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/cards.html">
|
||||
Cards
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/carousel.html">
|
||||
Carousel
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/collapse.html">
|
||||
Collapse
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/dropdowns.html">
|
||||
Dropdowns
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/forms.html">
|
||||
Forms
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/input-group.html">
|
||||
Input Group
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/list-group.html">
|
||||
List Group
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/modal.html">
|
||||
Modal
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/navs.html">
|
||||
Navs
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/navbar.html">
|
||||
Navbar
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/pagination.html">
|
||||
Pagination
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/popovers.html">
|
||||
Popovers
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/progress.html">
|
||||
Progress
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/spinners.html">
|
||||
Spinners
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/tables.html">
|
||||
Tables
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/tooltips.html">
|
||||
Tooltips
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ct-docs-toc-item-active">
|
||||
<a class="ct-docs-toc-link" href="javascript:void(0)">
|
||||
<div class="d-inline-block">
|
||||
<div class="icon icon-xs border-radius-md bg-gradient-primary text-center mr-2 d-flex align-items-center justify-content-center me-1">
|
||||
<i class="ni ni-settings text-white"></i>
|
||||
</div>
|
||||
</div>
|
||||
Plugins
|
||||
</a>
|
||||
<ul class="ct-docs-nav-sidenav ms-4 ps-1">
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/countUpJs.html">
|
||||
CountUp JS
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/charts.html">
|
||||
Charts
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/datepicker.html">
|
||||
Datepicker
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/fullcalendar.html">
|
||||
Fullcalendar
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/sliders.html">
|
||||
Sliders
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/choices.html">
|
||||
Choices
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/dropzone.html">
|
||||
Dropzone
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/datatables.html">
|
||||
Datatables
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/kanban.html">
|
||||
Kanban
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/photo-swipe.html">
|
||||
Photo Swipe
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/quill.html">
|
||||
Quill
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/sweet-alerts.html">
|
||||
Sweet Alerts
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/wizard.html">
|
||||
Wizard
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="ct-docs-toc-col">
|
||||
<ul class="section-nav">
|
||||
<li class="toc-entry toc-h2"><a href="#free-demo-products">Free Demo Products</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#pro-premium-products">PRO premium products</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<main class="ct-docs-content-col" role="main">
|
||||
<div class="ct-docs-page-title">
|
||||
<h1 class="ct-docs-page-h1-title" id="content">
|
||||
License
|
||||
</h1>
|
||||
<div class="avatar-group mt-3">
|
||||
</div>
|
||||
</div>
|
||||
<p class="ct-docs-page-title-lead">Learn more about the licenses Creative Tim offers and purchase the one that covers the needs of your project.</p>
|
||||
<hr class="ct-docs-hr">
|
||||
<h2 id="free-demo-products">Free Demo Products</h2>
|
||||
<p>MIT License</p>
|
||||
<p>Copyright (c) 2021 <a href="https://creative-tim.com">Creative Tim</a></p>
|
||||
<p>Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:</p>
|
||||
<p>The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.</p>
|
||||
<p>THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.</p>
|
||||
<h2 id="pro-premium-products">PRO premium products</h2>
|
||||
<hr>
|
||||
<p><span class="badge badge-primary">PRO</span></p>
|
||||
<p>Currently, on <a href="https://creative-tim.com">Creative Tim</a> you can get the products with two types of licenses: Personal or Developer. If you are making a paid purchase, be sure to go through the table with the rights and the guidelines, so you can know what is the best fit for you. View the rights table and the description for each license on our by clicking the button below.</p>
|
||||
<p><a href="https://www.creative-tim.com/license" target="_blank">See licenses</a></p>
|
||||
<p>Creating your web design from scratch with dedicated designers can be very expensive. Using our solutions you don’t have to worry about design. Save time and money by focusing on the business model. Are you ready to create something amazing?</p>
|
||||
<p><a href="https://www.creative-tim.com/product/material-dashboard-pro" target="_blank">Purchase now</a></p>
|
||||
</main>
|
||||
</div>
|
||||
<div class="ct-docs-main-footer-row">
|
||||
<div class="ct-docs-main-footer-blank-col">
|
||||
</div>
|
||||
<div class="ct-docs-main-footer-col">
|
||||
<footer class="ct-docs-footer">
|
||||
<div class="ct-docs-footer-inner-row">
|
||||
<div class="ct-docs-footer-col">
|
||||
<div class="ct-docs-footer-copyright">
|
||||
© <script>
|
||||
document.write(new Date().getFullYear())
|
||||
</script> <a href="https://creative-tim.com" class="ct-docs-footer-copyright-author" target="_blank">Creative Tim</a> & <a href="https://www.updivision.com" class="ct-docs-footer-copyright-author" target="_blank">UPDIVISION</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ct-docs-footer-col">
|
||||
<ul class="ct-docs-footer-nav-footer">
|
||||
<li>
|
||||
<a href="https://creative-tim.com" class="ct-docs-footer-nav-link" target="_blank">Creative Tim</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="https://www.updivision.com" class="ct-docs-footer-nav-link" target="_blank">UPDIVISION</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://www.creative-tim.com/contact-us" class="ct-docs-footer-nav-link" target="_blank">Contact Us</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://creative-tim.com/blog" class="ct-docs-footer-nav-link" target="_blank">Blog</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="../../assets/js/jquery.min.js" type="text/javascript"></script>
|
||||
<script src="../../assets/js/core/popper.min.js" type="text/javascript"></script>
|
||||
<script src="../../assets/js/core/bootstrap.bundle.min.js" type="text/javascript"></script>
|
||||
<script src="" type="text/javascript"></script>
|
||||
<script src="" type="text/javascript"></script>
|
||||
<script src="" type="text/javascript"></script>
|
||||
<script src="" type="text/javascript"></script>
|
||||
<script src="../../assets/js/prism.js" type="text/javascript"></script>
|
||||
<script src="../../assets/js/docs.min.js" type="text/javascript"></script>
|
||||
<script src="../../assets/js/holder.min.js" type="text/javascript"></script>
|
||||
<script src="../../assets/js/moment.min.js" type="text/javascript"></script>
|
||||
<script src="../../assets/js/material-dashboard.min.js" type="text/javascript"></script>
|
||||
<script>
|
||||
Holder.addTheme('gray', {
|
||||
bg: '#777',
|
||||
fg: 'rgba(255,255,255,.75)',
|
||||
font: 'Helvetica',
|
||||
fontweight: 'normal'
|
||||
})
|
||||
</script>
|
||||
<script>
|
||||
// Facebook Pixel Code Don't Delete
|
||||
! function(f, b, e, v, n, t, s) {
|
||||
if (f.fbq) return;
|
||||
n = f.fbq = function() {
|
||||
n.callMethod ?
|
||||
n.callMethod.apply(n, arguments) : n.queue.push(arguments)
|
||||
};
|
||||
if (!f._fbq) f._fbq = n;
|
||||
n.push = n;
|
||||
n.loaded = !0;
|
||||
n.version = '2.0';
|
||||
n.queue = [];
|
||||
t = b.createElement(e);
|
||||
t.async = !0;
|
||||
t.src = v;
|
||||
s = b.getElementsByTagName(e)[0];
|
||||
s.parentNode.insertBefore(t, s)
|
||||
}(window,
|
||||
document, 'script', '//connect.facebook.net/en_US/fbevents.js');
|
||||
|
||||
try {
|
||||
fbq('init', '111649226022273');
|
||||
fbq('track', "PageView");
|
||||
|
||||
} catch (err) {
|
||||
console.log('Facebook Track Error:', err);
|
||||
}
|
||||
</script>
|
||||
<script src="../../assets/js/docs.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,753 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="apple-touch-icon" sizes="76x76" href="../../assets/img/apple-icon.png">
|
||||
<link rel="icon" href="../../assets/img/favicon.png" type="image/png">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="author" content="Creative Tim">
|
||||
<title>
|
||||
Overview | Material Dashboard 2 FREE Laravel by Creative Tim & UPDIVISION
|
||||
</title>
|
||||
<link rel="canonical" href="https://www.creative-tim.com/learning-lab/bootstrap/colors/material-dashboard" />
|
||||
|
||||
<meta name="keywords" content="creative tim, updivision, html dashboard, laravel, material, html css dashboard laravel, material dashboard laravel, laravel material dashboard, material admin, laravel dashboard, laravel admin, web dashboard, bootstrap 5 dashboard laravel, bootstrap 5, css3 dashboard, bootstrap 5 admin laravel, material dashboard bootstrap 5 laravel, frontend, responsive bootstrap 5 dashboard, material dashboard, material laravel bootstrap 5 dashboard" />
|
||||
<meta name="description" content="A free Laravel Dashboard featuring dozens of UI components & basic Laravel CRUDs." />
|
||||
<meta itemprop="name" content="Material Dashboard 2 Laravel by Creative Tim & UPDIVISION" />
|
||||
<meta itemprop="description" content="A free Laravel Dashboard featuring dozens of UI components & basic Laravel CRUDs." />
|
||||
<meta itemprop="image" content="https://s3.amazonaws.com/creativetim_bucket/products/598/original/material-dashboard-laravel.jpg" />
|
||||
<meta name="twitter:card" content="product" />
|
||||
<meta name="twitter:site" content="@creativetim" />
|
||||
<meta name="twitter:title" content="Material Dashboard 2 Laravel by Creative Tim & UPDIVISION" />
|
||||
<meta name="twitter:description" content="A free Laravel Dashboard featuring dozens of UI components & basic Laravel CRUDs." />
|
||||
<meta name="twitter:creator" content="@creativetim" />
|
||||
<meta name="twitter:image" content="https://s3.amazonaws.com/creativetim_bucket/products/598/original/material-dashboard-laravel.jpg" />
|
||||
<meta property="fb:app_id" content="655968634437471" />
|
||||
<meta property="og:title" content="Material Dashboard 2 Laravel by Creative Tim & UPDIVISION" />
|
||||
<meta property="og:type" content="article" />
|
||||
<meta property="og:url" content="https://www.creative-tim.com/live/material-dashboard-laravel" />
|
||||
<meta property="og:image" content="https://s3.amazonaws.com/creativetim_bucket/products/598/original/material-dashboard-laravel.jpg" />
|
||||
<meta property="og:description" content="A free Laravel Dashboard featuring dozens of UI components & basic Laravel CRUDs." />
|
||||
<meta property="og:site_name" content="Creative Tim" />
|
||||
|
||||
<link rel="stylesheet" href="../../assets/css/nucleo-icons.css" type="text/css">
|
||||
|
||||
<link rel="stylesheet" href="../../assets/css/nextjs-material-dashboard-pro.min.css" type="text/css">
|
||||
|
||||
<link rel="stylesheet" href="../../assets/css/material-dashboard.min.css" type="text/css">
|
||||
<link rel="stylesheet" href="../../assets/css/demo.css" type="text/css">
|
||||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Round" rel="stylesheet">
|
||||
|
||||
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700" rel="stylesheet">
|
||||
|
||||
<link href="../../assets/css/nucleo-icons.css" rel="stylesheet">
|
||||
|
||||
<script src="https://kit.fontawesome.com/42d5adcbca.js" crossorigin="anonymous"></script>
|
||||
<!-- Anti-flicker snippet (recommended) -->
|
||||
<style>
|
||||
.async-hide {
|
||||
opacity: 0 !important
|
||||
}
|
||||
|
||||
</style>
|
||||
<script>
|
||||
(function (a, s, y, n, c, h, i, d, e) {
|
||||
s.className += ' ' + y;
|
||||
h.start = 1 * new Date;
|
||||
h.end = i = function () {
|
||||
s.className = s.className.replace(RegExp(' ?' + y), '')
|
||||
};
|
||||
(a[n] = a[n] || []).hide = h;
|
||||
setTimeout(function () {
|
||||
i();
|
||||
h.end = null
|
||||
}, c);
|
||||
h.timeout = c;
|
||||
})(window, document.documentElement, 'async-hide', 'dataLayer', 4000, {
|
||||
'GTM-K9BGS8K': true
|
||||
});
|
||||
|
||||
</script>
|
||||
<!-- Analytics-Optimize Snippet -->
|
||||
<script>
|
||||
(function (i, s, o, g, r, a, m) {
|
||||
i['GoogleAnalyticsObject'] = r;
|
||||
i[r] = i[r] || function () {
|
||||
(i[r].q = i[r].q || []).push(arguments)
|
||||
}, i[r].l = 1 * new Date();
|
||||
a = s.createElement(o),
|
||||
m = s.getElementsByTagName(o)[0];
|
||||
a.async = 1;
|
||||
a.src = g;
|
||||
m.parentNode.insertBefore(a, m)
|
||||
})(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
|
||||
ga('create', 'UA-46172202-22', 'auto', {
|
||||
allowLinker: true
|
||||
});
|
||||
ga('set', 'anonymizeIp', true);
|
||||
ga('require', 'GTM-K9BGS8K');
|
||||
ga('require', 'displayfeatures');
|
||||
ga('require', 'linker');
|
||||
ga('linker:autoLink', ["2checkout.com", "avangate.com"]);
|
||||
|
||||
</script>
|
||||
<!-- end Analytics-Optimize Snippet -->
|
||||
<!-- Google Tag Manager -->
|
||||
<script>
|
||||
(function (w, d, s, l, i) {
|
||||
w[l] = w[l] || [];
|
||||
w[l].push({
|
||||
'gtm.start': new Date().getTime(),
|
||||
event: 'gtm.js'
|
||||
});
|
||||
var f = d.getElementsByTagName(s)[0],
|
||||
j = d.createElement(s),
|
||||
dl = l != 'dataLayer' ? '&l=' + l : '';
|
||||
j.async = true;
|
||||
j.src =
|
||||
'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
|
||||
f.parentNode.insertBefore(j, f);
|
||||
})(window, document, 'script', 'dataLayer', 'GTM-NKDMSK6');
|
||||
|
||||
</script>
|
||||
<!-- End Google Tag Manager -->
|
||||
<!-- This is for docs typography and layout -->
|
||||
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet">
|
||||
<link href="../../assets/css/docs.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
||||
<body class="docs ">
|
||||
<!-- Google Tag Manager (noscript) -->
|
||||
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-NKDMSK6" height="0" width="0"
|
||||
style="display:none;visibility:hidden"></iframe></noscript>
|
||||
<!-- End Google Tag Manager (noscript) -->
|
||||
<header class="ct-docs-navbar">
|
||||
<a class="ct-docs-navbar-brand" href="javascript:void(0)" aria-label="Bootstrap">
|
||||
</a><a href="https://www.creative-tim.com/" class="ct-docs-navbar-text" target="_blank">
|
||||
Creative Tim
|
||||
</a>
|
||||
<div class="ct-docs-navbar-border"></div>
|
||||
<a href="../../documentation/getting-started/installation.html" class="ct-docs-navbar-text">
|
||||
Docs
|
||||
</a>
|
||||
|
||||
<ul class="ct-docs-navbar-nav-left">
|
||||
<li class="ct-docs-nav-item-dropdown">
|
||||
<a href="javascript:;" class="ct-docs-navbar-nav-link" role="button">
|
||||
<span class="ct-docs-navbar-nav-link-inner--text">Live Preview</span>
|
||||
</a>
|
||||
<div class="ct-docs-navbar-dropdown-menu" aria-labelledby="DropdownPreview">
|
||||
<a class="ct-docs-navbar-dropdown-item" href="https://material-dashboard-laravel.creative-tim.com" target="_blank">
|
||||
Material Dashboard 2 Laravel
|
||||
</a>
|
||||
<a class="ct-docs-navbar-dropdown-item" href="https://material-dashboard-pro-laravel.creative-tim.com" target="_blank">
|
||||
Material Dashboard 2 Pro Laravel
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="ct-docs-nav-item-dropdown">
|
||||
<a href="javascript:;" class="ct-docs-navbar-nav-link" role="button">
|
||||
<span class="ct-docs-navbar-nav-link-inner--text">Support</span>
|
||||
</a>
|
||||
<div class="ct-docs-navbar-dropdown-menu" aria-labelledby="DropdownSupport">
|
||||
<a class="ct-docs-navbar-dropdown-item" href="https://github.com/creativetimofficial/material-dashboard-laravel/issues" target="_blank">
|
||||
Material Dashboard 2 Laravel
|
||||
</a>
|
||||
<a class="ct-docs-navbar-dropdown-item" href="https://github.com/creativetimofficial/ct-material-dashboard-pro-laravel/issues" target="_blank">
|
||||
Material Dashboard 2 Pro Laravel
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="ct-docs-navbar-nav-right">
|
||||
<li class="ct-docs-navbar-nav-item">
|
||||
<a class="ct-docs-navbar-nav-link" href="https://www.creative-tim.com/product/material-dashboard-laravel" target="_blank">Download Free</a>
|
||||
</li>
|
||||
</ul>
|
||||
<a href="https://www.creative-tim.com/product/material-dashboard-pro-laravel" target="_blank" class="ct-docs-btn-upgrade">
|
||||
<span class="ct-docs-btn-inner--icon">
|
||||
<i class="fas fa-download mr-2" aria-hidden="true"></i>
|
||||
</span>
|
||||
<span class="ct-docs-navbar-nav-link-inner--text">Upgrade to PRO</span>
|
||||
</a>
|
||||
<button class="ct-docs-navbar-toggler" type="button">
|
||||
<span class="ct-docs-navbar-toggler-icon"></span>
|
||||
</button>
|
||||
</header>
|
||||
<div class="ct-docs-main-container">
|
||||
<div class="ct-docs-main-content-row">
|
||||
<div class="ct-docs-sidebar-col">
|
||||
<nav class="ct-docs-sidebar-collapse-links">
|
||||
<div class="ct-docs-sidebar-product">
|
||||
<div class="ct-docs-sidebar-product-image">
|
||||
<img src="../../assets/img/bootstrap.png">
|
||||
</div>
|
||||
<p class="ct-docs-sidebar-product-text">Material Dashboard</p>
|
||||
</div>
|
||||
<div class="ct-docs-toc-item-active">
|
||||
<a class="ct-docs-toc-link" href="javascript:void(0)">
|
||||
<div class="d-inline-block">
|
||||
<div class="icon icon-xs border-radius-md bg-gradient-primary text-center mr-2 d-flex align-items-center justify-content-center me-1">
|
||||
<i class="ni ni-active-40 text-white"></i>
|
||||
</div>
|
||||
</div>
|
||||
Getting started
|
||||
</a>
|
||||
<ul class="ct-docs-nav-sidenav ms-4 ps-1">
|
||||
<li class="ct-docs-nav-sidenav-active">
|
||||
<a href="../../documentation/getting-started/overview.html">
|
||||
Overview
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/getting-started/license.html">
|
||||
License
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/getting-started/installation.html">
|
||||
Installation
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/getting-started/build-tools.html">
|
||||
Build Tools
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/getting-started/bootstrap.html">
|
||||
What is Bootstrap
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ct-docs-toc-item-active">
|
||||
<a class="ct-docs-toc-link" href="javascript:void(0)">
|
||||
<div class="d-inline-block">
|
||||
<div class="icon icon-xs border-radius-md bg-gradient-primary text-center mr-2 d-flex align-items-center justify-content-center me-1">
|
||||
<i class="ni ni-folder-17 text-white"></i>
|
||||
</div>
|
||||
</div>
|
||||
Laravel
|
||||
</a>
|
||||
<ul class="ct-docs-nav-sidenav ms-4 ps-1">
|
||||
<li class="">
|
||||
<a href="../../documentation/laravel/login.html">
|
||||
Login
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/laravel/sign-up.html">
|
||||
Sign Up
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/laravel/forgot-password.html">
|
||||
Forgot Password
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/laravel/user-profile.html">
|
||||
User Profile
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/laravel/user-management.html">
|
||||
User Management
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ct-docs-toc-item-active">
|
||||
<a class="ct-docs-toc-link" href="javascript:void(0)">
|
||||
<div class="d-inline-block">
|
||||
<div class="icon icon-xs border-radius-md bg-gradient-primary text-center mr-2 d-flex align-items-center justify-content-center me-1">
|
||||
<i class="ni ni-folder-17 text-white"></i>
|
||||
</div>
|
||||
</div>
|
||||
Foundation
|
||||
</a>
|
||||
<ul class="ct-docs-nav-sidenav ms-4 ps-1">
|
||||
<li class=" ct-docs-nav-sidenav ">
|
||||
<a href="../../documentation/foundation/colors.html">
|
||||
Colors
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/foundation/grid.html">
|
||||
Grid
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/foundation/typography.html">
|
||||
Typography
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/foundation/icons.html">
|
||||
Icons
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/foundation/utilities.html">
|
||||
Utilities
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ct-docs-toc-item-active">
|
||||
<a class="ct-docs-toc-link" href="javascript:void(0)">
|
||||
<div class="d-inline-block">
|
||||
<div class="icon icon-xs border-radius-md bg-gradient-primary text-center mr-2 d-flex align-items-center justify-content-center me-1">
|
||||
<i class="ni ni-app text-white"></i>
|
||||
</div>
|
||||
</div>
|
||||
Components
|
||||
</a>
|
||||
<ul class="ct-docs-nav-sidenav ms-4 ps-1">
|
||||
<li class="">
|
||||
<a href="../../documentation/components/alerts.html">
|
||||
Alerts
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/badge.html">
|
||||
Badge
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/buttons.html">
|
||||
Buttons
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/social-buttons.html">
|
||||
Social Buttons
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/cards.html">
|
||||
Cards
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/carousel.html">
|
||||
Carousel
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/collapse.html">
|
||||
Collapse
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/dropdowns.html">
|
||||
Dropdowns
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/forms.html">
|
||||
Forms
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/input-group.html">
|
||||
Input Group
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/list-group.html">
|
||||
List Group
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/modal.html">
|
||||
Modal
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/navs.html">
|
||||
Navs
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/navbar.html">
|
||||
Navbar
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/pagination.html">
|
||||
Pagination
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/popovers.html">
|
||||
Popovers
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/progress.html">
|
||||
Progress
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/spinners.html">
|
||||
Spinners
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/tables.html">
|
||||
Tables
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/tooltips.html">
|
||||
Tooltips
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ct-docs-toc-item-active">
|
||||
<a class="ct-docs-toc-link" href="javascript:void(0)">
|
||||
<div class="d-inline-block">
|
||||
<div class="icon icon-xs border-radius-md bg-gradient-primary text-center mr-2 d-flex align-items-center justify-content-center me-1">
|
||||
<i class="ni ni-settings text-white"></i>
|
||||
</div>
|
||||
</div>
|
||||
Plugins
|
||||
</a>
|
||||
<ul class="ct-docs-nav-sidenav ms-4 ps-1">
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/countUpJs.html">
|
||||
CountUp JS
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/charts.html">
|
||||
Charts
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/datepicker.html">
|
||||
Datepicker
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/fullcalendar.html">
|
||||
Fullcalendar
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/sliders.html">
|
||||
Sliders
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/choices.html">
|
||||
Choices
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/dropzone.html">
|
||||
Dropzone
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/datatables.html">
|
||||
Datatables
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/kanban.html">
|
||||
Kanban
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/photo-swipe.html">
|
||||
Photo Swipe
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/quill.html">
|
||||
Quill
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/sweet-alerts.html">
|
||||
Sweet Alerts
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/wizard.html">
|
||||
Wizard
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="ct-docs-toc-col">
|
||||
<ul class="section-nav">
|
||||
<li class="toc-entry toc-h5"><a href="#developer-first">Developer First</a></li>
|
||||
<li class="toc-entry toc-h5"><a href="#high-quality">High quality</a></li>
|
||||
<li class="toc-entry toc-h5"><a href="#community-helpers">Community helpers</a></li>
|
||||
<li class="toc-entry toc-h3"><a href="#resources-and-credits">Resources and credits</a></li>
|
||||
<li class="toc-entry toc-h3"><a href="#learn-more">Learn more</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<main class="ct-docs-content-col" role="main">
|
||||
<div class="ct-docs-page-title">
|
||||
<h1 class="ct-docs-page-h1-title" id="content">
|
||||
Material Dashboard Bootstrap
|
||||
</h1>
|
||||
<div class="avatar-group mt-3">
|
||||
</div>
|
||||
</div>
|
||||
<p class="ct-docs-page-title-lead">An user-friendly, open source and beautiful dashboard based on
|
||||
Bootstrap 5.</p>
|
||||
<hr class="ct-docs-hr">
|
||||
<p>We at <a href="https://www.creative-tim.com/" target="_blank">Creative Tim</a> have always wanted to
|
||||
deliver great tools to all the web developers. We want to see better websites and web apps on the
|
||||
internet.</p>
|
||||
<div class="row">
|
||||
<div class="col-lg-4 col-md-6">
|
||||
<div class="card bg-gradient-dark">
|
||||
<div class="card-header bg-transparent mx-4 p-3 text-center">
|
||||
<div
|
||||
class="icon icon-shape icon-lg bg-gradient-primary text-center border-radius-lg mx-auto">
|
||||
<i class="material-icons opacity-10">
|
||||
integration_instructions
|
||||
</i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body pt-0 p-3 text-center">
|
||||
<h5 class="mb-2 text-white">Developer First</h5>
|
||||
<p class="mb-0 text-white">
|
||||
Material Dashboard is a "Developer First" product, with a lot of variables for
|
||||
colors, fonts, sizes and other elements.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4 col-md-6">
|
||||
<div class="card bg-gradient-dark">
|
||||
<div class="card-header bg-transparent mx-4 p-3 text-center">
|
||||
<div
|
||||
class="icon icon-shape icon-lg bg-gradient-primary text-center border-radius-lg mx-auto">
|
||||
<i class="material-icons opacity-10">
|
||||
imagesearch_roller
|
||||
</i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body pt-0 p-3 text-center">
|
||||
<h5 class="mb-2 text-white">High quality</h5>
|
||||
<p class="mb-0 text-white">
|
||||
We are following the latest code standards provided by the guys from Bootstrap, so
|
||||
you will love working with this dashboard.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4 col-md-6">
|
||||
<div class="card bg-gradient-dark">
|
||||
<div class="card-header bg-transparent mx-4 p-3 text-center">
|
||||
<div
|
||||
class="icon icon-shape icon-lg bg-gradient-primary text-center border-radius-lg mx-auto">
|
||||
<i class="material-icons opacity-10">
|
||||
volunteer_activism
|
||||
</i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body pt-0 p-3 text-center">
|
||||
<h5 class="mb-2 text-white">Community helpers</h5>
|
||||
<p class="mb-0 text-white">
|
||||
Since all our products are built on top of Open Source also Material Dashboard is
|
||||
released under
|
||||
<a class="font-weight-bolder text-white"
|
||||
href="https://github.com/creativetimofficial/material-dashboard-2/blob/master/LICENSE.md"
|
||||
target="_blank" rel="nofollow">MIT License</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h3 id="resources-and-credits">Resources and credits</h3>
|
||||
<p>This Dashboard is fully coded and built on top of Open Source, more details here:</p>
|
||||
<ul>
|
||||
<li><a href="https://www.getbootstrap.com" rel="nofollow" target="_blank">Bootstrap 5</a> - Open
|
||||
source front end framework</li>
|
||||
<li><a href="https://refreshless.com/nouislider/" rel="nofollow" target="_blank">noUISlider</a> -
|
||||
JavaScript Range Slider</li>
|
||||
<li><a href="https://popper.js.org/" rel="nofollow" target="_blank">Popper.js</a> - Kickass library
|
||||
used to manage poppers</li>
|
||||
<li><a href="https://flatpickr.js.org/" rel="nofollow" target="_blank">Flatpickr</a> - Useful
|
||||
library used to select date</li>
|
||||
<li><a href="https://joshuajohnson.co.uk/Choices/" rel="nofollow" target="_blank">Choices JS</a> - A
|
||||
nice plugin that select elements with intuitive multiselection and searching but also for
|
||||
managing tags.</li>
|
||||
<li><a href="https://inorganik.github.io/countUp.js/" rel="nofollow" target="_blank">CountUp JS</a>
|
||||
- A dependency-free, lightweight JavaScript class that can be used to quickly create animations
|
||||
that display numerical data in a more interesting way.</li>
|
||||
<li><a href="https://www.chartjs.org/" rel="nofollow" target="_blank">Charts Js</a> - Simple yet
|
||||
flexible JavaScript charting for designers & developers</li>
|
||||
<li><a href="https://fullcalendar.io/" rel="nofollow" target="_blank">FullCalendar</a> - Full-sized
|
||||
drag & drop event calendar</li>
|
||||
<li><a href="https://www.dropzonejs.com/" rel="nofollow" target="_blank">Dropzone</a> - An open
|
||||
source library that provides drag’n’drop file uploads with image previews.</li>
|
||||
<li><a href="https://github.com/fiduswriter/Simple-DataTables" rel="nofollow"
|
||||
target="_blank">Datatables</a> - DataTables but in Vanilla ES2018 JS</li>
|
||||
<li><a href="http://www.riccardotartaglia.it/jkanban/" rel="nofollow" target="_blank">jKanban</a> -
|
||||
Pure agnostic Javascript plugin for Kanban boards</li>
|
||||
<li><a href="https://photoswipe.com/" rel="nofollow" target="_blank">PhotoSwipe</a> - JavaScript
|
||||
image gallery for mobile and desktop, modular, framework independent</li>
|
||||
<li><a href="https://quilljs.com/" rel="nofollow" target="_blank">Quill</a> - A free, open source
|
||||
WYSIWYG editor built for the modern web</li>
|
||||
<li><a href="https://sweetalert2.github.io/" rel="nofollow" target="_blank">Sweet Alerts</a> - A
|
||||
beautiful, responsive, customisable, accessible replacement for Javascript’s popup boxes.</li>
|
||||
<li><a href="https://threejs.org/" rel="nofollow" target="_blank">three.js</a> - JavaScript 3D
|
||||
library</li>
|
||||
<li><a href="https://www.cssscript.com/multi-step-form-bootstrap/" rel="nofollow"
|
||||
target="_blank">Wizard</a> - Animated Multi-step form for Bootstrap</li>
|
||||
</ul>
|
||||
<h3 id="learn-more">Learn more</h3>
|
||||
<p>Stay up to date on the development journey and connect with us on:</p>
|
||||
<ul>
|
||||
<li>Follow <a href="https://twitter.com/creativetim" rel="nofollow" target="_blank">Creative Tim on
|
||||
Twitter</a>.</li>
|
||||
<li>Read and subscribe to <a href="https://creative-tim.com/blog" rel="nofollow" target="_blank">The
|
||||
Official Creative Tim Blog</a>.</li>
|
||||
<li>Follow <a href="https://www.instagram.com/creativetimofficial" rel="nofollow"
|
||||
target="_blank">Creative Tim on Instagram</a>.</li>
|
||||
<li>Follow <a href="https://www.facebook.com/creativetim" rel="nofollow" target="_blank">Creative
|
||||
Tim on Facebook</a>.</li>
|
||||
</ul>
|
||||
<h3>UPDIVISION</h3>
|
||||
<ul>
|
||||
<li>
|
||||
Follow
|
||||
<a href="https://twitter.com/updivision" rel="nofollow" target="_blank">UPDIVISION on
|
||||
Twitter</a>
|
||||
</li>
|
||||
<li>
|
||||
Read and subscribe to
|
||||
<a href=" https://updivision.com/blog/" rel="nofollow" target="_blank">The UPDIVISION Blog</a>.
|
||||
</li>
|
||||
<li>
|
||||
Follow
|
||||
<a href=" https://www.linkedin.com/company/updivision" rel="nofollow" target="_blank">UPDIVISION on Linkedin</a>.
|
||||
</li>
|
||||
<li>
|
||||
Follow
|
||||
<a href="https://www.facebook.com/updivision" rel="nofollow" target="_blank">UPDIVISION on
|
||||
Facebook</a>.
|
||||
</li>
|
||||
</ul>
|
||||
</main>
|
||||
</div>
|
||||
<div class="ct-docs-main-footer-row">
|
||||
<div class="ct-docs-main-footer-blank-col">
|
||||
</div>
|
||||
<div class="ct-docs-main-footer-col">
|
||||
<footer class="ct-docs-footer">
|
||||
<div class="ct-docs-footer-inner-row">
|
||||
<div class="ct-docs-footer-col">
|
||||
<div class="ct-docs-footer-copyright">
|
||||
© <script>
|
||||
document.write(new Date().getFullYear())
|
||||
</script> <a href="https://creative-tim.com" class="ct-docs-footer-copyright-author" target="_blank">Creative Tim & <a href="https://www.updivision.com" class="ct-docs-footer-copyright-author" target="_blank">UPDIVISION</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ct-docs-footer-col">
|
||||
<ul class="ct-docs-footer-nav-footer">
|
||||
<li>
|
||||
<a href="https://creative-tim.com" class="ct-docs-footer-nav-link" target="_blank">Creative Tim</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="https://www.updivision.com" class="ct-docs-footer-nav-link" target="_blank">UPDIVISION</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://www.creative-tim.com/contact-us" class="ct-docs-footer-nav-link" target="_blank">Contact Us</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://creative-tim.com/blog" class="ct-docs-footer-nav-link" target="_blank">Blog</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="../../assets/js/jquery.min.js" type="text/javascript"></script>
|
||||
<script src="../../assets/js/core/popper.min.js" type="text/javascript"></script>
|
||||
<script src="../../assets/js/core/bootstrap.bundle.min.js" type="text/javascript"></script>
|
||||
<script src="" type="text/javascript"></script>
|
||||
<script src="" type="text/javascript"></script>
|
||||
<script src="" type="text/javascript"></script>
|
||||
<script src="" type="text/javascript"></script>
|
||||
<script src="../../assets/js/prism.js" type="text/javascript"></script>
|
||||
<script src="../../assets/js/docs.min.js" type="text/javascript"></script>
|
||||
<script src="../../assets/js/holder.min.js" type="text/javascript"></script>
|
||||
<script src="../../assets/js/moment.min.js" type="text/javascript"></script>
|
||||
<script src="../../assets/js/material-dashboard.min.js" type="text/javascript"></script>
|
||||
<script>
|
||||
Holder.addTheme('gray', {
|
||||
bg: '#777',
|
||||
fg: 'rgba(255,255,255,.75)',
|
||||
font: 'Helvetica',
|
||||
fontweight: 'normal'
|
||||
})
|
||||
|
||||
</script>
|
||||
<script>
|
||||
// Facebook Pixel Code Don't Delete
|
||||
! function (f, b, e, v, n, t, s) {
|
||||
if (f.fbq) return;
|
||||
n = f.fbq = function () {
|
||||
n.callMethod ?
|
||||
n.callMethod.apply(n, arguments) : n.queue.push(arguments)
|
||||
};
|
||||
if (!f._fbq) f._fbq = n;
|
||||
n.push = n;
|
||||
n.loaded = !0;
|
||||
n.version = '2.0';
|
||||
n.queue = [];
|
||||
t = b.createElement(e);
|
||||
t.async = !0;
|
||||
t.src = v;
|
||||
s = b.getElementsByTagName(e)[0];
|
||||
s.parentNode.insertBefore(t, s)
|
||||
}(window,
|
||||
document, 'script', '//connect.facebook.net/en_US/fbevents.js');
|
||||
|
||||
try {
|
||||
fbq('init', '111649226022273');
|
||||
fbq('track', "PageView");
|
||||
|
||||
} catch (err) {
|
||||
console.log('Facebook Track Error:', err);
|
||||
}
|
||||
|
||||
</script>
|
||||
<script src="../../assets/js/docs.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user