1014 lines
84 KiB
HTML
1014 lines
84 KiB
HTML
|
||
<!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>
|
||
Typography | Material Dashboard 2 FREE Laravel by Creative Tim & UPDIVISION
|
||
</title>
|
||
<link rel="canonical" href="https://www.creative-tim.com/learning-lab/bootstrap/typography/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="ct-docs-nav-sidenav-active">
|
||
<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="#headings">Headings</a>
|
||
<ul>
|
||
<li class="toc-entry toc-h3"><a href="#customizing-headings">Customizing headings</a></li>
|
||
</ul>
|
||
</li>
|
||
<li class="toc-entry toc-h2"><a href="#display-headings">Display Headings</a></li>
|
||
<li class="toc-entry toc-h2"><a href="#lead">Lead</a></li>
|
||
<li class="toc-entry toc-h2"><a href="#inline-text-elements">Inline text elements</a></li>
|
||
<li class="toc-entry toc-h2"><a href="#text-utilities">Text utilities</a></li>
|
||
<li class="toc-entry toc-h2"><a href="#abbreviations">Abbreviations</a></li>
|
||
<li class="toc-entry toc-h2"><a href="#blockquotes">Blockquotes</a>
|
||
<ul>
|
||
<li class="toc-entry toc-h3"><a href="#naming-a-source">Naming a source</a></li>
|
||
<li class="toc-entry toc-h3"><a href="#alignment">Alignment</a></li>
|
||
</ul>
|
||
</li>
|
||
<li class="toc-entry toc-h2"><a href="#lists">Lists</a>
|
||
<ul>
|
||
<li class="toc-entry toc-h3"><a href="#unstyled">Unstyled</a></li>
|
||
<li class="toc-entry toc-h3"><a href="#inline">Inline</a></li>
|
||
<li class="toc-entry toc-h3"><a href="#description-list-alignment">Description list alignment</a></li>
|
||
</ul>
|
||
</li>
|
||
<li class="toc-entry toc-h2"><a href="#responsive-typography">Responsive Typography</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 Typography
|
||
</h1>
|
||
<div class="avatar-group mt-3">
|
||
</div>
|
||
</div>
|
||
<p class="ct-docs-page-title-lead">Documentation and examples for Bootstrap typography, including global settings, headings, body text, lists, and more.</p>
|
||
<hr class="ct-docs-hr">
|
||
<h2 id="headings">Headings</h2>
|
||
<p>All HTML headings, <code class=" highlighter-rouge language-plaintext"><h1></code> through <code class=" highlighter-rouge language-plaintext"><h6></code>, are available.</p>
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>Heading</th>
|
||
<th>Example</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>
|
||
<p><code class=" highlighter-rouge language-plaintext"><h1></h1></code></p>
|
||
</td>
|
||
<td><span class="h1">h1. Bootstrap heading</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td>
|
||
<p><code class=" highlighter-rouge language-plaintext"><h2></h2></code></p>
|
||
</td>
|
||
<td><span class="h2">h2. Bootstrap heading</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td>
|
||
<p><code class=" highlighter-rouge language-plaintext"><h3></h3></code></p>
|
||
</td>
|
||
<td><span class="h3">h3. Bootstrap heading</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td>
|
||
<p><code class=" highlighter-rouge language-plaintext"><h4></h4></code></p>
|
||
</td>
|
||
<td><span class="h4">h4. Bootstrap heading</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td>
|
||
<p><code class=" highlighter-rouge language-plaintext"><h5></h5></code></p>
|
||
</td>
|
||
<td><span class="h5">h5. Bootstrap heading</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td>
|
||
<p><code class=" highlighter-rouge language-plaintext"><h6></h6></code></p>
|
||
</td>
|
||
<td><span class="h6">h6. Bootstrap heading</span></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
<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>h1</span><span class="token punctuation">></span></span>h1. Bootstrap heading<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>h2. Bootstrap heading<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h3</span><span class="token punctuation">></span></span>h3. Bootstrap heading<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h3</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h4</span><span class="token punctuation">></span></span>h4. Bootstrap heading<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h4</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h5</span><span class="token punctuation">></span></span>h5. Bootstrap heading<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h5</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h6</span><span class="token punctuation">></span></span>h6. Bootstrap heading<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h6</span><span class="token punctuation">></span></span></code></pre>
|
||
</figure>
|
||
</div>
|
||
<p><code class=" highlighter-rouge language-plaintext">.h1</code> through <code class=" highlighter-rouge language-plaintext">.h6</code> classes are also available, for when you want to match the font styling of a heading but cannot use the associated HTML element.</p>
|
||
<div class="ct-example">
|
||
<p class="h1">h1. Bootstrap heading</p>
|
||
<p class="h2">h2. Bootstrap heading</p>
|
||
<p class="h3">h3. Bootstrap heading</p>
|
||
<p class="h4">h4. Bootstrap heading</p>
|
||
<p class="h5">h5. Bootstrap heading</p>
|
||
<p class="h6">h6. Bootstrap heading</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>h1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>h1. Bootstrap heading<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>h2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>h2. Bootstrap heading<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>h3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>h3. Bootstrap heading<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>h4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>h4. Bootstrap heading<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>h5<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>h5. Bootstrap heading<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>h6<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>h6. Bootstrap heading<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="customizing-headings">Customizing headings</h3>
|
||
<p>Use the included utility classes to recreate the small secondary heading text from Bootstrap 3.</p>
|
||
<div class="ct-example">
|
||
<span class="h3">
|
||
Fancy display heading
|
||
<small class="text-muted">With faded secondary text</small>
|
||
</span>
|
||
</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>h3</span><span class="token punctuation">></span></span>
|
||
Fancy display heading
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>small</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text-muted<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>With faded secondary text<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>small</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h3</span><span class="token punctuation">></span></span></code></pre>
|
||
</figure>
|
||
</div>
|
||
<h2 id="display-headings">Display Headings</h2>
|
||
<p>Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using a <strong>display heading</strong>—a larger, slightly more opinionated heading style.</p>
|
||
<div class="ct-example bd-example-type">
|
||
<table class="table">
|
||
<tbody>
|
||
<tr>
|
||
<td><span class="display-1">Display 1</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td><span class="display-2">Display 2</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td><span class="display-3">Display 3</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td><span class="display-4">Display 4</span></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</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>h1</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>display-1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Display 1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>display-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Display 2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>display-3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Display 3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>display-4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Display 4<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span></code></pre>
|
||
</figure>
|
||
</div>
|
||
<h2 id="lead">Lead</h2>
|
||
<p>Make a paragraph stand out by adding <code class=" highlighter-rouge language-plaintext">.lead</code>.</p>
|
||
<div class="ct-example">
|
||
<p class="lead">
|
||
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
|
||
</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>lead<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
|
||
<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="inline-text-elements">Inline text elements</h2>
|
||
<p>Styling for common inline HTML5 elements.</p>
|
||
<div class="ct-example">
|
||
<p>You can use the mark tag to <mark>highlight</mark> text.</p>
|
||
<p><del>This line of text is meant to be treated as deleted text.</del></p>
|
||
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
|
||
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
|
||
<p><u>This line of text will render as underlined</u></p>
|
||
<p><small>This line of text is meant to be treated as fine print.</small></p>
|
||
<p><strong>This line rendered as bold text.</strong></p>
|
||
<p><em>This line rendered as italicized text.</em></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 punctuation">></span></span>You can use the mark tag to <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>mark</span><span class="token punctuation">></span></span>highlight<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>mark</span><span class="token punctuation">></span></span> text.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>del</span><span class="token punctuation">></span></span>This line of text is meant to be treated as deleted text.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>del</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>s</span><span class="token punctuation">></span></span>This line of text is meant to be treated as no longer accurate.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>s</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ins</span><span class="token punctuation">></span></span>This line of text is meant to be treated as an addition to the document.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ins</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>u</span><span class="token punctuation">></span></span>This line of text will render as underlined<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>u</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>small</span><span class="token punctuation">></span></span>This line of text is meant to be treated as fine print.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>small</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>strong</span><span class="token punctuation">></span></span>This line rendered as bold text.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>strong</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>em</span><span class="token punctuation">></span></span>This line rendered as italicized text.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>em</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span></code></pre>
|
||
</figure>
|
||
</div>
|
||
<p><code class=" highlighter-rouge language-plaintext">.mark</code> and <code class=" highlighter-rouge language-plaintext">.small</code> classes are also available to apply the same styles as <code class=" highlighter-rouge language-plaintext"><mark></code> and <code class=" highlighter-rouge language-plaintext"><small></code> while avoiding any unwanted semantic implications that the tags would bring.</p>
|
||
<p>While not shown above, feel free to use <code class=" highlighter-rouge language-plaintext"><b></code> and <code class=" highlighter-rouge language-plaintext"><i></code> in HTML5. <code class=" highlighter-rouge language-plaintext"><b></code> is meant to highlight words or phrases without conveying additional importance while <code class=" highlighter-rouge language-plaintext"><i></code> is mostly for voice, technical terms, etc.</p>
|
||
<h2 id="text-utilities">Text utilities</h2>
|
||
<p>Change text alignment, transform, style, weight, and color with our text utilities and color utilities.</p>
|
||
<h2 id="abbreviations">Abbreviations</h2>
|
||
<p>Stylized implementation of HTML’s <code class=" highlighter-rouge language-plaintext"><abbr></code> element for abbreviations and acronyms to show the expanded version on hover. Abbreviations have a default underline and gain a help cursor to provide additional context on hover and to users of assistive technologies.</p>
|
||
<p>Add <code class=" highlighter-rouge language-plaintext">.initialism</code> to an abbreviation for a slightly smaller font-size.</p>
|
||
<div class="ct-example">
|
||
<p><abbr title="attribute">attr</abbr></p>
|
||
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></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 punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>abbr</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>attribute<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>attr<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>abbr</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>abbr</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>HyperText Markup Language<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>initialism<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>HTML<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>abbr</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span></code></pre>
|
||
</figure>
|
||
</div>
|
||
<h2 id="blockquotes">Blockquotes</h2>
|
||
<p>For quoting blocks of content from another source within your document. Wrap <code class=" highlighter-rouge language-plaintext"><blockquote class="blockquote"></code> around any <abbr title="HyperText Markup Language">HTML</abbr> as the quote.</p>
|
||
<div class="ct-example">
|
||
<blockquote class="blockquote">
|
||
<p class="mb-0 ps-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||
</blockquote>
|
||
</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>blockquote</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>blockquote<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>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>mb-0 ps-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>blockquote</span><span class="token punctuation">></span></span></code></pre>
|
||
</figure>
|
||
</div>
|
||
<h3 id="naming-a-source">Naming a source</h3>
|
||
<p>Add a <code class=" highlighter-rouge language-plaintext"><figcaption class="blockquote-footer"></code> for identifying the source.</p>
|
||
<div class="ct-example">
|
||
<figure>
|
||
<blockquote class="blockquote">
|
||
<p class="ps-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||
</blockquote>
|
||
<figcaption class="blockquote-footer ps-3">
|
||
Someone famous in <cite title="Source Title">Source Title</cite>
|
||
</figcaption>
|
||
</figure>
|
||
</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>figure</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>blockquote</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>blockquote<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>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ps-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>blockquote</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>figcaption</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>blockquote-footer ps-3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
Someone famous in <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>cite</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Source Title<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Source Title<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>cite</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>figcaption</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>figure</span><span class="token punctuation">></span></span></code></pre>
|
||
</figure>
|
||
</div>
|
||
<h3 id="alignment">Alignment</h3>
|
||
<p>Use text utilities as needed to change the alignment of your blockquote.</p>
|
||
<div class="ct-example">
|
||
<figure>
|
||
<blockquote class="blockquote text-center">
|
||
<p class="ps-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||
</blockquote>
|
||
<figcaption class="blockquote-footer text-center">
|
||
Someone famous in <cite title="Source Title">Source Title</cite>
|
||
</figcaption>
|
||
</figure>
|
||
<figure>
|
||
<blockquote class="blockquote text-right">
|
||
<p class="ps-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||
</blockquote>
|
||
<figcaption class="blockquote-footer text-right">
|
||
Someone famous in <cite title="Source Title">Source Title</cite>
|
||
</figcaption>
|
||
</figure>
|
||
</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>figure</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>blockquote</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>blockquote text-center<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>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ps-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>blockquote</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>figcaption</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>blockquote-footer text-center<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
Someone famous in <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>cite</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Source Title<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Source Title<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>cite</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>figcaption</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>figure</span><span class="token punctuation">></span></span>
|
||
|
||
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>figure</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>blockquote</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>blockquote text-right<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>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ps-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>blockquote</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>figcaption</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>blockquote-footer text-right<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
Someone famous in <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>cite</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Source Title<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Source Title<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>cite</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>figcaption</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>figure</span><span class="token punctuation">></span></span></code></pre>
|
||
</figure>
|
||
</div>
|
||
<h2 id="lists">Lists</h2>
|
||
<h3 id="unstyled">Unstyled</h3>
|
||
<p>Remove the default <code class=" highlighter-rouge language-plaintext">list-style</code> and left margin on list items (immediate children only). <strong>This only applies to immediate children list items</strong>, meaning you will need to add the class for any nested lists as well.</p>
|
||
<div class="ct-example">
|
||
<ul class="list-unstyled">
|
||
<li>Lorem ipsum dolor sit amet</li>
|
||
<li>Consectetur adipiscing elit</li>
|
||
<li>Integer molestie lorem at massa</li>
|
||
<li>Facilisis in pretium nisl aliquet</li>
|
||
<li>Nulla volutpat aliquam velit
|
||
<ul>
|
||
<li>Phasellus iaculis neque</li>
|
||
<li>Purus sodales ultricies</li>
|
||
<li>Vestibulum laoreet porttitor sem</li>
|
||
<li>Ac tristique libero volutpat at</li>
|
||
</ul>
|
||
</li>
|
||
<li>Faucibus porta lacus fringilla vel</li>
|
||
<li>Aenean sit amet erat nunc</li>
|
||
<li>Eget porttitor lorem</li>
|
||
</ul>
|
||
</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>ul</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>list-unstyled<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>li</span><span class="token punctuation">></span></span>Lorem ipsum dolor sit amet<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Consectetur adipiscing elit<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Integer molestie lorem at massa<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Facilisis in pretium nisl aliquet<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Nulla volutpat aliquam velit
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Phasellus iaculis neque<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Purus sodales ultricies<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Vestibulum laoreet porttitor sem<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Ac tristique libero volutpat at<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Faucibus porta lacus fringilla vel<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Aenean sit amet erat nunc<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Eget porttitor lorem<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span></code></pre>
|
||
</figure>
|
||
</div>
|
||
<h3 id="inline">Inline</h3>
|
||
<p>Remove a list’s bullets and apply some light <code class=" highlighter-rouge language-plaintext">margin</code> with a combination of two classes, <code class=" highlighter-rouge language-plaintext">.list-inline</code> and <code class=" highlighter-rouge language-plaintext">.list-inline-item</code>.</p>
|
||
<div class="ct-example">
|
||
<ul class="list-inline">
|
||
<li class="list-inline-item">Lorem ipsum</li>
|
||
<li class="list-inline-item">Phasellus iaculis</li>
|
||
<li class="list-inline-item">Nulla volutpat</li>
|
||
</ul>
|
||
</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>ul</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>list-inline<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>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>list-inline-item<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Lorem ipsum<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>list-inline-item<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Phasellus iaculis<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>list-inline-item<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Nulla volutpat<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span></code></pre>
|
||
</figure>
|
||
</div>
|
||
<h3 id="description-list-alignment">Description list alignment</h3>
|
||
<p>Align terms and descriptions horizontally by using our grid system’s predefined classes (or semantic mixins). For longer terms, you can optionally add a <code class=" highlighter-rouge language-plaintext">.text-truncate</code> class to truncate the text with an ellipsis.</p>
|
||
<div class="ct-example">
|
||
<dl class="row">
|
||
<dt class="col-sm-3">Description lists</dt>
|
||
<dd class="col-sm-9">A description list is perfect for defining terms.</dd>
|
||
<dt class="col-sm-3">Euismod</dt>
|
||
<dd class="col-sm-9">
|
||
<p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</p>
|
||
<p>Donec id elit non mi porta gravida at eget metus.</p>
|
||
</dd>
|
||
<dt class="col-sm-3">Malesuada porta</dt>
|
||
<dd class="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>
|
||
<dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
|
||
<dd class="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
|
||
<dt class="col-sm-3">Nesting</dt>
|
||
<dd class="col-sm-9">
|
||
<dl class="row">
|
||
<dt class="col-sm-4">Nested definition list</dt>
|
||
<dd class="col-sm-8">Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</dd>
|
||
</dl>
|
||
</dd>
|
||
</dl>
|
||
</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>dl</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>row<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dt</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>col-sm-3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Description lists<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dt</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dd</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>col-sm-9<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>A description list is perfect for defining terms.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dd</span><span class="token punctuation">></span></span>
|
||
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dt</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>col-sm-3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Euismod<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dt</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dd</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>col-sm-9<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>p</span><span class="token punctuation">></span></span>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Donec id elit non mi porta gravida at eget metus.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dd</span><span class="token punctuation">></span></span>
|
||
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dt</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>col-sm-3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Malesuada porta<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dt</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dd</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>col-sm-9<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Etiam porta sem malesuada magna mollis euismod.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dd</span><span class="token punctuation">></span></span>
|
||
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dt</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>col-sm-3 text-truncate<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Truncated term is truncated<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dt</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dd</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>col-sm-9<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dd</span><span class="token punctuation">></span></span>
|
||
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dt</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>col-sm-3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Nesting<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dt</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dd</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>col-sm-9<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>dl</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>row<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dt</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>col-sm-4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Nested definition list<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dt</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dd</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>col-sm-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dd</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dl</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dd</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dl</span><span class="token punctuation">></span></span></code></pre>
|
||
</figure>
|
||
</div>
|
||
<h2 id="responsive-typography">Responsive Typography</h2>
|
||
<p><em>Responsive typography</em> refers to scaling text and components by simply adjusting the root element’s <code class=" highlighter-rouge language-plaintext">font-size</code> within a series of media queries. Bootstrap doesn’t do this for you, but it’s fairly easy to add if you need it.</p>
|
||
<p>Here’s an example of it in practice. Choose whatever <code class=" highlighter-rouge language-plaintext">font-size</code>s and media queries you wish.</p>
|
||
<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-scss"><code class=" language-scss" data-lang="scss">html {
|
||
font-size: 1rem;
|
||
}
|
||
|
||
@include media-breakpoint-up(sm) {
|
||
html {
|
||
font-size: 1.2rem;
|
||
}
|
||
}
|
||
|
||
@include media-breakpoint-up(md) {
|
||
html {
|
||
font-size: 1.4rem;
|
||
}
|
||
}
|
||
|
||
@include media-breakpoint-up(lg) {
|
||
html {
|
||
font-size: 1.6rem;
|
||
}
|
||
}</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>
|