update,
This commit is contained in:
louiscklaw
@@ -0,0 +1,926 @@
|
||||
|
||||
<!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="">
|
||||
<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-active ">
|
||||
<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="#primary-colors">Primary colors</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#light-neutrals">Light neutrals</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">
|
||||
Bootstrap Colors
|
||||
</h1>
|
||||
<div class="avatar-group mt-3">
|
||||
</div>
|
||||
</div>
|
||||
<p class="ct-docs-page-title-lead">Convey meaning through color with a handful of color utility classes. Includes support for styling links with hover states, too.</p>
|
||||
<hr class="ct-docs-hr">
|
||||
<h2 id="primary-colors">Primary colors</h2>
|
||||
<p>Our primary palette is comprised of neutrals, white, and blue. These colors are present across most touch points from marketing to product.</p>
|
||||
<div class="row">
|
||||
<div class="col-lg-4 col-md-6">
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-header bg-primary">
|
||||
<div class="pass-fail d-none">
|
||||
<div class="pass-fail-item-wrap">
|
||||
<div class="pass-fail-item-group">
|
||||
<div class="pass-fail-item">
|
||||
<div class="example">A</div>
|
||||
<div class="lozenge">Fail</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pass-fail-item-group">
|
||||
<div class="pass-fail-item white small">
|
||||
<div class="example">A</div>
|
||||
<div class="lozenge">Pass</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-swatch-body">
|
||||
<div class="prop-item-wrap">
|
||||
<div class="prop-item">
|
||||
<div class="label">Name</div>
|
||||
<div class="value">Primary</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="prop-item-wrap">
|
||||
<div class="prop-item">
|
||||
<div class="label">Hex</div>
|
||||
<div class="value">#e91e63</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4 col-md-6">
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-header bg-secondary">
|
||||
<div class="pass-fail d-none">
|
||||
<div class="pass-fail-item-wrap">
|
||||
<div class="pass-fail-item-group">
|
||||
<div class="pass-fail-item">
|
||||
<div class="example">A</div>
|
||||
<div class="lozenge">Fail</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pass-fail-item-group">
|
||||
<div class="pass-fail-item white small">
|
||||
<div class="example">A</div>
|
||||
<div class="lozenge">Pass</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-swatch-body">
|
||||
<div class="prop-item-wrap">
|
||||
<div class="prop-item">
|
||||
<div class="label">Name</div>
|
||||
<div class="value">Secondary</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="prop-item-wrap">
|
||||
<div class="prop-item">
|
||||
<div class="label">Hex</div>
|
||||
<div class="value">#7b809a</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4 col-md-6">
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-header bg-info">
|
||||
<div class="pass-fail d-none">
|
||||
<div class="pass-fail-item-wrap">
|
||||
<div class="pass-fail-item-group">
|
||||
<div class="pass-fail-item">
|
||||
<div class="example">A</div>
|
||||
<div class="lozenge">Fail</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pass-fail-item-group">
|
||||
<div class="pass-fail-item white small">
|
||||
<div class="example">A</div>
|
||||
<div class="lozenge">Pass</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-swatch-body">
|
||||
<div class="prop-item-wrap">
|
||||
<div class="prop-item">
|
||||
<div class="label">Name</div>
|
||||
<div class="value">Info</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="prop-item-wrap">
|
||||
<div class="prop-item">
|
||||
<div class="label">Hex</div>
|
||||
<div class="value">#03a9f4</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4 col-md-6">
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-header bg-success">
|
||||
<div class="pass-fail d-none">
|
||||
<div class="pass-fail-item-wrap">
|
||||
<div class="pass-fail-item-group">
|
||||
<div class="pass-fail-item">
|
||||
<div class="example">A</div>
|
||||
<div class="lozenge">Fail</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pass-fail-item-group">
|
||||
<div class="pass-fail-item white small">
|
||||
<div class="example">A</div>
|
||||
<div class="lozenge">Pass</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-swatch-body">
|
||||
<div class="prop-item-wrap">
|
||||
<div class="prop-item">
|
||||
<div class="label">Name</div>
|
||||
<div class="value">Success</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="prop-item-wrap">
|
||||
<div class="prop-item">
|
||||
<div class="label">Hex</div>
|
||||
<div class="value">#4caf50</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4 col-md-6">
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-header bg-danger">
|
||||
<div class="pass-fail d-none">
|
||||
<div class="pass-fail-item-wrap">
|
||||
<div class="pass-fail-item-group">
|
||||
<div class="pass-fail-item">
|
||||
<div class="example">A</div>
|
||||
<div class="lozenge">Fail</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pass-fail-item-group">
|
||||
<div class="pass-fail-item white small">
|
||||
<div class="example">A</div>
|
||||
<div class="lozenge">Pass</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-swatch-body">
|
||||
<div class="prop-item-wrap">
|
||||
<div class="prop-item">
|
||||
<div class="label">Name</div>
|
||||
<div class="value">Danger</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="prop-item-wrap">
|
||||
<div class="prop-item">
|
||||
<div class="label">Hex</div>
|
||||
<div class="value">#f44335</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4 col-md-6">
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-header bg-warning">
|
||||
<div class="pass-fail d-none">
|
||||
<div class="pass-fail-item-wrap">
|
||||
<div class="pass-fail-item-group">
|
||||
<div class="pass-fail-item">
|
||||
<div class="example">A</div>
|
||||
<div class="lozenge">Fail</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pass-fail-item-group">
|
||||
<div class="pass-fail-item white small">
|
||||
<div class="example">A</div>
|
||||
<div class="lozenge">Pass</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-swatch-body">
|
||||
<div class="prop-item-wrap">
|
||||
<div class="prop-item">
|
||||
<div class="label">Name</div>
|
||||
<div class="value">Warning</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="prop-item-wrap">
|
||||
<div class="prop-item">
|
||||
<div class="label">Hex</div>
|
||||
<div class="value">#fb8c00</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h2 id="light-neutrals">Light neutrals</h2>
|
||||
<p>Light neutrals are helpful for offsetting content in a primarily white layout without losing warmth and cleanliness, and are therefore often used as a background color for web components.</p>
|
||||
<table class="table table-colors">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="swatch" style="background-color: #f8f9fa;"></div>
|
||||
Gray 100
|
||||
</td>
|
||||
<td>
|
||||
<div class="lozenge">Hex</div>
|
||||
#f8f9fa
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="swatch" style="background-color: #e9ecef;"></div>
|
||||
Gray 200
|
||||
</td>
|
||||
<td>
|
||||
<div class="lozenge">Hex</div>
|
||||
#e9ecef
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="swatch" style="background-color: #dee2e6;"></div>
|
||||
Gray 300
|
||||
</td>
|
||||
<td>
|
||||
<div class="lozenge">Hex</div>
|
||||
#dee2e6
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="swatch" style="background-color: #ced4da;"></div>
|
||||
Gray 400
|
||||
</td>
|
||||
<td>
|
||||
<div class="lozenge">Hex</div>
|
||||
#ced4da
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="swatch" style="background-color: #adb5bd;"></div>
|
||||
Gray 500
|
||||
</td>
|
||||
<td>
|
||||
<div class="lozenge">Hex</div>
|
||||
#adb5bd
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="swatch" style="background-color: #6c757d;"></div>
|
||||
Gray 600
|
||||
</td>
|
||||
<td>
|
||||
<div class="lozenge">Hex</div>
|
||||
#6c757d
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="swatch" style="background-color: #495057;"></div>
|
||||
Gray 700
|
||||
</td>
|
||||
<td>
|
||||
<div class="lozenge">Hex</div>
|
||||
#495057
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="swatch" style="background-color: #343a40;"></div>
|
||||
Gray 800
|
||||
</td>
|
||||
<td>
|
||||
<div class="lozenge">Hex</div>
|
||||
#343a40
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="swatch" style="background-color: #212529;"></div>
|
||||
Gray 900
|
||||
</td>
|
||||
<td>
|
||||
<div class="lozenge">Hex</div>
|
||||
#212529
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</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>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -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>
|
||||
Icons | Material Dashboard 2 FREE Laravel by Creative Tim & UPDIVISION
|
||||
</title>
|
||||
|
||||
<link rel="canonical" href="https://www.creative-tim.com/learning-lab/bootstrap/icons/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="">
|
||||
<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=" ">
|
||||
<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="ct-docs-nav-sidenav-active">
|
||||
<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="#material-icons">Material Icons</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#font-awesome-5">Font Awesome 5</a>
|
||||
<ul>
|
||||
<li class="toc-entry toc-h3"><a href="#usage">Usage</a></li>
|
||||
<li class="toc-entry toc-h3"><a href="#initialization">Initialization</a></li>
|
||||
<li class="toc-entry toc-h3"><a href="#icons">Icons</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="toc-entry toc-h2"><a href="#bootstrap-glyphicons">Bootstrap Glyphicons</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">
|
||||
Bootstrap Icons
|
||||
</h1>
|
||||
<div class="avatar-group mt-3">
|
||||
</div>
|
||||
</div>
|
||||
<p class="ct-docs-page-title-lead">Through most of the examples in this kit, we have used the default Icons for the Material Design provided by Google.</p>
|
||||
<hr class="ct-docs-hr">
|
||||
<h2 id="material-icons">Material Icons</h2>
|
||||
<p>Through most of the examples in this dashboard, we have used the default <a href="https://fonts.google.com/icons" target="_blank" rel="nofollow">Icons for the Material Design</a> provided by Google.</p>
|
||||
<div class="ct-example">
|
||||
<i class="material-icons">face</i>
|
||||
</div>
|
||||
<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>i</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>material-icons<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>face<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>i</span><span class="token punctuation">></span></span></code></pre>
|
||||
</figure>
|
||||
<h2 id="font-awesome-5">Font Awesome 5</h2>
|
||||
<p>Optionally, Material Dashboard comes with Font Awesome which means 3000+ more vector icons made for you to use.</p>
|
||||
<h3 id="usage">Usage</h3>
|
||||
<p>In order to use this icons on your page you will need to include the following script in the <code class=" highlighter-rouge language-plaintext"><head></code> section of your page before the theme’s main style:</p>
|
||||
<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>link</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>/assets/vendor/@fortawesome/fontawesome-free/css/all.min.css<span class="token punctuation">"</span></span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></code></pre>
|
||||
</figure>
|
||||
<h3 id="initialization">Initialization</h3>
|
||||
<p>Start placing icons in your HTML’s <code class=" highlighter-rouge language-plaintext"><body></code>. We recommend using a consistent HTML element, like <code class=" highlighter-rouge language-plaintext"><i></code>. Find the right icon and learn how to reference it in your markup.</p>
|
||||
<p>You need to know two bits of information to reference an icon:</p>
|
||||
<ol>
|
||||
<li>its name, prefixed with fa- and</li>
|
||||
<li>the style you want to use’s corresponding prefix.</li>
|
||||
</ol>
|
||||
<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>i</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>fas fa-heart<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>i</span><span class="token punctuation">></span></span></code></pre>
|
||||
</figure>
|
||||
<h3 id="icons">Icons</h3>
|
||||
<p>Get the icon you need on the official website:</p>
|
||||
<p><a href="https://fontawesome.com/" rel="nofollow" target="_blank" class="btn bg-gradient-primary"> Go to Font Awesome</a></p>
|
||||
<h2 id="bootstrap-glyphicons">Bootstrap Glyphicons</h2>
|
||||
<p>Another option for icons are <a href="https://www.glyphicons.com/sets/halflings/" rel="nofollow" target="_blank"> Glyphicons</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>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,732 @@
|
||||
|
||||
<!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>
|
||||
Utilities | Material Dashboard 2 FREE Laravel by Creative Tim & UPDIVISION
|
||||
</title>
|
||||
<link rel="canonical" href="https://www.creative-tim.com/learning-lab/bootstrap/utilities/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="">
|
||||
<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=" ">
|
||||
<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="ct-docs-nav-sidenav-active">
|
||||
<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-flexbox">Bootstrap Flexbox</a>
|
||||
<ul>
|
||||
<li class="toc-entry toc-h3"><a href="#bootstrap-align-left">Bootstrap Align Left</a></li>
|
||||
<li class="toc-entry toc-h3"><a href="#bootstrap-align-center">Bootstrap Align Center</a></li>
|
||||
<li class="toc-entry toc-h3"><a href="#bootstrap-align-right">Bootstrap Align Right</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="toc-entry toc-h2"><a href="#bootstrap-text-alignment">Bootstrap Text Alignment</a>
|
||||
<ul>
|
||||
<li class="toc-entry toc-h3"><a href="#bootstrap-text-left">Bootstrap Text Left</a></li>
|
||||
<li class="toc-entry toc-h3"><a href="#bootstrap-text-center">Bootstrap Text Center</a></li>
|
||||
<li class="toc-entry toc-h3"><a href="#bootstrap-text-right">Bootstrap Text Right</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="toc-entry toc-h2"><a href="#bootstrap-responsive-image">Bootstrap Responsive Image</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">
|
||||
Bootstrap Utilities
|
||||
</h1>
|
||||
<div class="avatar-group mt-3">
|
||||
</div>
|
||||
</div>
|
||||
<p class="ct-docs-page-title-lead">Bootstrap 5 has a lot of utility/helper classes to quickly style elements without using any CSS code.</p>
|
||||
<hr class="ct-docs-hr">
|
||||
<h2 id="bootstrap-flexbox">Bootstrap Flexbox</h2>
|
||||
<p>Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities. For more complex implementations, custom CSS may be necessary.</p>
|
||||
<div class="ct-example" style="position: relative;border: 2px solid #f5f7ff !important;border-bottom: none !important;padding: 1rem 1rem 2rem 1rem;margin-bottom: -1.25rem;">
|
||||
<div class="d-flex p-2">I'm a flexbox container!</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>d-flex p-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>I'm a flexbox container!<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>
|
||||
<div class="ct-example" style="position: relative;border: 2px solid #f5f7ff !important;border-bottom: none !important;padding: 1rem 1rem 2rem 1rem;margin-bottom: -1.25rem;">
|
||||
<div class="d-inline-flex p-2">I'm an inline flexbox container!</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>d-inline-flex p-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>I'm an inline flexbox container!<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>
|
||||
<p>Responsive variations also exist for <code class=" highlighter-rouge language-plaintext">.d-flex</code> and <code class=" highlighter-rouge language-plaintext">.d-inline-flex</code>.</p>
|
||||
<ul>
|
||||
<li><code class=" highlighter-rouge language-plaintext">.d-flex</code></li>
|
||||
<li><code class=" highlighter-rouge language-plaintext">.d-inline-flex</code></li>
|
||||
<li><code class=" highlighter-rouge language-plaintext">.d-sm-flex</code></li>
|
||||
<li><code class=" highlighter-rouge language-plaintext">.d-sm-inline-flex</code></li>
|
||||
<li><code class=" highlighter-rouge language-plaintext">.d-md-flex</code></li>
|
||||
<li><code class=" highlighter-rouge language-plaintext">.d-md-inline-flex</code></li>
|
||||
<li><code class=" highlighter-rouge language-plaintext">.d-lg-flex</code></li>
|
||||
<li><code class=" highlighter-rouge language-plaintext">.d-lg-inline-flex</code></li>
|
||||
<li><code class=" highlighter-rouge language-plaintext">.d-xl-flex</code></li>
|
||||
<li><code class=" highlighter-rouge language-plaintext">.d-xl-inline-flex</code></li>
|
||||
</ul>
|
||||
<h3 id="bootstrap-align-left">Bootstrap Align Left</h3>
|
||||
<div class="ct-example" style="position: relative;border: 2px solid #f5f7ff !important;border-bottom: none !important;padding: 1rem 1rem 2rem 1rem;margin-bottom: -1.25rem;">
|
||||
<div class="d-flex justify-content-start mb-3">
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</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>d-flex justify-content-start mb-3<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>p-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Flex item<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>p-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Flex item<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>p-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Flex item<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>
|
||||
<h3 id="bootstrap-align-center">Bootstrap Align Center</h3>
|
||||
<div class="ct-example" style="position: relative;border: 2px solid #f5f7ff !important;border-bottom: none !important;padding: 1rem 1rem 2rem 1rem;margin-bottom: -1.25rem;">
|
||||
<div class="d-flex justify-content-center mb-3">
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</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>d-flex justify-content-center mb-3<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>p-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Flex item<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>p-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Flex item<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>p-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Flex item<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>
|
||||
<h3 id="bootstrap-align-right">Bootstrap Align Right</h3>
|
||||
<div class="ct-example" style="position: relative;border: 2px solid #f5f7ff !important;border-bottom: none !important;padding: 1rem 1rem 2rem 1rem;margin-bottom: -1.25rem;">
|
||||
<div class="d-flex justify-content-end mb-3">
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</div>
|
||||
<div class="p-2">Flex item</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>d-flex justify-content-end mb-3<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>p-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Flex item<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>p-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Flex item<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>p-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Flex item<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>
|
||||
<h2 id="bootstrap-text-alignment">Bootstrap Text Alignment</h2>
|
||||
<p>Easily realign text to components with text alignment classes.</p>
|
||||
<h3 id="bootstrap-text-left">Bootstrap Text Left</h3>
|
||||
<div class="ct-example" style="position: relative;border: 2px solid #f5f7ff !important;border-bottom: none !important;padding: 1rem 1rem 2rem 1rem;margin-bottom: -1.25rem;">
|
||||
<p class="text-start">Left aligned text.</p>
|
||||
</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>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text-start<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Left aligned text.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span></code></pre>
|
||||
</figure>
|
||||
</div>
|
||||
<h3 id="bootstrap-text-center">Bootstrap Text Center</h3>
|
||||
<div class="ct-example" style="position: relative;border: 2px solid #f5f7ff !important;border-bottom: none !important;padding: 1rem 1rem 2rem 1rem;margin-bottom: -1.25rem;">
|
||||
<p class="text-center">Center aligned text.</p>
|
||||
</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>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text-center<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Center aligned text.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span></code></pre>
|
||||
</figure>
|
||||
</div>
|
||||
<h3 id="bootstrap-text-right">Bootstrap Text Right</h3>
|
||||
<div class="ct-example" style="position: relative;border: 2px solid #f5f7ff !important;border-bottom: none !important;padding: 1rem 1rem 2rem 1rem;margin-bottom: -1.25rem;">
|
||||
<p class="text-end">Right aligned text.</p>
|
||||
</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>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text-end<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Right aligned text.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span></code></pre>
|
||||
</figure>
|
||||
</div>
|
||||
<h2 id="bootstrap-responsive-image">Bootstrap Responsive Image</h2>
|
||||
<p>Images in Bootstrap are made responsive with <code class=" highlighter-rouge language-plaintext">.img-fluid</code>. <code class=" highlighter-rouge language-plaintext">max-width: 100%;</code> and <code class=" highlighter-rouge language-plaintext">height: auto;</code> are applied to the image so that it scales with the parent element.</p>
|
||||
<div class="ct-example" style="position: relative;border: 2px solid #f5f7ff !important;border-bottom: none !important;padding: 1rem 1rem 2rem 1rem;margin-bottom: -1.25rem;">
|
||||
<img src="https://images.unsplash.com/photo-1578271887552-5ac3a72752bc?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1950&q=80" class="img-fluid border-radius-lg" alt="Responsive image">
|
||||
</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>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>https://images.unsplash.com/photo-1578271887552-5ac3a72752bc?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1950&q=80<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>img-fluid border-radius-lg<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Responsive image<span class="token punctuation">"</span></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>
|
||||
Reference in New Issue
Block a user