mirror of
https://github.com/twbs/bootstrap.git
synced 2025-09-02 01:42:36 +02:00
Add v4.5.1 docs (#31409)
This commit is contained in:
XhmikosR
GitHub
@@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Bootstrap 4 is a major rewrite of the entire project. The most notable changes are summarized below, followed by more specific changes to relevant components.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v4.0.1">
|
||||
<meta name="generator" content="Jekyll v4.1.1">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="4.5">
|
||||
@@ -15,7 +15,7 @@
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/migration/">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
@@ -62,9 +62,10 @@
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</a>
|
||||
<div class="skippy overflow-hidden">
|
||||
<div class="container-xl">
|
||||
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
|
||||
</div>
|
||||
|
||||
|
||||
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
|
||||
@@ -531,7 +532,10 @@
|
||||
|
||||
|
||||
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
|
||||
<h1 class="bd-title" id="content">Migrating to v4</h1>
|
||||
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
|
||||
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/tree/v4-dev/site/docs/4.5/migration.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
|
||||
<h1 class="bd-title" id="content">Migrating to v4</h1>
|
||||
</div>
|
||||
<p class="bd-lead">Bootstrap 4 is a major rewrite of the entire project. The most notable changes are summarized below, followed by more specific changes to relevant components.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
@@ -542,13 +546,13 @@
|
||||
<h3 id="printing">Printing</h3>
|
||||
<ul>
|
||||
<li>
|
||||
<p>Fixed broken print utilities. Previously, using a <code class="highlighter-rouge">.d-print-*</code> class would unexpectedly overrule any other <code class="highlighter-rouge">.d-*</code> class. Now, they match our other display utilities and only apply to that media (<code class="highlighter-rouge">@media print</code>).</p>
|
||||
<p>Fixed broken print utilities. Previously, using a <code class="language-plaintext highlighter-rouge">.d-print-*</code> class would unexpectedly overrule any other <code class="language-plaintext highlighter-rouge">.d-*</code> class. Now, they match our other display utilities and only apply to that media (<code class="language-plaintext highlighter-rouge">@media print</code>).</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>Expanded available print display utilities to match other utilities. Beta 3 and older only had <code class="highlighter-rouge">block</code>, <code class="highlighter-rouge">inline-block</code>, <code class="highlighter-rouge">inline</code>, and <code class="highlighter-rouge">none</code>. Stable v4 added <code class="highlighter-rouge">flex</code>, <code class="highlighter-rouge">inline-flex</code>, <code class="highlighter-rouge">table</code>, <code class="highlighter-rouge">table-row</code>, and <code class="highlighter-rouge">table-cell</code>.</p>
|
||||
<p>Expanded available print display utilities to match other utilities. Beta 3 and older only had <code class="language-plaintext highlighter-rouge">block</code>, <code class="language-plaintext highlighter-rouge">inline-block</code>, <code class="language-plaintext highlighter-rouge">inline</code>, and <code class="language-plaintext highlighter-rouge">none</code>. Stable v4 added <code class="language-plaintext highlighter-rouge">flex</code>, <code class="language-plaintext highlighter-rouge">inline-flex</code>, <code class="language-plaintext highlighter-rouge">table</code>, <code class="language-plaintext highlighter-rouge">table-row</code>, and <code class="language-plaintext highlighter-rouge">table-cell</code>.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>Fixed print preview rendering across browsers with new print styles that specify <code class="highlighter-rouge">@page</code> <code class="highlighter-rouge">size</code>.</p>
|
||||
<p>Fixed print preview rendering across browsers with new print styles that specify <code class="language-plaintext highlighter-rouge">@page</code> <code class="language-plaintext highlighter-rouge">size</code>.</p>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
@@ -559,28 +563,28 @@
|
||||
<h3 id="miscellaneous">Miscellaneous</h3>
|
||||
|
||||
<ul>
|
||||
<li>Removed the unused <code class="highlighter-rouge">$thumbnail-transition</code> variable. We weren’t transitioning anything, so it was just extra code.</li>
|
||||
<li>The npm package no longer includes any files other than our source and dist files; if you relied on them and were running our scripts via the <code class="highlighter-rouge">node_modules</code> folder, you should adapt your workflow.</li>
|
||||
<li>Removed the unused <code class="language-plaintext highlighter-rouge">$thumbnail-transition</code> variable. We weren’t transitioning anything, so it was just extra code.</li>
|
||||
<li>The npm package no longer includes any files other than our source and dist files; if you relied on them and were running our scripts via the <code class="language-plaintext highlighter-rouge">node_modules</code> folder, you should adapt your workflow.</li>
|
||||
</ul>
|
||||
|
||||
<h3 id="forms">Forms</h3>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<p>Rewrote both custom and default checkboxes and radios. Now, both have matching HTML structure (outer <code class="highlighter-rouge"><div></code> with sibling <code class="highlighter-rouge"><input></code> and <code class="highlighter-rouge"><label></code>) and the same layout styles (stacked default, inline with modifier class). This allows us to style the label based on the input’s state, simplifying support for the <code class="highlighter-rouge">disabled</code> attribute (previously requiring a parent class) and better supporting our form validation.</p>
|
||||
<p>Rewrote both custom and default checkboxes and radios. Now, both have matching HTML structure (outer <code class="language-plaintext highlighter-rouge"><div></code> with sibling <code class="language-plaintext highlighter-rouge"><input></code> and <code class="language-plaintext highlighter-rouge"><label></code>) and the same layout styles (stacked default, inline with modifier class). This allows us to style the label based on the input’s state, simplifying support for the <code class="language-plaintext highlighter-rouge">disabled</code> attribute (previously requiring a parent class) and better supporting our form validation.</p>
|
||||
|
||||
<p>As part of this, we’ve changed the CSS for managing multiple <code class="highlighter-rouge">background-image</code>s on custom form checkboxes and radios. Previously, the now removed <code class="highlighter-rouge">.custom-control-indicator</code> element had the background color, gradient, and SVG icon. Customizing the background gradient meant replacing all of those every time you needed to change just one. Now, we have <code class="highlighter-rouge">.custom-control-label::before</code> for the fill and gradient and <code class="highlighter-rouge">.custom-control-label::after</code> handles the icon.</p>
|
||||
<p>As part of this, we’ve changed the CSS for managing multiple <code class="language-plaintext highlighter-rouge">background-image</code>s on custom form checkboxes and radios. Previously, the now removed <code class="language-plaintext highlighter-rouge">.custom-control-indicator</code> element had the background color, gradient, and SVG icon. Customizing the background gradient meant replacing all of those every time you needed to change just one. Now, we have <code class="language-plaintext highlighter-rouge">.custom-control-label::before</code> for the fill and gradient and <code class="language-plaintext highlighter-rouge">.custom-control-label::after</code> handles the icon.</p>
|
||||
|
||||
<p>To make a custom check inline, add <code class="highlighter-rouge">.custom-control-inline</code>.</p>
|
||||
<p>To make a custom check inline, add <code class="language-plaintext highlighter-rouge">.custom-control-inline</code>.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>Updated selector for input-based button groups. Instead of <code class="highlighter-rouge">[data-toggle="buttons"] { }</code> for style and behavior, we use the <code class="highlighter-rouge">data</code> attribute just for JS behaviors and rely on a new <code class="highlighter-rouge">.btn-group-toggle</code> class for styling.</p>
|
||||
<p>Updated selector for input-based button groups. Instead of <code class="language-plaintext highlighter-rouge">[data-toggle="buttons"] { }</code> for style and behavior, we use the <code class="language-plaintext highlighter-rouge">data</code> attribute just for JS behaviors and rely on a new <code class="language-plaintext highlighter-rouge">.btn-group-toggle</code> class for styling.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>Removed <code class="highlighter-rouge">.col-form-legend</code> in favor of a slightly improved <code class="highlighter-rouge">.col-form-label</code>. This way <code class="highlighter-rouge">.col-form-label-sm</code> and <code class="highlighter-rouge">.col-form-label-lg</code> can be used on <code class="highlighter-rouge"><legend></code> elements with ease.</p>
|
||||
<p>Removed <code class="language-plaintext highlighter-rouge">.col-form-legend</code> in favor of a slightly improved <code class="language-plaintext highlighter-rouge">.col-form-label</code>. This way <code class="language-plaintext highlighter-rouge">.col-form-label-sm</code> and <code class="language-plaintext highlighter-rouge">.col-form-label-lg</code> can be used on <code class="language-plaintext highlighter-rouge"><legend></code> elements with ease.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>Custom file inputs received a change to their <code class="highlighter-rouge">$custom-file-text</code> Sass variable. It’s no longer a nested Sass map and now only powers one string—the <code class="highlighter-rouge">Browse</code> button as that is now the only pseudo-element generated from our Sass. The <code class="highlighter-rouge">Choose file</code> text now comes from the <code class="highlighter-rouge">.custom-file-label</code>.</p>
|
||||
<p>Custom file inputs received a change to their <code class="language-plaintext highlighter-rouge">$custom-file-text</code> Sass variable. It’s no longer a nested Sass map and now only powers one string—the <code class="language-plaintext highlighter-rouge">Browse</code> button as that is now the only pseudo-element generated from our Sass. The <code class="language-plaintext highlighter-rouge">Choose file</code> text now comes from the <code class="language-plaintext highlighter-rouge">.custom-file-label</code>.</p>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
@@ -588,13 +592,13 @@
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<p>Input group addons are now specific to their placement relative to an input. We’ve dropped <code class="highlighter-rouge">.input-group-addon</code> and <code class="highlighter-rouge">.input-group-btn</code> for two new classes, <code class="highlighter-rouge">.input-group-prepend</code> and <code class="highlighter-rouge">.input-group-append</code>. You must explicitly use an append or a prepend now, simplifying much of our CSS. Within an append or prepend, place your buttons as they would exist anywhere else, but wrap text in <code class="highlighter-rouge">.input-group-text</code>.</p>
|
||||
<p>Input group addons are now specific to their placement relative to an input. We’ve dropped <code class="language-plaintext highlighter-rouge">.input-group-addon</code> and <code class="language-plaintext highlighter-rouge">.input-group-btn</code> for two new classes, <code class="language-plaintext highlighter-rouge">.input-group-prepend</code> and <code class="language-plaintext highlighter-rouge">.input-group-append</code>. You must explicitly use an append or a prepend now, simplifying much of our CSS. Within an append or prepend, place your buttons as they would exist anywhere else, but wrap text in <code class="language-plaintext highlighter-rouge">.input-group-text</code>.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>Validation styles are now supported, as are multiple inputs (though you can only validate one input per group).</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>Sizing classes must be on the parent <code class="highlighter-rouge">.input-group</code> and not the individual form elements.</p>
|
||||
<p>Sizing classes must be on the parent <code class="language-plaintext highlighter-rouge">.input-group</code> and not the individual form elements.</p>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
@@ -605,20 +609,20 @@
|
||||
<h3 id="breaking">Breaking</h3>
|
||||
|
||||
<ul>
|
||||
<li>Removed <code class="highlighter-rouge">$badge-color</code> variable and its usage on <code class="highlighter-rouge">.badge</code>. We use a color contrast function to pick a <code class="highlighter-rouge">color</code> based on the <code class="highlighter-rouge">background-color</code>, so the variable is unnecessary.</li>
|
||||
<li>Renamed <code class="highlighter-rouge">grayscale()</code> function to <code class="highlighter-rouge">gray()</code> to avoid breaking conflict with the CSS native <code class="highlighter-rouge">grayscale</code> filter.</li>
|
||||
<li>Renamed <code class="highlighter-rouge">.table-inverse</code>, <code class="highlighter-rouge">.thead-inverse</code>, and <code class="highlighter-rouge">.thead-default</code> to <code class="highlighter-rouge">.*-dark</code> and <code class="highlighter-rouge">.*-light</code>, matching our color schemes used elsewhere.</li>
|
||||
<li>Responsive tables now generate classes for each grid breakpoint. This breaks from Beta 1 in that the <code class="highlighter-rouge">.table-responsive</code> you’ve been using is more like <code class="highlighter-rouge">.table-responsive-md</code>. You may now use <code class="highlighter-rouge">.table-responsive</code> or <code class="highlighter-rouge">.table-responsive-{sm,md,lg,xl}</code> as needed.</li>
|
||||
<li>Removed <code class="language-plaintext highlighter-rouge">$badge-color</code> variable and its usage on <code class="language-plaintext highlighter-rouge">.badge</code>. We use a color contrast function to pick a <code class="language-plaintext highlighter-rouge">color</code> based on the <code class="language-plaintext highlighter-rouge">background-color</code>, so the variable is unnecessary.</li>
|
||||
<li>Renamed <code class="language-plaintext highlighter-rouge">grayscale()</code> function to <code class="language-plaintext highlighter-rouge">gray()</code> to avoid breaking conflict with the CSS native <code class="language-plaintext highlighter-rouge">grayscale</code> filter.</li>
|
||||
<li>Renamed <code class="language-plaintext highlighter-rouge">.table-inverse</code>, <code class="language-plaintext highlighter-rouge">.thead-inverse</code>, and <code class="language-plaintext highlighter-rouge">.thead-default</code> to <code class="language-plaintext highlighter-rouge">.*-dark</code> and <code class="language-plaintext highlighter-rouge">.*-light</code>, matching our color schemes used elsewhere.</li>
|
||||
<li>Responsive tables now generate classes for each grid breakpoint. This breaks from Beta 1 in that the <code class="language-plaintext highlighter-rouge">.table-responsive</code> you’ve been using is more like <code class="language-plaintext highlighter-rouge">.table-responsive-md</code>. You may now use <code class="language-plaintext highlighter-rouge">.table-responsive</code> or <code class="language-plaintext highlighter-rouge">.table-responsive-{sm,md,lg,xl}</code> as needed.</li>
|
||||
<li>Dropped Bower support as the package manager has been deprecated for alternatives (e.g., Yarn or npm). <a href="https://github.com/bower/bower/issues/2298">See bower/bower#2298</a> for details.</li>
|
||||
<li>Bootstrap still requires jQuery 1.9.1 or higher, but you’re advised to use version 3.x since v3.x’s supported browsers are the ones Bootstrap supports plus v3.x has some security fixes.</li>
|
||||
<li>Removed the unused <code class="highlighter-rouge">.form-control-label</code> class. If you did make use of this class, it was duplicate of the <code class="highlighter-rouge">.col-form-label</code> class that vertically centered a <code class="highlighter-rouge"><label></code> with it’s associated input in horizontal form layouts.</li>
|
||||
<li>Changed the <code class="highlighter-rouge">color-yiq</code> from a mixin that included the <code class="highlighter-rouge">color</code> property to a function that returns a value, allowing you to use it for any CSS property. For example, instead of <code class="highlighter-rouge">color-yiq(#000)</code>, you’d write <code class="highlighter-rouge">color: color-yiq(#000);</code>.</li>
|
||||
<li>Removed the unused <code class="language-plaintext highlighter-rouge">.form-control-label</code> class. If you did make use of this class, it was duplicate of the <code class="language-plaintext highlighter-rouge">.col-form-label</code> class that vertically centered a <code class="language-plaintext highlighter-rouge"><label></code> with it’s associated input in horizontal form layouts.</li>
|
||||
<li>Changed the <code class="language-plaintext highlighter-rouge">color-yiq</code> from a mixin that included the <code class="language-plaintext highlighter-rouge">color</code> property to a function that returns a value, allowing you to use it for any CSS property. For example, instead of <code class="language-plaintext highlighter-rouge">color-yiq(#000)</code>, you’d write <code class="language-plaintext highlighter-rouge">color: color-yiq(#000);</code>.</li>
|
||||
</ul>
|
||||
|
||||
<h3 id="highlights">Highlights</h3>
|
||||
|
||||
<ul>
|
||||
<li>Introduced new <code class="highlighter-rouge">pointer-events</code> usage on modals. The outer <code class="highlighter-rouge">.modal-dialog</code> passes through events with <code class="highlighter-rouge">pointer-events: none</code> for custom click handling (making it possible to just listen on the <code class="highlighter-rouge">.modal-backdrop</code> for any clicks), and then counteracts it for the actual <code class="highlighter-rouge">.modal-content</code> with <code class="highlighter-rouge">pointer-events: auto</code>.</li>
|
||||
<li>Introduced new <code class="language-plaintext highlighter-rouge">pointer-events</code> usage on modals. The outer <code class="language-plaintext highlighter-rouge">.modal-dialog</code> passes through events with <code class="language-plaintext highlighter-rouge">pointer-events: none</code> for custom click handling (making it possible to just listen on the <code class="language-plaintext highlighter-rouge">.modal-backdrop</code> for any clicks), and then counteracts it for the actual <code class="language-plaintext highlighter-rouge">.modal-content</code> with <code class="language-plaintext highlighter-rouge">pointer-events: auto</code>.</li>
|
||||
</ul>
|
||||
|
||||
<h2 id="summary">Summary</h2>
|
||||
@@ -637,11 +641,11 @@
|
||||
<ul>
|
||||
<li><strong>Flexbox is enabled by default.</strong> In general this means a move away from floats and more across our components.</li>
|
||||
<li>Switched from <a href="http://lesscss.org/">Less</a> to <a href="https://sass-lang.com/">Sass</a> for our source CSS files.</li>
|
||||
<li>Switched from <code class="highlighter-rouge">px</code> to <code class="highlighter-rouge">rem</code> as our primary CSS unit, though pixels are still used for media queries and grid behavior as device viewports are not affected by type size.</li>
|
||||
<li>Global font-size increased from <code class="highlighter-rouge">14px</code> to <code class="highlighter-rouge">16px</code>.</li>
|
||||
<li>Revamped grid tiers to add a fifth option (addressing smaller devices at <code class="highlighter-rouge">576px</code> and below) and removed the <code class="highlighter-rouge">-xs</code> infix from those classes. Example: <code class="highlighter-rouge">.col-6.col-sm-4.col-md-3</code>.</li>
|
||||
<li>Replaced the separate optional theme with configurable options via SCSS variables (e.g., <code class="highlighter-rouge">$enable-gradients: true</code>).</li>
|
||||
<li>Build system overhauled to use a series of npm scripts instead of Grunt. See <code class="highlighter-rouge">package.json</code> for all scripts, or our project readme for local development needs.</li>
|
||||
<li>Switched from <code class="language-plaintext highlighter-rouge">px</code> to <code class="language-plaintext highlighter-rouge">rem</code> as our primary CSS unit, though pixels are still used for media queries and grid behavior as device viewports are not affected by type size.</li>
|
||||
<li>Global font-size increased from <code class="language-plaintext highlighter-rouge">14px</code> to <code class="language-plaintext highlighter-rouge">16px</code>.</li>
|
||||
<li>Revamped grid tiers to add a fifth option (addressing smaller devices at <code class="language-plaintext highlighter-rouge">576px</code> and below) and removed the <code class="language-plaintext highlighter-rouge">-xs</code> infix from those classes. Example: <code class="language-plaintext highlighter-rouge">.col-6.col-sm-4.col-md-3</code>.</li>
|
||||
<li>Replaced the separate optional theme with configurable options via SCSS variables (e.g., <code class="language-plaintext highlighter-rouge">$enable-gradients: true</code>).</li>
|
||||
<li>Build system overhauled to use a series of npm scripts instead of Grunt. See <code class="language-plaintext highlighter-rouge">package.json</code> for all scripts, or our project readme for local development needs.</li>
|
||||
<li>Non-responsive usage of Bootstrap is no longer supported.</li>
|
||||
<li>Dropped the online Customizer in favor of more extensive setup documentation and customized builds.</li>
|
||||
<li>Added dozens of new <a href="/docs/4.5/utilities/">utility classes</a> for common CSS property-value pairs and margin/padding spacing shortcuts.</li>
|
||||
@@ -658,17 +662,17 @@
|
||||
</li>
|
||||
<li><strong>Updated grid class names and a new grid tier.</strong>
|
||||
<ul>
|
||||
<li>Added a new <code class="highlighter-rouge">sm</code> grid tier below <code class="highlighter-rouge">768px</code> for more granular control. We now have <code class="highlighter-rouge">xs</code>, <code class="highlighter-rouge">sm</code>, <code class="highlighter-rouge">md</code>, <code class="highlighter-rouge">lg</code>, and <code class="highlighter-rouge">xl</code>. This also means every tier has been bumped up one level (so <code class="highlighter-rouge">.col-md-6</code> in v3 is now <code class="highlighter-rouge">.col-lg-6</code> in v4).</li>
|
||||
<li><code class="highlighter-rouge">xs</code> grid classes have been modified to not require the infix to more accurately represent that they start applying styles at <code class="highlighter-rouge">min-width: 0</code> and not a set pixel value. Instead of <code class="highlighter-rouge">.col-xs-6</code>, it’s now <code class="highlighter-rouge">.col-6</code>. All other grid tiers require the infix (e.g., <code class="highlighter-rouge">sm</code>).</li>
|
||||
<li>Added a new <code class="language-plaintext highlighter-rouge">sm</code> grid tier below <code class="language-plaintext highlighter-rouge">768px</code> for more granular control. We now have <code class="language-plaintext highlighter-rouge">xs</code>, <code class="language-plaintext highlighter-rouge">sm</code>, <code class="language-plaintext highlighter-rouge">md</code>, <code class="language-plaintext highlighter-rouge">lg</code>, and <code class="language-plaintext highlighter-rouge">xl</code>. This also means every tier has been bumped up one level (so <code class="language-plaintext highlighter-rouge">.col-md-6</code> in v3 is now <code class="language-plaintext highlighter-rouge">.col-lg-6</code> in v4).</li>
|
||||
<li><code class="language-plaintext highlighter-rouge">xs</code> grid classes have been modified to not require the infix to more accurately represent that they start applying styles at <code class="language-plaintext highlighter-rouge">min-width: 0</code> and not a set pixel value. Instead of <code class="language-plaintext highlighter-rouge">.col-xs-6</code>, it’s now <code class="language-plaintext highlighter-rouge">.col-6</code>. All other grid tiers require the infix (e.g., <code class="language-plaintext highlighter-rouge">sm</code>).</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><strong>Updated grid sizes, mixins, and variables.</strong>
|
||||
<ul>
|
||||
<li>Grid gutters now have a Sass map so you can specify specific gutter widths at each breakpoint.</li>
|
||||
<li>Updated grid mixins to utilize a <code class="highlighter-rouge">make-col-ready</code> prep mixin and a <code class="highlighter-rouge">make-col</code> to set the <code class="highlighter-rouge">flex</code> and <code class="highlighter-rouge">max-width</code> for individual column sizing.</li>
|
||||
<li>Changed grid system media query breakpoints and container widths to account for new grid tier and ensure columns are evenly divisible by <code class="highlighter-rouge">12</code> at their max width.</li>
|
||||
<li>Grid breakpoints and container widths are now handled via Sass maps (<code class="highlighter-rouge">$grid-breakpoints</code> and <code class="highlighter-rouge">$container-max-widths</code>) instead of a handful of separate variables. These replace the <code class="highlighter-rouge">@screen-*</code> variables entirely and allow you to fully customize the grid tiers.</li>
|
||||
<li>Media queries have also changed. Instead of repeating our media query declarations with the same value each time, we now have <code class="highlighter-rouge">@include media-breakpoint-up/down/only</code>. Now, instead of writing <code class="highlighter-rouge">@media (min-width: @screen-sm-min) { ... }</code>, you can write <code class="highlighter-rouge">@include media-breakpoint-up(sm) { ... }</code>.</li>
|
||||
<li>Updated grid mixins to utilize a <code class="language-plaintext highlighter-rouge">make-col-ready</code> prep mixin and a <code class="language-plaintext highlighter-rouge">make-col</code> to set the <code class="language-plaintext highlighter-rouge">flex</code> and <code class="language-plaintext highlighter-rouge">max-width</code> for individual column sizing.</li>
|
||||
<li>Changed grid system media query breakpoints and container widths to account for new grid tier and ensure columns are evenly divisible by <code class="language-plaintext highlighter-rouge">12</code> at their max width.</li>
|
||||
<li>Grid breakpoints and container widths are now handled via Sass maps (<code class="language-plaintext highlighter-rouge">$grid-breakpoints</code> and <code class="language-plaintext highlighter-rouge">$container-max-widths</code>) instead of a handful of separate variables. These replace the <code class="language-plaintext highlighter-rouge">@screen-*</code> variables entirely and allow you to fully customize the grid tiers.</li>
|
||||
<li>Media queries have also changed. Instead of repeating our media query declarations with the same value each time, we now have <code class="language-plaintext highlighter-rouge">@include media-breakpoint-up/down/only</code>. Now, instead of writing <code class="language-plaintext highlighter-rouge">@media (min-width: @screen-sm-min) { ... }</code>, you can write <code class="language-plaintext highlighter-rouge">@include media-breakpoint-up(sm) { ... }</code>.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -687,8 +691,8 @@
|
||||
</li>
|
||||
<li><strong>Dropped the Affix jQuery plugin.</strong>
|
||||
<ul>
|
||||
<li>We recommend using <code class="highlighter-rouge">position: sticky</code> instead. <a href="https://html5please.com/#sticky">See the HTML5 Please entry</a> for details and specific polyfill recommendations. One suggestion is to use an <code class="highlighter-rouge">@supports</code> rule for implementing it (e.g., <code class="highlighter-rouge">@supports (position: sticky) { ... }</code>)</li>
|
||||
<li>If you were using Affix to apply additional, non-<code class="highlighter-rouge">position</code> styles, the polyfills might not support your use case. One option for such uses is the third-party <a href="https://github.com/acch/scrollpos-styler">ScrollPos-Styler</a> library.</li>
|
||||
<li>We recommend using <code class="language-plaintext highlighter-rouge">position: sticky</code> instead. <a href="https://html5please.com/#sticky">See the HTML5 Please entry</a> for details and specific polyfill recommendations. One suggestion is to use an <code class="language-plaintext highlighter-rouge">@supports</code> rule for implementing it (e.g., <code class="language-plaintext highlighter-rouge">@supports (position: sticky) { ... }</code>)</li>
|
||||
<li>If you were using Affix to apply additional, non-<code class="language-plaintext highlighter-rouge">position</code> styles, the polyfills might not support your use case. One option for such uses is the third-party <a href="https://github.com/acch/scrollpos-styler">ScrollPos-Styler</a> library.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><strong>Dropped the pager component</strong> as it was essentially slightly customized buttons.</li>
|
||||
@@ -701,78 +705,78 @@
|
||||
|
||||
<h3 id="reboot">Reboot</h3>
|
||||
|
||||
<p>New to Bootstrap 4 is the <a href="/docs/4.5/content/reboot/">Reboot</a>, a new stylesheet that builds on Normalize with our own somewhat opinionated reset styles. Selectors appearing in this file only use elements—there are no classes here. This isolates our reset styles from our component styles for a more modular approach. Some of the most important resets this includes are the <code class="highlighter-rouge">box-sizing: border-box</code> change, moving from <code class="highlighter-rouge">em</code> to <code class="highlighter-rouge">rem</code> units on many elements, link styles, and many form element resets.</p>
|
||||
<p>New to Bootstrap 4 is the <a href="/docs/4.5/content/reboot/">Reboot</a>, a new stylesheet that builds on Normalize with our own somewhat opinionated reset styles. Selectors appearing in this file only use elements—there are no classes here. This isolates our reset styles from our component styles for a more modular approach. Some of the most important resets this includes are the <code class="language-plaintext highlighter-rouge">box-sizing: border-box</code> change, moving from <code class="language-plaintext highlighter-rouge">em</code> to <code class="language-plaintext highlighter-rouge">rem</code> units on many elements, link styles, and many form element resets.</p>
|
||||
|
||||
<h3 id="typography">Typography</h3>
|
||||
|
||||
<ul>
|
||||
<li>Moved all <code class="highlighter-rouge">.text-</code> utilities to the <code class="highlighter-rouge">_utilities.scss</code> file.</li>
|
||||
<li>Dropped <code class="highlighter-rouge">.page-header</code> as its styles can be applied via utilities.</li>
|
||||
<li><code class="highlighter-rouge">.dl-horizontal</code> has been dropped. Instead, use <code class="highlighter-rouge">.row</code> on <code class="highlighter-rouge"><dl></code> and use grid column classes (or mixins) on its <code class="highlighter-rouge"><dt></code> and <code class="highlighter-rouge"><dd></code> children.</li>
|
||||
<li>Redesigned blockquotes, moving their styles from the <code class="highlighter-rouge"><blockquote></code> element to a single class, <code class="highlighter-rouge">.blockquote</code>. Dropped the <code class="highlighter-rouge">.blockquote-reverse</code> modifier for text utilities.</li>
|
||||
<li><code class="highlighter-rouge">.list-inline</code> now requires that its children list items have the new <code class="highlighter-rouge">.list-inline-item</code> class applied to them.</li>
|
||||
<li>Moved all <code class="language-plaintext highlighter-rouge">.text-</code> utilities to the <code class="language-plaintext highlighter-rouge">_utilities.scss</code> file.</li>
|
||||
<li>Dropped <code class="language-plaintext highlighter-rouge">.page-header</code> as its styles can be applied via utilities.</li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.dl-horizontal</code> has been dropped. Instead, use <code class="language-plaintext highlighter-rouge">.row</code> on <code class="language-plaintext highlighter-rouge"><dl></code> and use grid column classes (or mixins) on its <code class="language-plaintext highlighter-rouge"><dt></code> and <code class="language-plaintext highlighter-rouge"><dd></code> children.</li>
|
||||
<li>Redesigned blockquotes, moving their styles from the <code class="language-plaintext highlighter-rouge"><blockquote></code> element to a single class, <code class="language-plaintext highlighter-rouge">.blockquote</code>. Dropped the <code class="language-plaintext highlighter-rouge">.blockquote-reverse</code> modifier for text utilities.</li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.list-inline</code> now requires that its children list items have the new <code class="language-plaintext highlighter-rouge">.list-inline-item</code> class applied to them.</li>
|
||||
</ul>
|
||||
|
||||
<h3 id="images">Images</h3>
|
||||
|
||||
<ul>
|
||||
<li>Renamed <code class="highlighter-rouge">.img-responsive</code> to <code class="highlighter-rouge">.img-fluid</code>.</li>
|
||||
<li>Renamed <code class="highlighter-rouge">.img-rounded</code> to <code class="highlighter-rouge">.rounded</code></li>
|
||||
<li>Renamed <code class="highlighter-rouge">.img-circle</code> to <code class="highlighter-rouge">.rounded-circle</code></li>
|
||||
<li>Renamed <code class="language-plaintext highlighter-rouge">.img-responsive</code> to <code class="language-plaintext highlighter-rouge">.img-fluid</code>.</li>
|
||||
<li>Renamed <code class="language-plaintext highlighter-rouge">.img-rounded</code> to <code class="language-plaintext highlighter-rouge">.rounded</code></li>
|
||||
<li>Renamed <code class="language-plaintext highlighter-rouge">.img-circle</code> to <code class="language-plaintext highlighter-rouge">.rounded-circle</code></li>
|
||||
</ul>
|
||||
|
||||
<h3 id="tables">Tables</h3>
|
||||
|
||||
<ul>
|
||||
<li>Nearly all instances of the <code class="highlighter-rouge">></code> selector have been removed, meaning nested tables will now automatically inherit styles from their parents. This greatly simplifies our selectors and potential customizations.</li>
|
||||
<li>Renamed <code class="highlighter-rouge">.table-condensed</code> to <code class="highlighter-rouge">.table-sm</code> for consistency.</li>
|
||||
<li>Added a new <code class="highlighter-rouge">.table-inverse</code> option.</li>
|
||||
<li>Added table header modifiers: <code class="highlighter-rouge">.thead-default</code> and <code class="highlighter-rouge">.thead-inverse</code>.</li>
|
||||
<li>Renamed contextual classes to have a <code class="highlighter-rouge">.table-</code>-prefix. Hence <code class="highlighter-rouge">.active</code>, <code class="highlighter-rouge">.success</code>, <code class="highlighter-rouge">.warning</code>, <code class="highlighter-rouge">.danger</code> and <code class="highlighter-rouge">.info</code> to <code class="highlighter-rouge">.table-active</code>, <code class="highlighter-rouge">.table-success</code>, <code class="highlighter-rouge">.table-warning</code>, <code class="highlighter-rouge">.table-danger</code> and <code class="highlighter-rouge">.table-info</code>.</li>
|
||||
<li>Nearly all instances of the <code class="language-plaintext highlighter-rouge">></code> selector have been removed, meaning nested tables will now automatically inherit styles from their parents. This greatly simplifies our selectors and potential customizations.</li>
|
||||
<li>Renamed <code class="language-plaintext highlighter-rouge">.table-condensed</code> to <code class="language-plaintext highlighter-rouge">.table-sm</code> for consistency.</li>
|
||||
<li>Added a new <code class="language-plaintext highlighter-rouge">.table-inverse</code> option.</li>
|
||||
<li>Added table header modifiers: <code class="language-plaintext highlighter-rouge">.thead-default</code> and <code class="language-plaintext highlighter-rouge">.thead-inverse</code>.</li>
|
||||
<li>Renamed contextual classes to have a <code class="language-plaintext highlighter-rouge">.table-</code>-prefix. Hence <code class="language-plaintext highlighter-rouge">.active</code>, <code class="language-plaintext highlighter-rouge">.success</code>, <code class="language-plaintext highlighter-rouge">.warning</code>, <code class="language-plaintext highlighter-rouge">.danger</code> and <code class="language-plaintext highlighter-rouge">.info</code> to <code class="language-plaintext highlighter-rouge">.table-active</code>, <code class="language-plaintext highlighter-rouge">.table-success</code>, <code class="language-plaintext highlighter-rouge">.table-warning</code>, <code class="language-plaintext highlighter-rouge">.table-danger</code> and <code class="language-plaintext highlighter-rouge">.table-info</code>.</li>
|
||||
</ul>
|
||||
|
||||
<h3 id="forms-1">Forms</h3>
|
||||
|
||||
<ul>
|
||||
<li>Moved element resets to the <code class="highlighter-rouge">_reboot.scss</code> file.</li>
|
||||
<li>Renamed <code class="highlighter-rouge">.control-label</code> to <code class="highlighter-rouge">.col-form-label</code>.</li>
|
||||
<li>Renamed <code class="highlighter-rouge">.input-lg</code> and <code class="highlighter-rouge">.input-sm</code> to <code class="highlighter-rouge">.form-control-lg</code> and <code class="highlighter-rouge">.form-control-sm</code>, respectively.</li>
|
||||
<li>Dropped <code class="highlighter-rouge">.form-group-*</code> classes for simplicity’s sake. Use <code class="highlighter-rouge">.form-control-*</code> classes instead now.</li>
|
||||
<li>Dropped <code class="highlighter-rouge">.help-block</code> and replaced it with <code class="highlighter-rouge">.form-text</code> for block-level help text. For inline help text and other flexible options, use utility classes like <code class="highlighter-rouge">.text-muted</code>.</li>
|
||||
<li>Dropped <code class="highlighter-rouge">.radio-inline</code> and <code class="highlighter-rouge">.checkbox-inline</code>.</li>
|
||||
<li>Consolidated <code class="highlighter-rouge">.checkbox</code> and <code class="highlighter-rouge">.radio</code> into <code class="highlighter-rouge">.form-check</code> and the various <code class="highlighter-rouge">.form-check-*</code> classes.</li>
|
||||
<li>Moved element resets to the <code class="language-plaintext highlighter-rouge">_reboot.scss</code> file.</li>
|
||||
<li>Renamed <code class="language-plaintext highlighter-rouge">.control-label</code> to <code class="language-plaintext highlighter-rouge">.col-form-label</code>.</li>
|
||||
<li>Renamed <code class="language-plaintext highlighter-rouge">.input-lg</code> and <code class="language-plaintext highlighter-rouge">.input-sm</code> to <code class="language-plaintext highlighter-rouge">.form-control-lg</code> and <code class="language-plaintext highlighter-rouge">.form-control-sm</code>, respectively.</li>
|
||||
<li>Dropped <code class="language-plaintext highlighter-rouge">.form-group-*</code> classes for simplicity’s sake. Use <code class="language-plaintext highlighter-rouge">.form-control-*</code> classes instead now.</li>
|
||||
<li>Dropped <code class="language-plaintext highlighter-rouge">.help-block</code> and replaced it with <code class="language-plaintext highlighter-rouge">.form-text</code> for block-level help text. For inline help text and other flexible options, use utility classes like <code class="language-plaintext highlighter-rouge">.text-muted</code>.</li>
|
||||
<li>Dropped <code class="language-plaintext highlighter-rouge">.radio-inline</code> and <code class="language-plaintext highlighter-rouge">.checkbox-inline</code>.</li>
|
||||
<li>Consolidated <code class="language-plaintext highlighter-rouge">.checkbox</code> and <code class="language-plaintext highlighter-rouge">.radio</code> into <code class="language-plaintext highlighter-rouge">.form-check</code> and the various <code class="language-plaintext highlighter-rouge">.form-check-*</code> classes.</li>
|
||||
<li>Horizontal forms overhauled:
|
||||
<ul>
|
||||
<li>Dropped the <code class="highlighter-rouge">.form-horizontal</code> class requirement.</li>
|
||||
<li><code class="highlighter-rouge">.form-group</code> no longer applies styles from the <code class="highlighter-rouge">.row</code> via mixin, so <code class="highlighter-rouge">.row</code> is now required for horizontal grid layouts (e.g., <code class="highlighter-rouge"><div class="form-group row"></code>).</li>
|
||||
<li>Added new <code class="highlighter-rouge">.col-form-label</code> class to vertically center labels with <code class="highlighter-rouge">.form-control</code>s.</li>
|
||||
<li>Added new <code class="highlighter-rouge">.form-row</code> for compact form layouts with the grid classes (swap your <code class="highlighter-rouge">.row</code> for a <code class="highlighter-rouge">.form-row</code> and go).</li>
|
||||
<li>Dropped the <code class="language-plaintext highlighter-rouge">.form-horizontal</code> class requirement.</li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.form-group</code> no longer applies styles from the <code class="language-plaintext highlighter-rouge">.row</code> via mixin, so <code class="language-plaintext highlighter-rouge">.row</code> is now required for horizontal grid layouts (e.g., <code class="language-plaintext highlighter-rouge"><div class="form-group row"></code>).</li>
|
||||
<li>Added new <code class="language-plaintext highlighter-rouge">.col-form-label</code> class to vertically center labels with <code class="language-plaintext highlighter-rouge">.form-control</code>s.</li>
|
||||
<li>Added new <code class="language-plaintext highlighter-rouge">.form-row</code> for compact form layouts with the grid classes (swap your <code class="language-plaintext highlighter-rouge">.row</code> for a <code class="language-plaintext highlighter-rouge">.form-row</code> and go).</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Added custom forms support (for checkboxes, radios, selects, and file inputs).</li>
|
||||
<li>Replaced <code class="highlighter-rouge">.has-error</code>, <code class="highlighter-rouge">.has-warning</code>, and <code class="highlighter-rouge">.has-success</code> classes with HTML5 form validation via CSS’s <code class="highlighter-rouge">:invalid</code> and <code class="highlighter-rouge">:valid</code> pseudo-classes.</li>
|
||||
<li>Renamed <code class="highlighter-rouge">.form-control-static</code> to <code class="highlighter-rouge">.form-control-plaintext</code>.</li>
|
||||
<li>Replaced <code class="language-plaintext highlighter-rouge">.has-error</code>, <code class="language-plaintext highlighter-rouge">.has-warning</code>, and <code class="language-plaintext highlighter-rouge">.has-success</code> classes with HTML5 form validation via CSS’s <code class="language-plaintext highlighter-rouge">:invalid</code> and <code class="language-plaintext highlighter-rouge">:valid</code> pseudo-classes.</li>
|
||||
<li>Renamed <code class="language-plaintext highlighter-rouge">.form-control-static</code> to <code class="language-plaintext highlighter-rouge">.form-control-plaintext</code>.</li>
|
||||
</ul>
|
||||
|
||||
<h3 id="buttons">Buttons</h3>
|
||||
|
||||
<ul>
|
||||
<li>Renamed <code class="highlighter-rouge">.btn-default</code> to <code class="highlighter-rouge">.btn-secondary</code>.</li>
|
||||
<li>Dropped the <code class="highlighter-rouge">.btn-xs</code> class entirely as <code class="highlighter-rouge">.btn-sm</code> is proportionally much smaller than v3’s.</li>
|
||||
<li>The <a href="https://getbootstrap.com/docs/3.3/javascript/#buttons-stateful">stateful button</a> feature of the <code class="highlighter-rouge">button.js</code> jQuery plugin has been dropped. This includes the <code class="highlighter-rouge">$().button(string)</code> and <code class="highlighter-rouge">$().button('reset')</code> methods. We advise using a tiny bit of custom JavaScript instead, which will have the benefit of behaving exactly the way you want it to.
|
||||
<li>Renamed <code class="language-plaintext highlighter-rouge">.btn-default</code> to <code class="language-plaintext highlighter-rouge">.btn-secondary</code>.</li>
|
||||
<li>Dropped the <code class="language-plaintext highlighter-rouge">.btn-xs</code> class entirely as <code class="language-plaintext highlighter-rouge">.btn-sm</code> is proportionally much smaller than v3’s.</li>
|
||||
<li>The <a href="https://getbootstrap.com/docs/3.3/javascript/#buttons-stateful">stateful button</a> feature of the <code class="language-plaintext highlighter-rouge">button.js</code> jQuery plugin has been dropped. This includes the <code class="language-plaintext highlighter-rouge">$().button(string)</code> and <code class="language-plaintext highlighter-rouge">$().button('reset')</code> methods. We advise using a tiny bit of custom JavaScript instead, which will have the benefit of behaving exactly the way you want it to.
|
||||
<ul>
|
||||
<li>Note that the other features of the plugin (button checkboxes, button radios, single-toggle buttons) have been retained in v4.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Change buttons’ <code class="highlighter-rouge">[disabled]</code> to <code class="highlighter-rouge">:disabled</code> as IE9+ supports <code class="highlighter-rouge">:disabled</code>. However <code class="highlighter-rouge">fieldset[disabled]</code> is still necessary because <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset#Browser_compatibility">native disabled fieldsets are still buggy in IE11</a>.</li>
|
||||
<li>Change buttons’ <code class="language-plaintext highlighter-rouge">[disabled]</code> to <code class="language-plaintext highlighter-rouge">:disabled</code> as IE9+ supports <code class="language-plaintext highlighter-rouge">:disabled</code>. However <code class="language-plaintext highlighter-rouge">fieldset[disabled]</code> is still necessary because <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset#Browser_compatibility">native disabled fieldsets are still buggy in IE11</a>.</li>
|
||||
</ul>
|
||||
|
||||
<h3 id="button-group">Button group</h3>
|
||||
|
||||
<ul>
|
||||
<li>Rewrote component with flexbox.</li>
|
||||
<li>Removed <code class="highlighter-rouge">.btn-group-justified</code>. As a replacement you can use <code class="highlighter-rouge"><div class="btn-group d-flex" role="group"></div></code> as a wrapper around elements with <code class="highlighter-rouge">.w-100</code>.</li>
|
||||
<li>Dropped the <code class="highlighter-rouge">.btn-group-xs</code> class entirely given removal of <code class="highlighter-rouge">.btn-xs</code>.</li>
|
||||
<li>Removed <code class="language-plaintext highlighter-rouge">.btn-group-justified</code>. As a replacement you can use <code class="language-plaintext highlighter-rouge"><div class="btn-group d-flex" role="group"></div></code> as a wrapper around elements with <code class="language-plaintext highlighter-rouge">.w-100</code>.</li>
|
||||
<li>Dropped the <code class="language-plaintext highlighter-rouge">.btn-group-xs</code> class entirely given removal of <code class="language-plaintext highlighter-rouge">.btn-xs</code>.</li>
|
||||
<li>Removed explicit spacing between button groups in button toolbars; use margin utilities now.</li>
|
||||
<li>Improved documentation for use with other components.</li>
|
||||
</ul>
|
||||
@@ -782,19 +786,19 @@
|
||||
<ul>
|
||||
<li>Switched from parent selectors to singular classes for all components, modifiers, etc.</li>
|
||||
<li>Simplified dropdown styles to no longer ship with upward or downward facing arrows attached to the dropdown menu.</li>
|
||||
<li>Dropdowns can be built with <code class="highlighter-rouge"><div></code>s or <code class="highlighter-rouge"><ul></code>s now.</li>
|
||||
<li>Rebuilt dropdown styles and markup to provide easy, built-in support for <code class="highlighter-rouge"><a></code> and <code class="highlighter-rouge"><button></code> based dropdown items.</li>
|
||||
<li>Renamed <code class="highlighter-rouge">.divider</code> to <code class="highlighter-rouge">.dropdown-divider</code>.</li>
|
||||
<li>Dropdown items now require <code class="highlighter-rouge">.dropdown-item</code>.</li>
|
||||
<li>Dropdown toggles no longer require an explicit <code class="highlighter-rouge"><span class="caret"></span></code>; this is now provided automatically via CSS’s <code class="highlighter-rouge">::after</code> on <code class="highlighter-rouge">.dropdown-toggle</code>.</li>
|
||||
<li>Dropdowns can be built with <code class="language-plaintext highlighter-rouge"><div></code>s or <code class="language-plaintext highlighter-rouge"><ul></code>s now.</li>
|
||||
<li>Rebuilt dropdown styles and markup to provide easy, built-in support for <code class="language-plaintext highlighter-rouge"><a></code> and <code class="language-plaintext highlighter-rouge"><button></code> based dropdown items.</li>
|
||||
<li>Renamed <code class="language-plaintext highlighter-rouge">.divider</code> to <code class="language-plaintext highlighter-rouge">.dropdown-divider</code>.</li>
|
||||
<li>Dropdown items now require <code class="language-plaintext highlighter-rouge">.dropdown-item</code>.</li>
|
||||
<li>Dropdown toggles no longer require an explicit <code class="language-plaintext highlighter-rouge"><span class="caret"></span></code>; this is now provided automatically via CSS’s <code class="language-plaintext highlighter-rouge">::after</code> on <code class="language-plaintext highlighter-rouge">.dropdown-toggle</code>.</li>
|
||||
</ul>
|
||||
|
||||
<h3 id="grid-system-1">Grid system</h3>
|
||||
|
||||
<ul>
|
||||
<li>Added a new <code class="highlighter-rouge">576px</code> grid breakpoint as <code class="highlighter-rouge">sm</code>, meaning there are now five total tiers (<code class="highlighter-rouge">xs</code>, <code class="highlighter-rouge">sm</code>, <code class="highlighter-rouge">md</code>, <code class="highlighter-rouge">lg</code>, and <code class="highlighter-rouge">xl</code>).</li>
|
||||
<li>Renamed the responsive grid modifier classes from <code class="highlighter-rouge">.col-{breakpoint}-{modifier}-{size}</code> to <code class="highlighter-rouge">.{modifier}-{breakpoint}-{size}</code> for simpler grid classes.</li>
|
||||
<li>Dropped push and pull modifier classes for the new flexbox-powered <code class="highlighter-rouge">order</code> classes. For example, instead of <code class="highlighter-rouge">.col-8.push-4</code> and <code class="highlighter-rouge">.col-4.pull-8</code>, you’d use <code class="highlighter-rouge">.col-8.order-2</code> and <code class="highlighter-rouge">.col-4.order-1</code>.</li>
|
||||
<li>Added a new <code class="language-plaintext highlighter-rouge">576px</code> grid breakpoint as <code class="language-plaintext highlighter-rouge">sm</code>, meaning there are now five total tiers (<code class="language-plaintext highlighter-rouge">xs</code>, <code class="language-plaintext highlighter-rouge">sm</code>, <code class="language-plaintext highlighter-rouge">md</code>, <code class="language-plaintext highlighter-rouge">lg</code>, and <code class="language-plaintext highlighter-rouge">xl</code>).</li>
|
||||
<li>Renamed the responsive grid modifier classes from <code class="language-plaintext highlighter-rouge">.col-{breakpoint}-{modifier}-{size}</code> to <code class="language-plaintext highlighter-rouge">.{modifier}-{breakpoint}-{size}</code> for simpler grid classes.</li>
|
||||
<li>Dropped push and pull modifier classes for the new flexbox-powered <code class="language-plaintext highlighter-rouge">order</code> classes. For example, instead of <code class="language-plaintext highlighter-rouge">.col-8.push-4</code> and <code class="language-plaintext highlighter-rouge">.col-4.pull-8</code>, you’d use <code class="language-plaintext highlighter-rouge">.col-8.order-2</code> and <code class="language-plaintext highlighter-rouge">.col-4.order-1</code>.</li>
|
||||
<li>Added flexbox utility classes for grid system and components.</li>
|
||||
</ul>
|
||||
|
||||
@@ -802,8 +806,8 @@
|
||||
|
||||
<ul>
|
||||
<li>Rewrote component with flexbox.</li>
|
||||
<li>Replaced <code class="highlighter-rouge">a.list-group-item</code> with an explicit class, <code class="highlighter-rouge">.list-group-item-action</code>, for styling link and button versions of list group items.</li>
|
||||
<li>Added <code class="highlighter-rouge">.list-group-flush</code> class for use with cards.</li>
|
||||
<li>Replaced <code class="language-plaintext highlighter-rouge">a.list-group-item</code> with an explicit class, <code class="language-plaintext highlighter-rouge">.list-group-item-action</code>, for styling link and button versions of list group items.</li>
|
||||
<li>Added <code class="language-plaintext highlighter-rouge">.list-group-flush</code> class for use with cards.</li>
|
||||
</ul>
|
||||
|
||||
<h3 id="modal">Modal</h3>
|
||||
@@ -811,15 +815,15 @@
|
||||
<ul>
|
||||
<li>Rewrote component with flexbox.</li>
|
||||
<li>Given the move to flexbox, alignment of dismiss icons in the header is likely broken as we’re no longer using floats. Floated content comes first, but with flexbox that’s no longer the case. Update your dismiss icons to come after modal titles to fix.</li>
|
||||
<li>The <code class="highlighter-rouge">remote</code> option (which could be used to automatically load and inject external content into a modal) and the corresponding <code class="highlighter-rouge">loaded.bs.modal</code> event were removed. We recommend instead using client-side templating or a data binding framework, or calling <a href="https://api.jquery.com/load/">jQuery.load</a> yourself.</li>
|
||||
<li>The <code class="language-plaintext highlighter-rouge">remote</code> option (which could be used to automatically load and inject external content into a modal) and the corresponding <code class="language-plaintext highlighter-rouge">loaded.bs.modal</code> event were removed. We recommend instead using client-side templating or a data binding framework, or calling <a href="https://api.jquery.com/load/">jQuery.load</a> yourself.</li>
|
||||
</ul>
|
||||
|
||||
<h3 id="navs">Navs</h3>
|
||||
|
||||
<ul>
|
||||
<li>Rewrote component with flexbox.</li>
|
||||
<li>Dropped nearly all <code class="highlighter-rouge">></code> selectors for simpler styling via un-nested classes.</li>
|
||||
<li>Instead of HTML-specific selectors like <code class="highlighter-rouge">.nav > li > a</code>, we use separate classes for <code class="highlighter-rouge">.nav</code>s, <code class="highlighter-rouge">.nav-item</code>s, and <code class="highlighter-rouge">.nav-link</code>s. This makes your HTML more flexible while bringing along increased extensibility.</li>
|
||||
<li>Dropped nearly all <code class="language-plaintext highlighter-rouge">></code> selectors for simpler styling via un-nested classes.</li>
|
||||
<li>Instead of HTML-specific selectors like <code class="language-plaintext highlighter-rouge">.nav > li > a</code>, we use separate classes for <code class="language-plaintext highlighter-rouge">.nav</code>s, <code class="language-plaintext highlighter-rouge">.nav-item</code>s, and <code class="language-plaintext highlighter-rouge">.nav-link</code>s. This makes your HTML more flexible while bringing along increased extensibility.</li>
|
||||
</ul>
|
||||
|
||||
<h3 id="navbar">Navbar</h3>
|
||||
@@ -827,13 +831,13 @@
|
||||
<p>The navbar has been entirely rewritten in flexbox with improved support for alignment, responsiveness, and customization.</p>
|
||||
|
||||
<ul>
|
||||
<li>Responsive navbar behaviors are now applied to the <code class="highlighter-rouge">.navbar</code> class via the <strong>required</strong> <code class="highlighter-rouge">.navbar-expand-{breakpoint}</code> where you choose where to collapse the navbar. Previously this was a Less variable modification and required recompiling.</li>
|
||||
<li><code class="highlighter-rouge">.navbar-default</code> is now <code class="highlighter-rouge">.navbar-light</code>, though <code class="highlighter-rouge">.navbar-dark</code> remains the same. <strong>One of these is required on each navbar.</strong> However, these classes no longer set <code class="highlighter-rouge">background-color</code>s; instead they essentially only affect <code class="highlighter-rouge">color</code>.</li>
|
||||
<li>Navbars now require a background declaration of some kind. Choose from our background utilities (<code class="highlighter-rouge">.bg-*</code>) or set your own with the light/inverse classes above <a href="/docs/4.5/components/navbar/#color-schemes">for mad customization</a>.</li>
|
||||
<li>Responsive navbar behaviors are now applied to the <code class="language-plaintext highlighter-rouge">.navbar</code> class via the <strong>required</strong> <code class="language-plaintext highlighter-rouge">.navbar-expand-{breakpoint}</code> where you choose where to collapse the navbar. Previously this was a Less variable modification and required recompiling.</li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.navbar-default</code> is now <code class="language-plaintext highlighter-rouge">.navbar-light</code>, though <code class="language-plaintext highlighter-rouge">.navbar-dark</code> remains the same. <strong>One of these is required on each navbar.</strong> However, these classes no longer set <code class="language-plaintext highlighter-rouge">background-color</code>s; instead they essentially only affect <code class="language-plaintext highlighter-rouge">color</code>.</li>
|
||||
<li>Navbars now require a background declaration of some kind. Choose from our background utilities (<code class="language-plaintext highlighter-rouge">.bg-*</code>) or set your own with the light/inverse classes above <a href="/docs/4.5/components/navbar/#color-schemes">for mad customization</a>.</li>
|
||||
<li>Given flexbox styles, navbars can now use flexbox utilities for easy alignment options.</li>
|
||||
<li><code class="highlighter-rouge">.navbar-toggle</code> is now <code class="highlighter-rouge">.navbar-toggler</code> and has different styles and inner markup (no more three <code class="highlighter-rouge"><span></code>s).</li>
|
||||
<li>Dropped the <code class="highlighter-rouge">.navbar-form</code> class entirely. It’s no longer necessary; instead, just use <code class="highlighter-rouge">.form-inline</code> and apply margin utilities as necessary.</li>
|
||||
<li>Navbars no longer include <code class="highlighter-rouge">margin-bottom</code> or <code class="highlighter-rouge">border-radius</code> by default. Use utilities as necessary.</li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.navbar-toggle</code> is now <code class="language-plaintext highlighter-rouge">.navbar-toggler</code> and has different styles and inner markup (no more three <code class="language-plaintext highlighter-rouge"><span></code>s).</li>
|
||||
<li>Dropped the <code class="language-plaintext highlighter-rouge">.navbar-form</code> class entirely. It’s no longer necessary; instead, just use <code class="language-plaintext highlighter-rouge">.form-inline</code> and apply margin utilities as necessary.</li>
|
||||
<li>Navbars no longer include <code class="language-plaintext highlighter-rouge">margin-bottom</code> or <code class="language-plaintext highlighter-rouge">border-radius</code> by default. Use utilities as necessary.</li>
|
||||
<li>All examples featuring navbars have been updated to include new markup.</li>
|
||||
</ul>
|
||||
|
||||
@@ -841,23 +845,23 @@
|
||||
|
||||
<ul>
|
||||
<li>Rewrote component with flexbox.</li>
|
||||
<li>Explicit classes (<code class="highlighter-rouge">.page-item</code>, <code class="highlighter-rouge">.page-link</code>) are now required on the descendants of <code class="highlighter-rouge">.pagination</code>s</li>
|
||||
<li>Dropped the <code class="highlighter-rouge">.pager</code> component entirely as it was little more than customized outline buttons.</li>
|
||||
<li>Explicit classes (<code class="language-plaintext highlighter-rouge">.page-item</code>, <code class="language-plaintext highlighter-rouge">.page-link</code>) are now required on the descendants of <code class="language-plaintext highlighter-rouge">.pagination</code>s</li>
|
||||
<li>Dropped the <code class="language-plaintext highlighter-rouge">.pager</code> component entirely as it was little more than customized outline buttons.</li>
|
||||
</ul>
|
||||
|
||||
<h3 id="breadcrumbs">Breadcrumbs</h3>
|
||||
|
||||
<ul>
|
||||
<li>An explicit class, <code class="highlighter-rouge">.breadcrumb-item</code>, is now required on the descendants of <code class="highlighter-rouge">.breadcrumb</code>s</li>
|
||||
<li>An explicit class, <code class="language-plaintext highlighter-rouge">.breadcrumb-item</code>, is now required on the descendants of <code class="language-plaintext highlighter-rouge">.breadcrumb</code>s</li>
|
||||
</ul>
|
||||
|
||||
<h3 id="labels-and-badges">Labels and badges</h3>
|
||||
|
||||
<ul>
|
||||
<li>Consolidated <code class="highlighter-rouge">.label</code> and <code class="highlighter-rouge">.badge</code> to disambiguate from the <code class="highlighter-rouge"><label></code> element and simplify related components.</li>
|
||||
<li>Added <code class="highlighter-rouge">.badge-pill</code> as modifier for rounded “pill” look.</li>
|
||||
<li>Consolidated <code class="language-plaintext highlighter-rouge">.label</code> and <code class="language-plaintext highlighter-rouge">.badge</code> to disambiguate from the <code class="language-plaintext highlighter-rouge"><label></code> element and simplify related components.</li>
|
||||
<li>Added <code class="language-plaintext highlighter-rouge">.badge-pill</code> as modifier for rounded “pill” look.</li>
|
||||
<li>Badges are no longer floated automatically in list groups and other components. Utility classes are now required for that.</li>
|
||||
<li><code class="highlighter-rouge">.badge-default</code> has been dropped and <code class="highlighter-rouge">.badge-secondary</code> added to match component modifier classes used elsewhere.</li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.badge-default</code> has been dropped and <code class="language-plaintext highlighter-rouge">.badge-secondary</code> added to match component modifier classes used elsewhere.</li>
|
||||
</ul>
|
||||
|
||||
<h3 id="panels-thumbnails-and-wells">Panels, thumbnails, and wells</h3>
|
||||
@@ -867,32 +871,32 @@
|
||||
<h3 id="panels">Panels</h3>
|
||||
|
||||
<ul>
|
||||
<li><code class="highlighter-rouge">.panel</code> to <code class="highlighter-rouge">.card</code>, now built with flexbox.</li>
|
||||
<li><code class="highlighter-rouge">.panel-default</code> removed and no replacement.</li>
|
||||
<li><code class="highlighter-rouge">.panel-group</code> removed and no replacement. <code class="highlighter-rouge">.card-group</code> is not a replacement, it is different.</li>
|
||||
<li><code class="highlighter-rouge">.panel-heading</code> to <code class="highlighter-rouge">.card-header</code></li>
|
||||
<li><code class="highlighter-rouge">.panel-title</code> to <code class="highlighter-rouge">.card-title</code>. Depending on the desired look, you may also want to use <a href="/docs/4.5/content/typography/#headings">heading elements or classes</a> (e.g. <code class="highlighter-rouge"><h3></code>, <code class="highlighter-rouge">.h3</code>) or bold elements or classes (e.g. <code class="highlighter-rouge"><strong></code>, <code class="highlighter-rouge"><b></code>, <a href="/docs/4.5/utilities/text/#font-weight-and-italics"><code class="highlighter-rouge">.font-weight-bold</code></a>). Note that <code class="highlighter-rouge">.card-title</code>, while similarly named, produces a different look than <code class="highlighter-rouge">.panel-title</code>.</li>
|
||||
<li><code class="highlighter-rouge">.panel-body</code> to <code class="highlighter-rouge">.card-body</code></li>
|
||||
<li><code class="highlighter-rouge">.panel-footer</code> to <code class="highlighter-rouge">.card-footer</code></li>
|
||||
<li><code class="highlighter-rouge">.panel-primary</code>, <code class="highlighter-rouge">.panel-success</code>, <code class="highlighter-rouge">.panel-info</code>, <code class="highlighter-rouge">.panel-warning</code>, and <code class="highlighter-rouge">.panel-danger</code> have been dropped for <code class="highlighter-rouge">.bg-</code>, <code class="highlighter-rouge">.text-</code>, and <code class="highlighter-rouge">.border</code> utilities generated from our <code class="highlighter-rouge">$theme-colors</code> Sass map.</li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.panel</code> to <code class="language-plaintext highlighter-rouge">.card</code>, now built with flexbox.</li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.panel-default</code> removed and no replacement.</li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.panel-group</code> removed and no replacement. <code class="language-plaintext highlighter-rouge">.card-group</code> is not a replacement, it is different.</li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.panel-heading</code> to <code class="language-plaintext highlighter-rouge">.card-header</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.panel-title</code> to <code class="language-plaintext highlighter-rouge">.card-title</code>. Depending on the desired look, you may also want to use <a href="/docs/4.5/content/typography/#headings">heading elements or classes</a> (e.g. <code class="language-plaintext highlighter-rouge"><h3></code>, <code class="language-plaintext highlighter-rouge">.h3</code>) or bold elements or classes (e.g. <code class="language-plaintext highlighter-rouge"><strong></code>, <code class="language-plaintext highlighter-rouge"><b></code>, <a href="/docs/4.5/utilities/text/#font-weight-and-italics"><code class="language-plaintext highlighter-rouge">.font-weight-bold</code></a>). Note that <code class="language-plaintext highlighter-rouge">.card-title</code>, while similarly named, produces a different look than <code class="language-plaintext highlighter-rouge">.panel-title</code>.</li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.panel-body</code> to <code class="language-plaintext highlighter-rouge">.card-body</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.panel-footer</code> to <code class="language-plaintext highlighter-rouge">.card-footer</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.panel-primary</code>, <code class="language-plaintext highlighter-rouge">.panel-success</code>, <code class="language-plaintext highlighter-rouge">.panel-info</code>, <code class="language-plaintext highlighter-rouge">.panel-warning</code>, and <code class="language-plaintext highlighter-rouge">.panel-danger</code> have been dropped for <code class="language-plaintext highlighter-rouge">.bg-</code>, <code class="language-plaintext highlighter-rouge">.text-</code>, and <code class="language-plaintext highlighter-rouge">.border</code> utilities generated from our <code class="language-plaintext highlighter-rouge">$theme-colors</code> Sass map.</li>
|
||||
</ul>
|
||||
|
||||
<h3 id="progress">Progress</h3>
|
||||
|
||||
<ul>
|
||||
<li>Replaced contextual <code class="highlighter-rouge">.progress-bar-*</code> classes with <code class="highlighter-rouge">.bg-*</code> utilities. For example, <code class="highlighter-rouge">class="progress-bar progress-bar-danger"</code> becomes <code class="highlighter-rouge">class="progress-bar bg-danger"</code>.</li>
|
||||
<li>Replaced <code class="highlighter-rouge">.active</code> for animated progress bars with <code class="highlighter-rouge">.progress-bar-animated</code>.</li>
|
||||
<li>Replaced contextual <code class="language-plaintext highlighter-rouge">.progress-bar-*</code> classes with <code class="language-plaintext highlighter-rouge">.bg-*</code> utilities. For example, <code class="language-plaintext highlighter-rouge">class="progress-bar progress-bar-danger"</code> becomes <code class="language-plaintext highlighter-rouge">class="progress-bar bg-danger"</code>.</li>
|
||||
<li>Replaced <code class="language-plaintext highlighter-rouge">.active</code> for animated progress bars with <code class="language-plaintext highlighter-rouge">.progress-bar-animated</code>.</li>
|
||||
</ul>
|
||||
|
||||
<h3 id="carousel">Carousel</h3>
|
||||
|
||||
<ul>
|
||||
<li>Overhauled the entire component to simplify design and styling. We have fewer styles for you to override, new indicators, and new icons.</li>
|
||||
<li>All CSS has been un-nested and renamed, ensuring each class is prefixed with <code class="highlighter-rouge">.carousel-</code>.
|
||||
<li>All CSS has been un-nested and renamed, ensuring each class is prefixed with <code class="language-plaintext highlighter-rouge">.carousel-</code>.
|
||||
<ul>
|
||||
<li>For carousel items, <code class="highlighter-rouge">.next</code>, <code class="highlighter-rouge">.prev</code>, <code class="highlighter-rouge">.left</code>, and <code class="highlighter-rouge">.right</code> are now <code class="highlighter-rouge">.carousel-item-next</code>, <code class="highlighter-rouge">.carousel-item-prev</code>, <code class="highlighter-rouge">.carousel-item-left</code>, and <code class="highlighter-rouge">.carousel-item-right</code>.</li>
|
||||
<li><code class="highlighter-rouge">.item</code> is also now <code class="highlighter-rouge">.carousel-item</code>.</li>
|
||||
<li>For prev/next controls, <code class="highlighter-rouge">.carousel-control.right</code> and <code class="highlighter-rouge">.carousel-control.left</code> are now <code class="highlighter-rouge">.carousel-control-next</code> and <code class="highlighter-rouge">.carousel-control-prev</code>, meaning they no longer require a specific base class.</li>
|
||||
<li>For carousel items, <code class="language-plaintext highlighter-rouge">.next</code>, <code class="language-plaintext highlighter-rouge">.prev</code>, <code class="language-plaintext highlighter-rouge">.left</code>, and <code class="language-plaintext highlighter-rouge">.right</code> are now <code class="language-plaintext highlighter-rouge">.carousel-item-next</code>, <code class="language-plaintext highlighter-rouge">.carousel-item-prev</code>, <code class="language-plaintext highlighter-rouge">.carousel-item-left</code>, and <code class="language-plaintext highlighter-rouge">.carousel-item-right</code>.</li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.item</code> is also now <code class="language-plaintext highlighter-rouge">.carousel-item</code>.</li>
|
||||
<li>For prev/next controls, <code class="language-plaintext highlighter-rouge">.carousel-control.right</code> and <code class="language-plaintext highlighter-rouge">.carousel-control.left</code> are now <code class="language-plaintext highlighter-rouge">.carousel-control-next</code> and <code class="language-plaintext highlighter-rouge">.carousel-control-prev</code>, meaning they no longer require a specific base class.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Removed all responsive styling, deferring to utilities (e.g., showing captions on certain viewports) and custom styles as needed.</li>
|
||||
@@ -912,21 +916,21 @@
|
||||
<ul>
|
||||
<li><strong>Display, hidden, and more:</strong>
|
||||
<ul>
|
||||
<li>Made display utilities responsive (e.g., <code class="highlighter-rouge">.d-none</code> and <code class="highlighter-rouge">d-{sm,md,lg,xl}-none</code>).</li>
|
||||
<li>Dropped the bulk of <code class="highlighter-rouge">.hidden-*</code> utilities for new <a href="/docs/4.5/utilities/display/">display utilities</a>. For example, instead of <code class="highlighter-rouge">.hidden-sm-up</code>, use <code class="highlighter-rouge">.d-sm-none</code>. Renamed the <code class="highlighter-rouge">.hidden-print</code> utilities to use the display utility naming scheme. More info under the <a href="#responsive-utilities">Responsive utilities</a> section of this page.</li>
|
||||
<li>Added <code class="highlighter-rouge">.float-{sm,md,lg,xl}-{left,right,none}</code> classes for responsive floats and removed <code class="highlighter-rouge">.pull-left</code> and <code class="highlighter-rouge">.pull-right</code> since they’re redundant to <code class="highlighter-rouge">.float-left</code> and <code class="highlighter-rouge">.float-right</code>.</li>
|
||||
<li>Made display utilities responsive (e.g., <code class="language-plaintext highlighter-rouge">.d-none</code> and <code class="language-plaintext highlighter-rouge">d-{sm,md,lg,xl}-none</code>).</li>
|
||||
<li>Dropped the bulk of <code class="language-plaintext highlighter-rouge">.hidden-*</code> utilities for new <a href="/docs/4.5/utilities/display/">display utilities</a>. For example, instead of <code class="language-plaintext highlighter-rouge">.hidden-sm-up</code>, use <code class="language-plaintext highlighter-rouge">.d-sm-none</code>. Renamed the <code class="language-plaintext highlighter-rouge">.hidden-print</code> utilities to use the display utility naming scheme. More info under the <a href="#responsive-utilities">Responsive utilities</a> section of this page.</li>
|
||||
<li>Added <code class="language-plaintext highlighter-rouge">.float-{sm,md,lg,xl}-{left,right,none}</code> classes for responsive floats and removed <code class="language-plaintext highlighter-rouge">.pull-left</code> and <code class="language-plaintext highlighter-rouge">.pull-right</code> since they’re redundant to <code class="language-plaintext highlighter-rouge">.float-left</code> and <code class="language-plaintext highlighter-rouge">.float-right</code>.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><strong>Type:</strong>
|
||||
<ul>
|
||||
<li>Added responsive variations to our text alignment classes <code class="highlighter-rouge">.text-{sm,md,lg,xl}-{left,center,right}</code>.</li>
|
||||
<li>Added responsive variations to our text alignment classes <code class="language-plaintext highlighter-rouge">.text-{sm,md,lg,xl}-{left,center,right}</code>.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><strong>Alignment and spacing:</strong>
|
||||
<ul>
|
||||
<li>Added new <a href="/docs/4.5/utilities/spacing/">responsive margin and padding utilities</a> for all sides, plus vertical and horizontal shorthands.</li>
|
||||
<li>Added boatload of <a href="/docs/4.5/utilities/flex/">flexbox utilities</a>.</li>
|
||||
<li>Dropped <code class="highlighter-rouge">.center-block</code> for the new <code class="highlighter-rouge">.mx-auto</code> class.</li>
|
||||
<li>Dropped <code class="language-plaintext highlighter-rouge">.center-block</code> for the new <code class="language-plaintext highlighter-rouge">.mx-auto</code> class.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Clearfix updated to drop support for older browser versions.</li>
|
||||
@@ -936,7 +940,7 @@
|
||||
|
||||
<p>Bootstrap 3’s <a href="https://www.lifewire.com/css-vendor-prefixes-3466867">vendor prefix</a> mixins, which were deprecated in v3.2.0, have been removed in Bootstrap 4. Since we use <a href="https://github.com/postcss/autoprefixer">Autoprefixer</a>, they’re no longer necessary.</p>
|
||||
|
||||
<p>Removed the following mixins: <code class="highlighter-rouge">animation</code>, <code class="highlighter-rouge">animation-delay</code>, <code class="highlighter-rouge">animation-direction</code>, <code class="highlighter-rouge">animation-duration</code>, <code class="highlighter-rouge">animation-fill-mode</code>, <code class="highlighter-rouge">animation-iteration-count</code>, <code class="highlighter-rouge">animation-name</code>, <code class="highlighter-rouge">animation-timing-function</code>, <code class="highlighter-rouge">backface-visibility</code>, <code class="highlighter-rouge">box-sizing</code>, <code class="highlighter-rouge">content-columns</code>, <code class="highlighter-rouge">hyphens</code>, <code class="highlighter-rouge">opacity</code>, <code class="highlighter-rouge">perspective</code>, <code class="highlighter-rouge">perspective-origin</code>, <code class="highlighter-rouge">rotate</code>, <code class="highlighter-rouge">rotateX</code>, <code class="highlighter-rouge">rotateY</code>, <code class="highlighter-rouge">scale</code>, <code class="highlighter-rouge">scaleX</code>, <code class="highlighter-rouge">scaleY</code>, <code class="highlighter-rouge">skew</code>, <code class="highlighter-rouge">transform-origin</code>, <code class="highlighter-rouge">transition-delay</code>, <code class="highlighter-rouge">transition-duration</code>, <code class="highlighter-rouge">transition-property</code>, <code class="highlighter-rouge">transition-timing-function</code>, <code class="highlighter-rouge">transition-transform</code>, <code class="highlighter-rouge">translate</code>, <code class="highlighter-rouge">translate3d</code>, <code class="highlighter-rouge">user-select</code></p>
|
||||
<p>Removed the following mixins: <code class="language-plaintext highlighter-rouge">animation</code>, <code class="language-plaintext highlighter-rouge">animation-delay</code>, <code class="language-plaintext highlighter-rouge">animation-direction</code>, <code class="language-plaintext highlighter-rouge">animation-duration</code>, <code class="language-plaintext highlighter-rouge">animation-fill-mode</code>, <code class="language-plaintext highlighter-rouge">animation-iteration-count</code>, <code class="language-plaintext highlighter-rouge">animation-name</code>, <code class="language-plaintext highlighter-rouge">animation-timing-function</code>, <code class="language-plaintext highlighter-rouge">backface-visibility</code>, <code class="language-plaintext highlighter-rouge">box-sizing</code>, <code class="language-plaintext highlighter-rouge">content-columns</code>, <code class="language-plaintext highlighter-rouge">hyphens</code>, <code class="language-plaintext highlighter-rouge">opacity</code>, <code class="language-plaintext highlighter-rouge">perspective</code>, <code class="language-plaintext highlighter-rouge">perspective-origin</code>, <code class="language-plaintext highlighter-rouge">rotate</code>, <code class="language-plaintext highlighter-rouge">rotateX</code>, <code class="language-plaintext highlighter-rouge">rotateY</code>, <code class="language-plaintext highlighter-rouge">scale</code>, <code class="language-plaintext highlighter-rouge">scaleX</code>, <code class="language-plaintext highlighter-rouge">scaleY</code>, <code class="language-plaintext highlighter-rouge">skew</code>, <code class="language-plaintext highlighter-rouge">transform-origin</code>, <code class="language-plaintext highlighter-rouge">transition-delay</code>, <code class="language-plaintext highlighter-rouge">transition-duration</code>, <code class="language-plaintext highlighter-rouge">transition-property</code>, <code class="language-plaintext highlighter-rouge">transition-timing-function</code>, <code class="language-plaintext highlighter-rouge">transition-transform</code>, <code class="language-plaintext highlighter-rouge">translate</code>, <code class="language-plaintext highlighter-rouge">translate3d</code>, <code class="language-plaintext highlighter-rouge">user-select</code></p>
|
||||
|
||||
<h2 id="documentation">Documentation</h2>
|
||||
|
||||
@@ -945,9 +949,9 @@
|
||||
<ul>
|
||||
<li>We’re still using Jekyll, but we have plugins in the mix:
|
||||
<ul>
|
||||
<li><code class="highlighter-rouge">bugify.rb</code> is used to efficiently list out the entries on our <a href="/docs/4.5/browser-bugs/">browser bugs</a> page.</li>
|
||||
<li><code class="highlighter-rouge">example.rb</code> is a custom fork of the default <code class="highlighter-rouge">highlight.rb</code> plugin, allowing for easier example-code handling.</li>
|
||||
<li><code class="highlighter-rouge">callout.rb</code> is a similar custom fork of that, but designed for our special docs callouts.</li>
|
||||
<li><code class="language-plaintext highlighter-rouge">bugify.rb</code> is used to efficiently list out the entries on our <a href="/docs/4.5/browser-bugs/">browser bugs</a> page.</li>
|
||||
<li><code class="language-plaintext highlighter-rouge">example.rb</code> is a custom fork of the default <code class="language-plaintext highlighter-rouge">highlight.rb</code> plugin, allowing for easier example-code handling.</li>
|
||||
<li><code class="language-plaintext highlighter-rouge">callout.rb</code> is a similar custom fork of that, but designed for our special docs callouts.</li>
|
||||
<li><a href="https://github.com/toshimaru/jekyll-toc">jekyll-toc</a> is used to generate our table of contents.</li>
|
||||
</ul>
|
||||
</li>
|
||||
@@ -958,27 +962,27 @@
|
||||
|
||||
<h3 id="responsive-utilities">Responsive utilities</h3>
|
||||
|
||||
<p>All <code class="highlighter-rouge">@screen-</code> variables have been removed in v4.0.0. Use the <code class="highlighter-rouge">media-breakpoint-up()</code>, <code class="highlighter-rouge">media-breakpoint-down()</code>, or <code class="highlighter-rouge">media-breakpoint-only()</code> Sass mixins or the <code class="highlighter-rouge">$grid-breakpoints</code> Sass map instead.</p>
|
||||
<p>All <code class="language-plaintext highlighter-rouge">@screen-</code> variables have been removed in v4.0.0. Use the <code class="language-plaintext highlighter-rouge">media-breakpoint-up()</code>, <code class="language-plaintext highlighter-rouge">media-breakpoint-down()</code>, or <code class="language-plaintext highlighter-rouge">media-breakpoint-only()</code> Sass mixins or the <code class="language-plaintext highlighter-rouge">$grid-breakpoints</code> Sass map instead.</p>
|
||||
|
||||
<p>Our responsive utility classes have largely been removed in favor of explicit <code class="highlighter-rouge">display</code> utilities.</p>
|
||||
<p>Our responsive utility classes have largely been removed in favor of explicit <code class="language-plaintext highlighter-rouge">display</code> utilities.</p>
|
||||
|
||||
<ul>
|
||||
<li>The <code class="highlighter-rouge">.hidden</code> and <code class="highlighter-rouge">.show</code> classes have been removed because they conflicted with jQuery’s <code class="highlighter-rouge">$(...).hide()</code> and <code class="highlighter-rouge">$(...).show()</code> methods. Instead, try toggling the <code class="highlighter-rouge">[hidden]</code> attribute or use inline styles like <code class="highlighter-rouge">style="display: none;"</code> and <code class="highlighter-rouge">style="display: block;"</code>.</li>
|
||||
<li>All <code class="highlighter-rouge">.hidden-</code> classes have been removed, save for the print utilities which have been renamed.
|
||||
<li>The <code class="language-plaintext highlighter-rouge">.hidden</code> and <code class="language-plaintext highlighter-rouge">.show</code> classes have been removed because they conflicted with jQuery’s <code class="language-plaintext highlighter-rouge">$(...).hide()</code> and <code class="language-plaintext highlighter-rouge">$(...).show()</code> methods. Instead, try toggling the <code class="language-plaintext highlighter-rouge">[hidden]</code> attribute or use inline styles like <code class="language-plaintext highlighter-rouge">style="display: none;"</code> and <code class="language-plaintext highlighter-rouge">style="display: block;"</code>.</li>
|
||||
<li>All <code class="language-plaintext highlighter-rouge">.hidden-</code> classes have been removed, save for the print utilities which have been renamed.
|
||||
<ul>
|
||||
<li>Removed from v3: <code class="highlighter-rouge">.hidden-xs</code> <code class="highlighter-rouge">.hidden-sm</code> <code class="highlighter-rouge">.hidden-md</code> <code class="highlighter-rouge">.hidden-lg</code> <code class="highlighter-rouge">.visible-xs-block</code> <code class="highlighter-rouge">.visible-xs-inline</code> <code class="highlighter-rouge">.visible-xs-inline-block</code> <code class="highlighter-rouge">.visible-sm-block</code> <code class="highlighter-rouge">.visible-sm-inline</code> <code class="highlighter-rouge">.visible-sm-inline-block</code> <code class="highlighter-rouge">.visible-md-block</code> <code class="highlighter-rouge">.visible-md-inline</code> <code class="highlighter-rouge">.visible-md-inline-block</code> <code class="highlighter-rouge">.visible-lg-block</code> <code class="highlighter-rouge">.visible-lg-inline</code> <code class="highlighter-rouge">.visible-lg-inline-block</code></li>
|
||||
<li>Removed from v4 alphas: <code class="highlighter-rouge">.hidden-xs-up</code> <code class="highlighter-rouge">.hidden-xs-down</code> <code class="highlighter-rouge">.hidden-sm-up</code> <code class="highlighter-rouge">.hidden-sm-down</code> <code class="highlighter-rouge">.hidden-md-up</code> <code class="highlighter-rouge">.hidden-md-down</code> <code class="highlighter-rouge">.hidden-lg-up</code> <code class="highlighter-rouge">.hidden-lg-down</code></li>
|
||||
<li>Removed from v3: <code class="language-plaintext highlighter-rouge">.hidden-xs</code> <code class="language-plaintext highlighter-rouge">.hidden-sm</code> <code class="language-plaintext highlighter-rouge">.hidden-md</code> <code class="language-plaintext highlighter-rouge">.hidden-lg</code> <code class="language-plaintext highlighter-rouge">.visible-xs-block</code> <code class="language-plaintext highlighter-rouge">.visible-xs-inline</code> <code class="language-plaintext highlighter-rouge">.visible-xs-inline-block</code> <code class="language-plaintext highlighter-rouge">.visible-sm-block</code> <code class="language-plaintext highlighter-rouge">.visible-sm-inline</code> <code class="language-plaintext highlighter-rouge">.visible-sm-inline-block</code> <code class="language-plaintext highlighter-rouge">.visible-md-block</code> <code class="language-plaintext highlighter-rouge">.visible-md-inline</code> <code class="language-plaintext highlighter-rouge">.visible-md-inline-block</code> <code class="language-plaintext highlighter-rouge">.visible-lg-block</code> <code class="language-plaintext highlighter-rouge">.visible-lg-inline</code> <code class="language-plaintext highlighter-rouge">.visible-lg-inline-block</code></li>
|
||||
<li>Removed from v4 alphas: <code class="language-plaintext highlighter-rouge">.hidden-xs-up</code> <code class="language-plaintext highlighter-rouge">.hidden-xs-down</code> <code class="language-plaintext highlighter-rouge">.hidden-sm-up</code> <code class="language-plaintext highlighter-rouge">.hidden-sm-down</code> <code class="language-plaintext highlighter-rouge">.hidden-md-up</code> <code class="language-plaintext highlighter-rouge">.hidden-md-down</code> <code class="language-plaintext highlighter-rouge">.hidden-lg-up</code> <code class="language-plaintext highlighter-rouge">.hidden-lg-down</code></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Print utilities no longer start with <code class="highlighter-rouge">.hidden-</code> or <code class="highlighter-rouge">.visible-</code>, but with <code class="highlighter-rouge">.d-print-</code>.
|
||||
<li>Print utilities no longer start with <code class="language-plaintext highlighter-rouge">.hidden-</code> or <code class="language-plaintext highlighter-rouge">.visible-</code>, but with <code class="language-plaintext highlighter-rouge">.d-print-</code>.
|
||||
<ul>
|
||||
<li>Old names: <code class="highlighter-rouge">.visible-print-block</code>, <code class="highlighter-rouge">.visible-print-inline</code>, <code class="highlighter-rouge">.visible-print-inline-block</code>, <code class="highlighter-rouge">.hidden-print</code></li>
|
||||
<li>New classes: <code class="highlighter-rouge">.d-print-block</code>, <code class="highlighter-rouge">.d-print-inline</code>, <code class="highlighter-rouge">.d-print-inline-block</code>, <code class="highlighter-rouge">.d-print-none</code></li>
|
||||
<li>Old names: <code class="language-plaintext highlighter-rouge">.visible-print-block</code>, <code class="language-plaintext highlighter-rouge">.visible-print-inline</code>, <code class="language-plaintext highlighter-rouge">.visible-print-inline-block</code>, <code class="language-plaintext highlighter-rouge">.hidden-print</code></li>
|
||||
<li>New classes: <code class="language-plaintext highlighter-rouge">.d-print-block</code>, <code class="language-plaintext highlighter-rouge">.d-print-inline</code>, <code class="language-plaintext highlighter-rouge">.d-print-inline-block</code>, <code class="language-plaintext highlighter-rouge">.d-print-none</code></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>Rather than using explicit <code class="highlighter-rouge">.visible-*</code> classes, you make an element visible by simply not hiding it at that screen size. You can combine one <code class="highlighter-rouge">.d-*-none</code> class with one <code class="highlighter-rouge">.d-*-block</code> class to show an element only on a given interval of screen sizes (e.g. <code class="highlighter-rouge">.d-none.d-md-block.d-xl-none</code> shows the element only on medium and large devices).</p>
|
||||
<p>Rather than using explicit <code class="language-plaintext highlighter-rouge">.visible-*</code> classes, you make an element visible by simply not hiding it at that screen size. You can combine one <code class="language-plaintext highlighter-rouge">.d-*-none</code> class with one <code class="language-plaintext highlighter-rouge">.d-*-block</code> class to show an element only on a given interval of screen sizes (e.g. <code class="language-plaintext highlighter-rouge">.d-none.d-md-block.d-xl-none</code> shows the element only on medium and large devices).</p>
|
||||
|
||||
<p>Note that the changes to the grid breakpoints in v4 means that you’ll need to go one breakpoint larger to achieve the same results. The new responsive utility classes don’t attempt to accommodate less common cases where an element’s visibility can’t be expressed as a single contiguous range of viewport sizes; you will instead need to use custom CSS in such cases.</p>
|
||||
|
||||
@@ -987,6 +991,6 @@
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-1CmrxMRARb6aLqgBO7yyAxTOQE2AKb9GfXnEo760AUcUmFx3ibVJJAzGytlQcNXd" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-FxkQtQ8fW6C3xA7BoW8ocAb2N7U9dCA7ZJXMJlz/37PL6Q6PUGQ5ZeJcaXdYKcdJ" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user