mirror of
https://github.com/twbs/bootstrap.git
synced 2024-12-13 01:08:58 +01:00
961 lines
59 KiB
HTML
961 lines
59 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||
<meta name="description" content="Customize Bootstrap 4 with our new built-in Sass variables for global style preferences for easy theming and component changes.">
|
||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||
<meta name="generator" content="Jekyll v3.7.0">
|
||
|
||
<title>Theming Bootstrap · Bootstrap</title>
|
||
|
||
<!-- Bootstrap core CSS -->
|
||
|
||
<link href="/docs/4.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
|
||
|
||
|
||
<!-- Documentation extras -->
|
||
|
||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||
|
||
<link href="/docs/4.0/assets/css/docs.min.css" rel="stylesheet">
|
||
|
||
<!-- Favicons -->
|
||
<link rel="apple-touch-icon" href="/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||
<link rel="icon" href="/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
|
||
<link rel="icon" href="/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
|
||
<link rel="manifest" href="/assets/img/favicons/manifest.json">
|
||
<link rel="mask-icon" href="/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
|
||
<link rel="icon" href="/favicon.ico">
|
||
<meta name="msapplication-config" content="/assets/img/favicons/browserconfig.xml">
|
||
<meta name="theme-color" content="#563d7c">
|
||
|
||
|
||
<!-- Twitter -->
|
||
<meta name="twitter:card" content="summary">
|
||
<meta name="twitter:site" content="@getbootstrap">
|
||
<meta name="twitter:creator" content="@getbootstrap">
|
||
<meta name="twitter:title" content="Theming Bootstrap">
|
||
<meta name="twitter:description" content="Customize Bootstrap 4 with our new built-in Sass variables for global style preferences for easy theming and component changes.">
|
||
<meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
|
||
|
||
<!-- Facebook -->
|
||
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/getting-started/theming/">
|
||
<meta property="og:title" content="Theming Bootstrap">
|
||
<meta property="og:description" content="Customize Bootstrap 4 with our new built-in Sass variables for global style preferences for easy theming and component changes.">
|
||
<meta property="og:type" content="website">
|
||
<meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png">
|
||
<meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png">
|
||
<meta property="og:image:type" content="image/png">
|
||
<meta property="og:image:width" content="1200">
|
||
<meta property="og:image:height" content="630">
|
||
|
||
|
||
<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-146052-10', 'getbootstrap.com');
|
||
ga('send', 'pageview');
|
||
</script>
|
||
|
||
</head>
|
||
<body>
|
||
<a id="skippy" class="sr-only sr-only-focusable" href="#content">
|
||
<div class="container">
|
||
<span class="skiplink-text">Skip to main content</span>
|
||
</div>
|
||
</a>
|
||
|
||
<a href="https://getbootstrap.com" class="d-block px-3 py-2 text-center text-bold text-white bg-dark old-bv">There's a newer version of Bootstrap 4!</a>
|
||
|
||
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
|
||
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap"><svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
|
||
</a>
|
||
|
||
<div class="navbar-nav-scroll">
|
||
<ul class="navbar-nav bd-navbar-nav flex-row">
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link active" href="/docs/4.0/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Documentation</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="/docs/4.0/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="https://themes.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="https://jobs.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Jobs');" target="_blank" rel="noopener">Jobs</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="https://expo.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="https://blog.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<ul class="navbar-nav flex-row ml-md-auto d-none d-md-flex">
|
||
<li class="nav-item dropdown">
|
||
<a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||
v4.0
|
||
</a>
|
||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions">
|
||
<a class="dropdown-item" href="/docs/4.1/">Latest (v4.1.x)</a>
|
||
<a class="dropdown-item active" href="/docs/4.0/">v4.0.0</a>
|
||
<div class="dropdown-divider"></div>
|
||
<a class="dropdown-item" href="https://v4-alpha.getbootstrap.com/">v4 Alpha 6</a>
|
||
<a class="dropdown-item" href="https://getbootstrap.com/docs/3.3/">v3.3.7</a>
|
||
<a class="dropdown-item" href="https://getbootstrap.com/2.3.2/">v2.3.2</a>
|
||
</div>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link p-2" href="https://github.com/twbs/bootstrap" target="_blank" rel="noopener" aria-label="GitHub"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false"><title>GitHub</title><path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"/></svg>
|
||
</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link p-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener" aria-label="Twitter"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 416.32" focusable="false"><title>Twitter</title><path d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92" fill="currentColor"/></svg>
|
||
</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link p-2" href="https://bootstrap-slack.herokuapp.com" target="_blank" rel="noopener" aria-label="Slack"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512" focusable="false"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z" fill="currentColor"/></svg>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
|
||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0.zip">Download</a>
|
||
</header>
|
||
|
||
|
||
<div class="container-fluid">
|
||
<div class="row flex-xl-nowrap">
|
||
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
|
||
<form class="bd-search d-flex align-items-center">
|
||
<input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off">
|
||
<button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/></svg>
|
||
</button>
|
||
</form>
|
||
|
||
<nav class="collapse bd-links" id="bd-docs-nav"><div class="bd-toc-item active">
|
||
<a class="bd-toc-link" href="/docs/4.0/getting-started/introduction/">
|
||
Getting started
|
||
</a>
|
||
|
||
<ul class="nav bd-sidenav"><li>
|
||
<a href="/docs/4.0/getting-started/introduction/">
|
||
Introduction
|
||
</a></li><li>
|
||
<a href="/docs/4.0/getting-started/download/">
|
||
Download
|
||
</a></li><li>
|
||
<a href="/docs/4.0/getting-started/contents/">
|
||
Contents
|
||
</a></li><li>
|
||
<a href="/docs/4.0/getting-started/browsers-devices/">
|
||
Browsers & devices
|
||
</a></li><li>
|
||
<a href="/docs/4.0/getting-started/javascript/">
|
||
JavaScript
|
||
</a></li><li class="active bd-sidenav-active">
|
||
<a href="/docs/4.0/getting-started/theming/">
|
||
Theming
|
||
</a></li><li>
|
||
<a href="/docs/4.0/getting-started/build-tools/">
|
||
Build tools
|
||
</a></li><li>
|
||
<a href="/docs/4.0/getting-started/webpack/">
|
||
Webpack
|
||
</a></li><li>
|
||
<a href="/docs/4.0/getting-started/accessibility/">
|
||
Accessibility
|
||
</a></li></ul>
|
||
</div><div class="bd-toc-item">
|
||
<a class="bd-toc-link" href="/docs/4.0/layout/overview/">
|
||
Layout
|
||
</a>
|
||
|
||
<ul class="nav bd-sidenav"><li>
|
||
<a href="/docs/4.0/layout/overview/">
|
||
Overview
|
||
</a></li><li>
|
||
<a href="/docs/4.0/layout/grid/">
|
||
Grid
|
||
</a></li><li>
|
||
<a href="/docs/4.0/layout/media-object/">
|
||
Media object
|
||
</a></li><li>
|
||
<a href="/docs/4.0/layout/utilities-for-layout/">
|
||
Utilities for layout
|
||
</a></li></ul>
|
||
</div><div class="bd-toc-item">
|
||
<a class="bd-toc-link" href="/docs/4.0/content/reboot/">
|
||
Content
|
||
</a>
|
||
|
||
<ul class="nav bd-sidenav"><li>
|
||
<a href="/docs/4.0/content/reboot/">
|
||
Reboot
|
||
</a></li><li>
|
||
<a href="/docs/4.0/content/typography/">
|
||
Typography
|
||
</a></li><li>
|
||
<a href="/docs/4.0/content/code/">
|
||
Code
|
||
</a></li><li>
|
||
<a href="/docs/4.0/content/images/">
|
||
Images
|
||
</a></li><li>
|
||
<a href="/docs/4.0/content/tables/">
|
||
Tables
|
||
</a></li><li>
|
||
<a href="/docs/4.0/content/figures/">
|
||
Figures
|
||
</a></li></ul>
|
||
</div><div class="bd-toc-item">
|
||
<a class="bd-toc-link" href="/docs/4.0/components/alerts/">
|
||
Components
|
||
</a>
|
||
|
||
<ul class="nav bd-sidenav"><li>
|
||
<a href="/docs/4.0/components/alerts/">
|
||
Alerts
|
||
</a></li><li>
|
||
<a href="/docs/4.0/components/badge/">
|
||
Badge
|
||
</a></li><li>
|
||
<a href="/docs/4.0/components/breadcrumb/">
|
||
Breadcrumb
|
||
</a></li><li>
|
||
<a href="/docs/4.0/components/buttons/">
|
||
Buttons
|
||
</a></li><li>
|
||
<a href="/docs/4.0/components/button-group/">
|
||
Button group
|
||
</a></li><li>
|
||
<a href="/docs/4.0/components/card/">
|
||
Card
|
||
</a></li><li>
|
||
<a href="/docs/4.0/components/carousel/">
|
||
Carousel
|
||
</a></li><li>
|
||
<a href="/docs/4.0/components/collapse/">
|
||
Collapse
|
||
</a></li><li>
|
||
<a href="/docs/4.0/components/dropdowns/">
|
||
Dropdowns
|
||
</a></li><li>
|
||
<a href="/docs/4.0/components/forms/">
|
||
Forms
|
||
</a></li><li>
|
||
<a href="/docs/4.0/components/input-group/">
|
||
Input group
|
||
</a></li><li>
|
||
<a href="/docs/4.0/components/jumbotron/">
|
||
Jumbotron
|
||
</a></li><li>
|
||
<a href="/docs/4.0/components/list-group/">
|
||
List group
|
||
</a></li><li>
|
||
<a href="/docs/4.0/components/modal/">
|
||
Modal
|
||
</a></li><li>
|
||
<a href="/docs/4.0/components/navs/">
|
||
Navs
|
||
</a></li><li>
|
||
<a href="/docs/4.0/components/navbar/">
|
||
Navbar
|
||
</a></li><li>
|
||
<a href="/docs/4.0/components/pagination/">
|
||
Pagination
|
||
</a></li><li>
|
||
<a href="/docs/4.0/components/popovers/">
|
||
Popovers
|
||
</a></li><li>
|
||
<a href="/docs/4.0/components/progress/">
|
||
Progress
|
||
</a></li><li>
|
||
<a href="/docs/4.0/components/scrollspy/">
|
||
Scrollspy
|
||
</a></li><li>
|
||
<a href="/docs/4.0/components/tooltips/">
|
||
Tooltips
|
||
</a></li></ul>
|
||
</div><div class="bd-toc-item">
|
||
<a class="bd-toc-link" href="/docs/4.0/utilities/borders/">
|
||
Utilities
|
||
</a>
|
||
|
||
<ul class="nav bd-sidenav"><li>
|
||
<a href="/docs/4.0/utilities/borders/">
|
||
Borders
|
||
</a></li><li>
|
||
<a href="/docs/4.0/utilities/clearfix/">
|
||
Clearfix
|
||
</a></li><li>
|
||
<a href="/docs/4.0/utilities/close-icon/">
|
||
Close icon
|
||
</a></li><li>
|
||
<a href="/docs/4.0/utilities/colors/">
|
||
Colors
|
||
</a></li><li>
|
||
<a href="/docs/4.0/utilities/display/">
|
||
Display
|
||
</a></li><li>
|
||
<a href="/docs/4.0/utilities/embed/">
|
||
Embed
|
||
</a></li><li>
|
||
<a href="/docs/4.0/utilities/flex/">
|
||
Flex
|
||
</a></li><li>
|
||
<a href="/docs/4.0/utilities/float/">
|
||
Float
|
||
</a></li><li>
|
||
<a href="/docs/4.0/utilities/image-replacement/">
|
||
Image replacement
|
||
</a></li><li>
|
||
<a href="/docs/4.0/utilities/position/">
|
||
Position
|
||
</a></li><li>
|
||
<a href="/docs/4.0/utilities/screenreaders/">
|
||
Screenreaders
|
||
</a></li><li>
|
||
<a href="/docs/4.0/utilities/sizing/">
|
||
Sizing
|
||
</a></li><li>
|
||
<a href="/docs/4.0/utilities/spacing/">
|
||
Spacing
|
||
</a></li><li>
|
||
<a href="/docs/4.0/utilities/text/">
|
||
Text
|
||
</a></li><li>
|
||
<a href="/docs/4.0/utilities/vertical-align/">
|
||
Vertical align
|
||
</a></li><li>
|
||
<a href="/docs/4.0/utilities/visibility/">
|
||
Visibility
|
||
</a></li></ul>
|
||
</div><div class="bd-toc-item">
|
||
<a class="bd-toc-link" href="/docs/4.0/extend/approach/">
|
||
Extend
|
||
</a>
|
||
|
||
<ul class="nav bd-sidenav"><li>
|
||
<a href="/docs/4.0/extend/approach/">
|
||
Approach
|
||
</a></li><li>
|
||
<a href="/docs/4.0/extend/icons/">
|
||
Icons
|
||
</a></li></ul>
|
||
</div><div class="bd-toc-item">
|
||
<a class="bd-toc-link" href="/docs/4.0/migration/">
|
||
Migration
|
||
</a>
|
||
|
||
<ul class="nav bd-sidenav"></ul>
|
||
</div><div class="bd-toc-item">
|
||
<a class="bd-toc-link" href="/docs/4.0/about/overview/">
|
||
About
|
||
</a>
|
||
|
||
<ul class="nav bd-sidenav"><li>
|
||
<a href="/docs/4.0/about/overview/">
|
||
Overview
|
||
</a></li><li>
|
||
<a href="/docs/4.0/about/brand/">
|
||
Brand
|
||
</a></li><li>
|
||
<a href="/docs/4.0/about/license/">
|
||
License
|
||
</a></li><li>
|
||
<a href="/docs/4.0/about/translations/">
|
||
Translations
|
||
</a></li></ul>
|
||
</div></nav>
|
||
|
||
</div>
|
||
|
||
|
||
<div class="d-none d-xl-block col-xl-2 bd-toc">
|
||
<ul class="section-nav">
|
||
<li class="toc-entry toc-h2"><a href="#introduction">Introduction</a></li>
|
||
<li class="toc-entry toc-h2"><a href="#sass">Sass</a>
|
||
<ul>
|
||
<li class="toc-entry toc-h3"><a href="#file-structure">File structure</a></li>
|
||
<li class="toc-entry toc-h3"><a href="#importing">Importing</a></li>
|
||
<li class="toc-entry toc-h3"><a href="#variable-defaults">Variable defaults</a></li>
|
||
<li class="toc-entry toc-h3"><a href="#maps-and-loops">Maps and loops</a>
|
||
<ul>
|
||
<li class="toc-entry toc-h4"><a href="#modify-map">Modify map</a></li>
|
||
<li class="toc-entry toc-h4"><a href="#add-to-map">Add to map</a></li>
|
||
<li class="toc-entry toc-h4"><a href="#remove-from-map">Remove from map</a></li>
|
||
<li class="toc-entry toc-h4"><a href="#required-keys">Required keys</a></li>
|
||
</ul>
|
||
</li>
|
||
<li class="toc-entry toc-h3"><a href="#functions">Functions</a></li>
|
||
<li class="toc-entry toc-h3"><a href="#color-contrast">Color contrast</a></li>
|
||
</ul>
|
||
</li>
|
||
<li class="toc-entry toc-h2"><a href="#sass-options">Sass options</a></li>
|
||
<li class="toc-entry toc-h2"><a href="#color">Color</a>
|
||
<ul>
|
||
<li class="toc-entry toc-h3"><a href="#all-colors">All colors</a></li>
|
||
<li class="toc-entry toc-h3"><a href="#theme-colors">Theme colors</a></li>
|
||
<li class="toc-entry toc-h3"><a href="#grays">Grays</a></li>
|
||
</ul>
|
||
</li>
|
||
<li class="toc-entry toc-h2"><a href="#components">Components</a>
|
||
<ul>
|
||
<li class="toc-entry toc-h3"><a href="#modifiers">Modifiers</a></li>
|
||
<li class="toc-entry toc-h3"><a href="#responsive">Responsive</a></li>
|
||
</ul>
|
||
</li>
|
||
<li class="toc-entry toc-h2"><a href="#css-variables">CSS variables</a>
|
||
<ul>
|
||
<li class="toc-entry toc-h3"><a href="#available-variables">Available variables</a></li>
|
||
<li class="toc-entry toc-h3"><a href="#examples">Examples</a></li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
|
||
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
|
||
<h1 class="bd-title" id="content">Theming Bootstrap</h1>
|
||
<p class="bd-lead">Customize Bootstrap 4 with our new built-in Sass variables for global style preferences for easy theming and component changes.</p>
|
||
<script async src="https://cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||
|
||
<h2 id="introduction">Introduction</h2>
|
||
|
||
<p>In Bootstrap 3, theming was largely driven by variable overrides in LESS, custom CSS, and a separate theme stylesheet that we included in our <code class="highlighter-rouge">dist</code> files. With some effort, one could completely redesign the look of Bootstrap 3 without touching the core files. Bootstrap 4 provides a familiar, but slightly different approach.</p>
|
||
|
||
<p>Now, theming is accomplished by Sass variables, Sass maps, and custom CSS. There’s no more dedicated theme stylesheet; instead, you can enable the built-in theme to add gradients, shadows, and more.</p>
|
||
|
||
<h2 id="sass">Sass</h2>
|
||
|
||
<p>Utilize our source Sass files to take advantage of variables, maps, mixins, and more.</p>
|
||
|
||
<h3 id="file-structure">File structure</h3>
|
||
|
||
<p>Whenever possible, avoid modifying Bootstrap’s core files. For Sass, that means creating your own stylesheet that imports Bootstrap so you can modify and extend it. Assuming you’re using a package manager like npm, you’ll have a file structure that looks like this:</p>
|
||
|
||
<figure class="highlight"><pre><code class="language-plaintext" data-lang="plaintext">your-project/
|
||
├── scss
|
||
│ └── custom.scss
|
||
└── node_modules/
|
||
└── bootstrap
|
||
├── js
|
||
└── scss</code></pre></figure>
|
||
|
||
<p>If you’ve downloaded our source files and aren’t using a package manager, you’ll want to manually setup something similar to that structure, keeping Bootstrap’s source files separate from your own.</p>
|
||
|
||
<figure class="highlight"><pre><code class="language-plaintext" data-lang="plaintext">your-project/
|
||
├── scss
|
||
│ └── custom.scss
|
||
└── bootstrap/
|
||
├── js
|
||
└── scss</code></pre></figure>
|
||
|
||
<h3 id="importing">Importing</h3>
|
||
|
||
<p>In your <code class="highlighter-rouge">custom.scss</code>, you’ll import Bootstrap’s source Sass files. You have two options: include all of Bootstrap, or pick the parts you need. We encourage the latter, though be aware there are some requirements and dependencies across our components. You also will need to include some JavaScript for our plugins.</p>
|
||
|
||
<figure class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="c1">// Custom.scss</span>
|
||
<span class="c1">// Option A: Include all of Bootstrap</span>
|
||
|
||
<span class="k">@import</span> <span class="s2">"node_modules/bootstrap/scss/bootstrap"</span><span class="p">;</span></code></pre></figure>
|
||
|
||
<figure class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="c1">// Custom.scss</span>
|
||
<span class="c1">// Option B: Include parts of Bootstrap</span>
|
||
|
||
<span class="c1">// Required</span>
|
||
<span class="k">@import</span> <span class="s2">"node_modules/bootstrap/scss/functions"</span><span class="p">;</span>
|
||
<span class="k">@import</span> <span class="s2">"node_modules/bootstrap/scss/variables"</span><span class="p">;</span>
|
||
<span class="k">@import</span> <span class="s2">"node_modules/bootstrap/scss/mixins"</span><span class="p">;</span>
|
||
|
||
<span class="c1">// Optional</span>
|
||
<span class="k">@import</span> <span class="s2">"node_modules/bootstrap/scss/reboot"</span><span class="p">;</span>
|
||
<span class="k">@import</span> <span class="s2">"node_modules/bootstrap/scss/type"</span><span class="p">;</span>
|
||
<span class="k">@import</span> <span class="s2">"node_modules/bootstrap/scss/images"</span><span class="p">;</span>
|
||
<span class="k">@import</span> <span class="s2">"node_modules/bootstrap/scss/code"</span><span class="p">;</span>
|
||
<span class="k">@import</span> <span class="s2">"node_modules/bootstrap/scss/grid"</span><span class="p">;</span></code></pre></figure>
|
||
|
||
<p>With that setup in place, you can begin to modify any of the Sass variables and maps in your <code class="highlighter-rouge">custom.scss</code>. You can also start to add parts of Bootstrap under the <code class="highlighter-rouge">// Optional</code> section as needed. We suggest using the full import stack from our <code class="highlighter-rouge">bootstrap.scss</code> file as your starting point.</p>
|
||
|
||
<h3 id="variable-defaults">Variable defaults</h3>
|
||
|
||
<p>Every Sass variable in Bootstrap 4 includes the <code class="highlighter-rouge">!default</code> flag allowing you to override the variable’s default value in your own Sass without modifying Bootstrap’s source code. Copy and paste variables as needed, modify their values, and remove the <code class="highlighter-rouge">!default</code> flag. If a variable has already been assigned, then it won’t be re-assigned by the default values in Bootstrap.</p>
|
||
|
||
<p>Variable overrides within the same Sass file can come before or after the default variables. However, when overriding across Sass files, your overrides must come before you import Bootstrap’s Sass files.</p>
|
||
|
||
<p>Here’s an example that changes the <code class="highlighter-rouge">background-color</code> and <code class="highlighter-rouge">color</code> for the <code class="highlighter-rouge"><body></code> when importing and compiling Bootstrap via npm:</p>
|
||
|
||
<figure class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="c1">// Your variable overrides</span>
|
||
<span class="nv">$body-bg</span><span class="p">:</span> <span class="mh">#000</span><span class="p">;</span>
|
||
<span class="nv">$body-color</span><span class="p">:</span> <span class="mh">#111</span><span class="p">;</span>
|
||
|
||
<span class="c1">// Bootstrap and its default variables</span>
|
||
<span class="k">@import</span> <span class="s2">"node_modules/bootstrap/scss/bootstrap"</span><span class="p">;</span></code></pre></figure>
|
||
|
||
<p>Repeat as necessary for any variable in Bootstrap, including the global options below.</p>
|
||
|
||
<h3 id="maps-and-loops">Maps and loops</h3>
|
||
|
||
<p>Bootstrap 4 includes a handful of Sass maps, key value pairs that make it easier to generate families of related CSS. We use Sass maps for our colors, grid breakpoints, and more. Just like Sass variables, all Sass maps include the <code class="highlighter-rouge">!default</code> flag and can be overridden and extended.</p>
|
||
|
||
<p>Some of our Sass maps are merged into empty ones by default. This is done to allow easy expansion of a given Sass map, but comes at the cost of making <em>removing</em> items from a map slightly more difficult.</p>
|
||
|
||
<h4 id="modify-map">Modify map</h4>
|
||
|
||
<p>To modify an existing color in our <code class="highlighter-rouge">$theme-colors</code> map, add the following to your custom Sass file:</p>
|
||
|
||
<figure class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="nv">$theme-colors</span><span class="p">:</span> <span class="p">(</span>
|
||
<span class="s2">"primary"</span><span class="o">:</span> <span class="mh">#0074d9</span><span class="o">,</span>
|
||
<span class="s2">"danger"</span><span class="o">:</span> <span class="mh">#ff4136</span>
|
||
<span class="p">);</span></code></pre></figure>
|
||
|
||
<h4 id="add-to-map">Add to map</h4>
|
||
|
||
<p>To add a new color to <code class="highlighter-rouge">$theme-colors</code>, add the new key and value:</p>
|
||
|
||
<figure class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="nv">$theme-colors</span><span class="p">:</span> <span class="p">(</span>
|
||
<span class="s2">"custom-color"</span><span class="o">:</span> <span class="mh">#900</span>
|
||
<span class="p">);</span></code></pre></figure>
|
||
|
||
<h4 id="remove-from-map">Remove from map</h4>
|
||
|
||
<p>To remove colors from <code class="highlighter-rouge">$theme-colors</code>, or any other map, use <code class="highlighter-rouge">map-remove</code>:</p>
|
||
|
||
<figure class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="nv">$theme-colors</span><span class="p">:</span> <span class="nf">map-remove</span><span class="p">(</span><span class="nv">$theme-colors</span><span class="o">,</span> <span class="s2">"success"</span><span class="o">,</span> <span class="s2">"info"</span><span class="o">,</span> <span class="s2">"danger"</span><span class="p">);</span></code></pre></figure>
|
||
|
||
<h4 id="required-keys">Required keys</h4>
|
||
|
||
<p>Bootstrap assumes the presence of some specific keys within Sass maps as we used and extend these ourselves. As you customize the included maps, you may encounter errors where a specific Sass map’s key is being used.</p>
|
||
|
||
<p>For example, we use the <code class="highlighter-rouge">primary</code>, <code class="highlighter-rouge">success</code>, and <code class="highlighter-rouge">danger</code> keys from <code class="highlighter-rouge">$theme-colors</code> for links, buttons, and form states. Replacing the values of these keys should present no issues, but removing them may cause Sass compilation issues. In these instances, you’ll need to modify the Sass code that makes use of those values.</p>
|
||
|
||
<h3 id="functions">Functions</h3>
|
||
|
||
<p>Bootstrap utilizes several Sass functions, but only a subset are applicable to general theming. We’ve included three functions for getting values from the color maps:</p>
|
||
|
||
<figure class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="k">@function</span> <span class="nf">color</span><span class="p">(</span><span class="nv">$key</span><span class="o">:</span> <span class="s2">"blue"</span><span class="p">)</span> <span class="p">{</span>
|
||
<span class="k">@return</span> <span class="nf">map-get</span><span class="p">(</span><span class="nv">$colors</span><span class="o">,</span> <span class="nv">$key</span><span class="p">);</span>
|
||
<span class="p">}</span>
|
||
|
||
<span class="k">@function</span> <span class="nf">theme-color</span><span class="p">(</span><span class="nv">$key</span><span class="o">:</span> <span class="s2">"primary"</span><span class="p">)</span> <span class="p">{</span>
|
||
<span class="k">@return</span> <span class="nf">map-get</span><span class="p">(</span><span class="nv">$theme-colors</span><span class="o">,</span> <span class="nv">$key</span><span class="p">);</span>
|
||
<span class="p">}</span>
|
||
|
||
<span class="k">@function</span> <span class="nf">gray</span><span class="p">(</span><span class="nv">$key</span><span class="o">:</span> <span class="s2">"100"</span><span class="p">)</span> <span class="p">{</span>
|
||
<span class="k">@return</span> <span class="nf">map-get</span><span class="p">(</span><span class="nv">$grays</span><span class="o">,</span> <span class="nv">$key</span><span class="p">);</span>
|
||
<span class="p">}</span></code></pre></figure>
|
||
|
||
<p>These allow you to pick one color from a Sass map much like how you’d use a color variable from v3.</p>
|
||
|
||
<figure class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="nc">.custom-element</span> <span class="p">{</span>
|
||
<span class="nl">color</span><span class="p">:</span> <span class="nf">gray</span><span class="p">(</span><span class="s2">"100"</span><span class="p">);</span>
|
||
<span class="nl">background-color</span><span class="p">:</span> <span class="nf">theme-color</span><span class="p">(</span><span class="s2">"dark"</span><span class="p">);</span>
|
||
<span class="p">}</span></code></pre></figure>
|
||
|
||
<p>We also have another function for getting a particular <em>level</em> of color from the <code class="highlighter-rouge">$theme-colors</code> map. Negative level values will lighten the color, while higher levels will darken.</p>
|
||
|
||
<figure class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="k">@function</span> <span class="nf">theme-color-level</span><span class="p">(</span><span class="nv">$color-name</span><span class="o">:</span> <span class="s2">"primary"</span><span class="o">,</span> <span class="nv">$level</span><span class="o">:</span> <span class="m">0</span><span class="p">)</span> <span class="p">{</span>
|
||
<span class="nv">$color</span><span class="p">:</span> <span class="nf">theme-color</span><span class="p">(</span><span class="nv">$color-name</span><span class="p">);</span>
|
||
<span class="nv">$color-base</span><span class="p">:</span> <span class="nf">if</span><span class="p">(</span><span class="nv">$level</span> <span class="o">></span> <span class="m">0</span><span class="o">,</span> <span class="mh">#000</span><span class="o">,</span> <span class="mh">#fff</span><span class="p">);</span>
|
||
<span class="nv">$level</span><span class="p">:</span> <span class="nf">abs</span><span class="p">(</span><span class="nv">$level</span><span class="p">);</span>
|
||
|
||
<span class="k">@return</span> <span class="nf">mix</span><span class="p">(</span><span class="nv">$color-base</span><span class="o">,</span> <span class="nv">$color</span><span class="o">,</span> <span class="nv">$level</span> <span class="o">*</span> <span class="nv">$theme-color-interval</span><span class="p">);</span>
|
||
<span class="p">}</span></code></pre></figure>
|
||
|
||
<p>In practice, you’d call the function and pass in two parameters: the name of the color from <code class="highlighter-rouge">$theme-colors</code> (e.g., primary or danger) and a numeric level.</p>
|
||
|
||
<figure class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="nc">.custom-element</span> <span class="p">{</span>
|
||
<span class="nl">color</span><span class="p">:</span> <span class="nf">theme-color-level</span><span class="p">(</span><span class="n">primary</span><span class="o">,</span> <span class="m">-10</span><span class="p">);</span>
|
||
<span class="p">}</span></code></pre></figure>
|
||
|
||
<p>Additional functions could be added in the future or your own custom Sass to create level functions for additional Sass maps, or even a generic one if you wanted to be more verbose.</p>
|
||
|
||
<h3 id="color-contrast">Color contrast</h3>
|
||
|
||
<p>One additional function we include in Bootstrap is the color contrast function, <code class="highlighter-rouge">color-yiq</code>. It utilizes the <a href="https://en.wikipedia.org/wiki/YIQ">YIQ color space</a> to automatically return a light (<code class="highlighter-rouge">#fff</code>) or dark (<code class="highlighter-rouge">#111</code>) contrast color based on the specified base color. This function is especially useful for mixins or loops where you’re generating multiple classes.</p>
|
||
|
||
<p>For example, to generate color swatches from our <code class="highlighter-rouge">$theme-colors</code> map:</p>
|
||
|
||
<figure class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="k">@each</span> <span class="nv">$color</span><span class="o">,</span> <span class="nv">$value</span> <span class="n">in</span> <span class="nv">$theme-colors</span> <span class="p">{</span>
|
||
<span class="nc">.swatch-</span><span class="si">#{</span><span class="nv">$color</span><span class="si">}</span> <span class="p">{</span>
|
||
<span class="nl">color</span><span class="p">:</span> <span class="nf">color-yiq</span><span class="p">(</span><span class="nv">$value</span><span class="p">);</span>
|
||
<span class="p">}</span>
|
||
<span class="p">}</span></code></pre></figure>
|
||
|
||
<p>It can also be used for one-off contrast needs:</p>
|
||
|
||
<figure class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="nc">.custom-element</span> <span class="p">{</span>
|
||
<span class="nl">color</span><span class="p">:</span> <span class="nf">color-yiq</span><span class="p">(</span><span class="mh">#000</span><span class="p">);</span> <span class="c1">// returns `color: #fff`</span>
|
||
<span class="p">}</span></code></pre></figure>
|
||
|
||
<p>You can also specify a base color with our color map functions:</p>
|
||
|
||
<figure class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="nc">.custom-element</span> <span class="p">{</span>
|
||
<span class="nl">color</span><span class="p">:</span> <span class="nf">color-yiq</span><span class="p">(</span><span class="nf">theme-color</span><span class="p">(</span><span class="s2">"dark"</span><span class="p">));</span> <span class="c1">// returns `color: #fff`</span>
|
||
<span class="p">}</span></code></pre></figure>
|
||
|
||
<h2 id="sass-options">Sass options</h2>
|
||
|
||
<p>Customize Bootstrap 4 with our built-in custom variables file and easily toggle global CSS preferences with new <code class="highlighter-rouge">$enable-*</code> Sass variables. Override a variable’s value and recompile with <code class="highlighter-rouge">npm run test</code> as needed.</p>
|
||
|
||
<p>You can find and customize these variables for key global options in our <code class="highlighter-rouge">_variables.scss</code> file.</p>
|
||
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>Variable</th>
|
||
<th>Values</th>
|
||
<th>Description</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td><code class="highlighter-rouge">$spacer</code></td>
|
||
<td><code class="highlighter-rouge">1rem</code> (default), or any value > 0</td>
|
||
<td>Specifies the default spacer value to programmatically generate our <a href="/docs/4.0/utilities/spacing/">spacer utilities</a>.</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code class="highlighter-rouge">$enable-rounded</code></td>
|
||
<td><code class="highlighter-rouge">true</code> (default) or <code class="highlighter-rouge">false</code></td>
|
||
<td>Enables predefined <code class="highlighter-rouge">border-radius</code> styles on various components.</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code class="highlighter-rouge">$enable-shadows</code></td>
|
||
<td><code class="highlighter-rouge">true</code> or <code class="highlighter-rouge">false</code> (default)</td>
|
||
<td>Enables predefined <code class="highlighter-rouge">box-shadow</code> styles on various components.</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code class="highlighter-rouge">$enable-gradients</code></td>
|
||
<td><code class="highlighter-rouge">true</code> or <code class="highlighter-rouge">false</code> (default)</td>
|
||
<td>Enables predefined gradients via <code class="highlighter-rouge">background-image</code> styles on various components.</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code class="highlighter-rouge">$enable-transitions</code></td>
|
||
<td><code class="highlighter-rouge">true</code> (default) or <code class="highlighter-rouge">false</code></td>
|
||
<td>Enables predefined <code class="highlighter-rouge">transition</code>s on various components.</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code class="highlighter-rouge">$enable-hover-media-query</code></td>
|
||
<td><code class="highlighter-rouge">true</code> or <code class="highlighter-rouge">false</code> (default)</td>
|
||
<td><strong>Deprecated</strong></td>
|
||
</tr>
|
||
<tr>
|
||
<td><code class="highlighter-rouge">$enable-grid-classes</code></td>
|
||
<td><code class="highlighter-rouge">true</code> (default) or <code class="highlighter-rouge">false</code></td>
|
||
<td>Enables the generation of CSS classes for the grid system (e.g., <code class="highlighter-rouge">.container</code>, <code class="highlighter-rouge">.row</code>, <code class="highlighter-rouge">.col-md-1</code>, etc.).</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code class="highlighter-rouge">$enable-caret</code></td>
|
||
<td><code class="highlighter-rouge">true</code> (default) or <code class="highlighter-rouge">false</code></td>
|
||
<td>Enables pseudo element caret on <code class="highlighter-rouge">.dropdown-toggle</code>.</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code class="highlighter-rouge">$enable-print-styles</code></td>
|
||
<td><code class="highlighter-rouge">true</code> (default) or <code class="highlighter-rouge">false</code></td>
|
||
<td>Enables styles for optimizing printing.</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<h2 id="color">Color</h2>
|
||
|
||
<p>Many of Bootstrap’s various components and utilities are built through a series of colors defined in a Sass map. This map can be looped over in Sass to quickly generate a series of rulesets.</p>
|
||
|
||
<h3 id="all-colors">All colors</h3>
|
||
|
||
<p>All colors available in Bootstrap 4, are available as Sass variables and a Sass map in our <code class="highlighter-rouge">scss/_variables.scss</code> file. This will be expanded upon in subsequent minor releases to add additional shades, much like the <a href="#grays">grayscale palette</a> we already include.</p>
|
||
|
||
<div class="row">
|
||
|
||
|
||
<div class="col-md-4">
|
||
<div class="p-3 mb-3 swatch-blue">Blue</div>
|
||
</div>
|
||
|
||
|
||
|
||
<div class="col-md-4">
|
||
<div class="p-3 mb-3 swatch-indigo">Indigo</div>
|
||
</div>
|
||
|
||
|
||
|
||
<div class="col-md-4">
|
||
<div class="p-3 mb-3 swatch-purple">Purple</div>
|
||
</div>
|
||
|
||
|
||
|
||
<div class="col-md-4">
|
||
<div class="p-3 mb-3 swatch-pink">Pink</div>
|
||
</div>
|
||
|
||
|
||
|
||
<div class="col-md-4">
|
||
<div class="p-3 mb-3 swatch-red">Red</div>
|
||
</div>
|
||
|
||
|
||
|
||
<div class="col-md-4">
|
||
<div class="p-3 mb-3 swatch-orange">Orange</div>
|
||
</div>
|
||
|
||
|
||
|
||
<div class="col-md-4">
|
||
<div class="p-3 mb-3 swatch-yellow">Yellow</div>
|
||
</div>
|
||
|
||
|
||
|
||
<div class="col-md-4">
|
||
<div class="p-3 mb-3 swatch-green">Green</div>
|
||
</div>
|
||
|
||
|
||
|
||
<div class="col-md-4">
|
||
<div class="p-3 mb-3 swatch-teal">Teal</div>
|
||
</div>
|
||
|
||
|
||
|
||
<div class="col-md-4">
|
||
<div class="p-3 mb-3 swatch-cyan">Cyan</div>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
</div>
|
||
|
||
<p>Here’s how you can use these in your Sass:</p>
|
||
|
||
<figure class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="c1">// With variable</span>
|
||
<span class="nc">.alpha</span> <span class="p">{</span> <span class="nl">color</span><span class="p">:</span> <span class="nv">$purple</span><span class="p">;</span> <span class="p">}</span>
|
||
|
||
<span class="c1">// From the Sass map with our `color()` function</span>
|
||
<span class="nc">.beta</span> <span class="p">{</span> <span class="nl">color</span><span class="p">:</span> <span class="nf">color</span><span class="p">(</span><span class="s2">"purple"</span><span class="p">);</span> <span class="p">}</span></code></pre></figure>
|
||
|
||
<p><a href="/docs/4.0/utilities/colors/">Color utility classes</a> are also available for setting <code class="highlighter-rouge">color</code> and <code class="highlighter-rouge">background-color</code>.</p>
|
||
|
||
<div class="bd-callout bd-callout-info">
|
||
<p>In the future, we’ll aim to provide Sass maps and variables for shades of each color as we’ve done with the grayscale colors below.</p>
|
||
</div>
|
||
|
||
<h3 id="theme-colors">Theme colors</h3>
|
||
|
||
<p>We use a subset of all colors to create a smaller color palette for generating color schemes, also available as Sass variables and a Sass map in our <code class="highlighter-rouge">scss/_variables.scss</code> file.</p>
|
||
|
||
<div class="row">
|
||
|
||
<div class="col-md-4">
|
||
<div class="p-3 mb-3 swatch-primary">Primary</div>
|
||
</div>
|
||
|
||
<div class="col-md-4">
|
||
<div class="p-3 mb-3 swatch-secondary">Secondary</div>
|
||
</div>
|
||
|
||
<div class="col-md-4">
|
||
<div class="p-3 mb-3 swatch-success">Success</div>
|
||
</div>
|
||
|
||
<div class="col-md-4">
|
||
<div class="p-3 mb-3 swatch-danger">Danger</div>
|
||
</div>
|
||
|
||
<div class="col-md-4">
|
||
<div class="p-3 mb-3 swatch-warning">Warning</div>
|
||
</div>
|
||
|
||
<div class="col-md-4">
|
||
<div class="p-3 mb-3 swatch-info">Info</div>
|
||
</div>
|
||
|
||
<div class="col-md-4">
|
||
<div class="p-3 mb-3 swatch-light">Light</div>
|
||
</div>
|
||
|
||
<div class="col-md-4">
|
||
<div class="p-3 mb-3 swatch-dark">Dark</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<h3 id="grays">Grays</h3>
|
||
|
||
<p>An expansive set of gray variables and a Sass map in <code class="highlighter-rouge">scss/_variables.scss</code> for consistent shades of gray across your project.</p>
|
||
|
||
<div class="row mb-3">
|
||
<div class="col-md-4">
|
||
|
||
<div class="p-3 swatch-100">100</div>
|
||
|
||
<div class="p-3 swatch-200">200</div>
|
||
|
||
<div class="p-3 swatch-300">300</div>
|
||
|
||
<div class="p-3 swatch-400">400</div>
|
||
|
||
<div class="p-3 swatch-500">500</div>
|
||
|
||
<div class="p-3 swatch-600">600</div>
|
||
|
||
<div class="p-3 swatch-700">700</div>
|
||
|
||
<div class="p-3 swatch-800">800</div>
|
||
|
||
<div class="p-3 swatch-900">900</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<p>Within <code class="highlighter-rouge">_variables.scss</code>, you’ll find our color variables and Sass map. Here’s an example of the <code class="highlighter-rouge">$colors</code> Sass map:</p>
|
||
|
||
<figure class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="nv">$colors</span><span class="p">:</span> <span class="p">(</span>
|
||
<span class="s2">"blue"</span><span class="o">:</span> <span class="nv">$blue</span><span class="o">,</span>
|
||
<span class="s2">"indigo"</span><span class="o">:</span> <span class="nv">$indigo</span><span class="o">,</span>
|
||
<span class="s2">"purple"</span><span class="o">:</span> <span class="nv">$purple</span><span class="o">,</span>
|
||
<span class="s2">"pink"</span><span class="o">:</span> <span class="nv">$pink</span><span class="o">,</span>
|
||
<span class="s2">"red"</span><span class="o">:</span> <span class="nv">$red</span><span class="o">,</span>
|
||
<span class="s2">"orange"</span><span class="o">:</span> <span class="nv">$orange</span><span class="o">,</span>
|
||
<span class="s2">"yellow"</span><span class="o">:</span> <span class="nv">$yellow</span><span class="o">,</span>
|
||
<span class="s2">"green"</span><span class="o">:</span> <span class="nv">$green</span><span class="o">,</span>
|
||
<span class="s2">"teal"</span><span class="o">:</span> <span class="nv">$teal</span><span class="o">,</span>
|
||
<span class="s2">"cyan"</span><span class="o">:</span> <span class="nv">$cyan</span><span class="o">,</span>
|
||
<span class="s2">"white"</span><span class="o">:</span> <span class="nv">$white</span><span class="o">,</span>
|
||
<span class="s2">"gray"</span><span class="o">:</span> <span class="nv">$gray-600</span><span class="o">,</span>
|
||
<span class="s2">"gray-dark"</span><span class="o">:</span> <span class="nv">$gray-800</span>
|
||
<span class="p">)</span> <span class="o">!</span><span class="nb">default</span><span class="p">;</span></code></pre></figure>
|
||
|
||
<p>Add, remove, or modify values within the map to update how they’re used in many other components. Unfortunately at this time, not <em>every</em> component utilizes this Sass map. Future updates will strive to improve upon this. Until then, plan on making use of the <code class="highlighter-rouge">${color}</code> variables and this Sass map.</p>
|
||
|
||
<h2 id="components">Components</h2>
|
||
|
||
<p>Many of Bootstrap’s components and utilities are built with <code class="highlighter-rouge">@each</code> loops that iterate over a Sass map. This is especially helpful for generating variants of a component by our <code class="highlighter-rouge">$theme-colors</code> and creating responsive variants for each breakpoint. As you customize these Sass maps and recompile, you’ll automatically see your changes reflected in these loops.</p>
|
||
|
||
<h3 id="modifiers">Modifiers</h3>
|
||
|
||
<p>Many of Bootstrap’s components are built with a base-modifier class approach. This means the bulk of the styling is contained to a base class (e.g., <code class="highlighter-rouge">.btn</code>) while style variations are confined to modifier classes (e.g., <code class="highlighter-rouge">.btn-danger</code>). These modifier classes are built from the <code class="highlighter-rouge">$theme-colors</code> map to make customizing the number and name of our modifier classes.</p>
|
||
|
||
<p>Here are two examples of how we loop over the <code class="highlighter-rouge">$theme-colors</code> map to generate modifiers to the <code class="highlighter-rouge">.alert</code> component and all our <code class="highlighter-rouge">.bg-*</code> background utilities.</p>
|
||
|
||
<figure class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="c1">// Generate alert modifier classes</span>
|
||
<span class="k">@each</span> <span class="nv">$color</span><span class="o">,</span> <span class="nv">$value</span> <span class="n">in</span> <span class="nv">$theme-colors</span> <span class="p">{</span>
|
||
<span class="nc">.alert-</span><span class="si">#{</span><span class="nv">$color</span><span class="si">}</span> <span class="p">{</span>
|
||
<span class="k">@include</span> <span class="nd">alert-variant</span><span class="p">(</span><span class="nf">theme-color-level</span><span class="p">(</span><span class="nv">$color</span><span class="o">,</span> <span class="m">-10</span><span class="p">)</span><span class="o">,</span> <span class="nf">theme-color-level</span><span class="p">(</span><span class="nv">$color</span><span class="o">,</span> <span class="m">-9</span><span class="p">)</span><span class="o">,</span> <span class="nf">theme-color-level</span><span class="p">(</span><span class="nv">$color</span><span class="o">,</span> <span class="m">6</span><span class="p">));</span>
|
||
<span class="p">}</span>
|
||
<span class="p">}</span>
|
||
|
||
<span class="c1">// Generate `.bg-*` color utilities</span>
|
||
<span class="k">@each</span> <span class="nv">$color</span><span class="o">,</span> <span class="nv">$value</span> <span class="n">in</span> <span class="nv">$theme-colors</span> <span class="p">{</span>
|
||
<span class="k">@include</span> <span class="nd">bg-variant</span><span class="p">(</span><span class="s1">'.bg-</span><span class="si">#{</span><span class="nv">$color</span><span class="si">}</span><span class="s1">'</span><span class="o">,</span> <span class="nv">$value</span><span class="p">);</span>
|
||
<span class="p">}</span></code></pre></figure>
|
||
|
||
<h3 id="responsive">Responsive</h3>
|
||
|
||
<p>These Sass loops aren’t limited to color maps, either. You can also generate responsive variations of your components or utilities. Take for example our responsive text alignment utilities where we mix an <code class="highlighter-rouge">@each</code> loop for the <code class="highlighter-rouge">$grid-breakpoints</code> Sass map with a media query include.</p>
|
||
|
||
<figure class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="k">@each</span> <span class="nv">$breakpoint</span> <span class="n">in</span> <span class="nf">map-keys</span><span class="p">(</span><span class="nv">$grid-breakpoints</span><span class="p">)</span> <span class="p">{</span>
|
||
<span class="k">@include</span> <span class="nd">media-breakpoint-up</span><span class="p">(</span><span class="nv">$breakpoint</span><span class="p">)</span> <span class="p">{</span>
|
||
<span class="nv">$infix</span><span class="p">:</span> <span class="nf">breakpoint-infix</span><span class="p">(</span><span class="nv">$breakpoint</span><span class="o">,</span> <span class="nv">$grid-breakpoints</span><span class="p">);</span>
|
||
|
||
<span class="nc">.text</span><span class="si">#{</span><span class="nv">$infix</span><span class="si">}</span><span class="nc">-left</span> <span class="p">{</span> <span class="nl">text-align</span><span class="p">:</span> <span class="nb">left</span> <span class="o">!</span><span class="n">important</span><span class="p">;</span> <span class="p">}</span>
|
||
<span class="nc">.text</span><span class="si">#{</span><span class="nv">$infix</span><span class="si">}</span><span class="nc">-right</span> <span class="p">{</span> <span class="nl">text-align</span><span class="p">:</span> <span class="nb">right</span> <span class="o">!</span><span class="n">important</span><span class="p">;</span> <span class="p">}</span>
|
||
<span class="nc">.text</span><span class="si">#{</span><span class="nv">$infix</span><span class="si">}</span><span class="nc">-center</span> <span class="p">{</span> <span class="nl">text-align</span><span class="p">:</span> <span class="nb">center</span> <span class="o">!</span><span class="n">important</span><span class="p">;</span> <span class="p">}</span>
|
||
<span class="p">}</span>
|
||
<span class="p">}</span></code></pre></figure>
|
||
|
||
<p>Should you need to modify your <code class="highlighter-rouge">$grid-breakpoints</code>, your changes will apply to all the loops iterating over that map.</p>
|
||
|
||
<h2 id="css-variables">CSS variables</h2>
|
||
|
||
<p>Bootstrap 4 includes around two dozen <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables">CSS custom properties (variables)</a> in it’s compiled CSS. These provide easy access to commonly used values like our theme colors, breakpoints, and primary font stacks when working in your browser’s Inspector, a code sandbox, or general prototyping.</p>
|
||
|
||
<h3 id="available-variables">Available variables</h3>
|
||
|
||
<p>Here are the variables we include (note that the <code class="highlighter-rouge">:root</code> is required). They’re located in our <code class="highlighter-rouge">_root.scss</code> file.</p>
|
||
|
||
<figure class="highlight"><pre><code class="language-css" data-lang="css"><span class="nd">:root</span> <span class="p">{</span>
|
||
<span class="py">--blue</span><span class="p">:</span> <span class="m">#007bff</span><span class="p">;</span>
|
||
<span class="py">--indigo</span><span class="p">:</span> <span class="m">#6610f2</span><span class="p">;</span>
|
||
<span class="py">--purple</span><span class="p">:</span> <span class="m">#6f42c1</span><span class="p">;</span>
|
||
<span class="py">--pink</span><span class="p">:</span> <span class="m">#e83e8c</span><span class="p">;</span>
|
||
<span class="py">--red</span><span class="p">:</span> <span class="m">#dc3545</span><span class="p">;</span>
|
||
<span class="py">--orange</span><span class="p">:</span> <span class="m">#fd7e14</span><span class="p">;</span>
|
||
<span class="py">--yellow</span><span class="p">:</span> <span class="m">#ffc107</span><span class="p">;</span>
|
||
<span class="py">--green</span><span class="p">:</span> <span class="m">#28a745</span><span class="p">;</span>
|
||
<span class="py">--teal</span><span class="p">:</span> <span class="m">#20c997</span><span class="p">;</span>
|
||
<span class="py">--cyan</span><span class="p">:</span> <span class="m">#17a2b8</span><span class="p">;</span>
|
||
<span class="py">--white</span><span class="p">:</span> <span class="m">#fff</span><span class="p">;</span>
|
||
<span class="py">--gray</span><span class="p">:</span> <span class="m">#6c757d</span><span class="p">;</span>
|
||
<span class="py">--gray-dark</span><span class="p">:</span> <span class="m">#343a40</span><span class="p">;</span>
|
||
<span class="py">--primary</span><span class="p">:</span> <span class="m">#007bff</span><span class="p">;</span>
|
||
<span class="py">--secondary</span><span class="p">:</span> <span class="m">#6c757d</span><span class="p">;</span>
|
||
<span class="py">--success</span><span class="p">:</span> <span class="m">#28a745</span><span class="p">;</span>
|
||
<span class="py">--info</span><span class="p">:</span> <span class="m">#17a2b8</span><span class="p">;</span>
|
||
<span class="py">--warning</span><span class="p">:</span> <span class="m">#ffc107</span><span class="p">;</span>
|
||
<span class="py">--danger</span><span class="p">:</span> <span class="m">#dc3545</span><span class="p">;</span>
|
||
<span class="py">--light</span><span class="p">:</span> <span class="m">#f8f9fa</span><span class="p">;</span>
|
||
<span class="py">--dark</span><span class="p">:</span> <span class="m">#343a40</span><span class="p">;</span>
|
||
<span class="py">--breakpoint-xs</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span>
|
||
<span class="py">--breakpoint-sm</span><span class="p">:</span> <span class="m">576px</span><span class="p">;</span>
|
||
<span class="py">--breakpoint-md</span><span class="p">:</span> <span class="m">768px</span><span class="p">;</span>
|
||
<span class="py">--breakpoint-lg</span><span class="p">:</span> <span class="m">992px</span><span class="p">;</span>
|
||
<span class="py">--breakpoint-xl</span><span class="p">:</span> <span class="m">1200px</span><span class="p">;</span>
|
||
<span class="py">--font-family-sans-serif</span><span class="p">:</span> <span class="n">-apple-system</span><span class="p">,</span> <span class="n">BlinkMacSystemFont</span><span class="p">,</span> <span class="s1">"Segoe UI"</span><span class="p">,</span> <span class="n">Roboto</span><span class="p">,</span> <span class="s1">"Helvetica Neue"</span><span class="p">,</span> <span class="n">Arial</span><span class="p">,</span> <span class="nb">sans-serif</span><span class="p">,</span> <span class="s1">"Apple Color Emoji"</span><span class="p">,</span> <span class="s1">"Segoe UI Emoji"</span><span class="p">,</span> <span class="s1">"Segoe UI Symbol"</span><span class="p">;</span>
|
||
<span class="py">--font-family-monospace</span><span class="p">:</span> <span class="n">SFMono-Regular</span><span class="p">,</span> <span class="n">Menlo</span><span class="p">,</span> <span class="n">Monaco</span><span class="p">,</span> <span class="n">Consolas</span><span class="p">,</span> <span class="s1">"Liberation Mono"</span><span class="p">,</span> <span class="s1">"Courier New"</span><span class="p">,</span> <span class="nb">monospace</span><span class="p">;</span>
|
||
<span class="p">}</span></code></pre></figure>
|
||
|
||
<h3 id="examples">Examples</h3>
|
||
|
||
<p>CSS variables offer similar flexibility to Sass’s variables, but without the need for compilation before being served to the browser. For example, here we’re resetting our page’s font and link styles with CSS variables.</p>
|
||
|
||
<figure class="highlight"><pre><code class="language-css" data-lang="css"><span class="nt">body</span> <span class="p">{</span>
|
||
<span class="nl">font</span><span class="p">:</span> <span class="m">1rem</span><span class="p">/</span><span class="m">1.5</span> <span class="n">var</span><span class="p">(</span><span class="n">--font-family-sans-serif</span><span class="p">);</span>
|
||
<span class="p">}</span>
|
||
<span class="nt">a</span> <span class="p">{</span>
|
||
<span class="nl">color</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--blue</span><span class="p">);</span>
|
||
<span class="p">}</span></code></pre></figure>
|
||
|
||
<p>You can also use our breakpoint variables in your media queries:</p>
|
||
|
||
<figure class="highlight"><pre><code class="language-css" data-lang="css"><span class="nc">.content-secondary</span> <span class="p">{</span>
|
||
<span class="nl">display</span><span class="p">:</span> <span class="nb">none</span><span class="p">;</span>
|
||
<span class="p">}</span>
|
||
|
||
<span class="k">@media</span> <span class="p">(</span><span class="n">min-width</span><span class="p">(</span><span class="n">var</span><span class="p">(</span><span class="n">--breakpoint-sm</span><span class="p">)))</span> <span class="p">{</span>
|
||
<span class="nc">.content-secondary</span> <span class="p">{</span>
|
||
<span class="nl">display</span><span class="p">:</span> <span class="nb">block</span><span class="p">;</span>
|
||
<span class="p">}</span>
|
||
<span class="p">}</span></code></pre></figure>
|
||
|
||
|
||
</main>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
|
||
<script>window.jQuery || document.write('<script src="/docs/4.0/assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
|
||
|
||
<script src="/docs/4.0/assets/js/vendor/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script><script src="/docs/4.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.0/assets/js/docs.min.js"></script>
|
||
</body>
|
||
</html>
|