4.0.0 stable

docs/4.0/utilities/display/index.html

@@ -5,13 +5,13 @@
 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 <meta name="description" content="Quickly and responsively toggle the display value of components and more with our display utilities. Includes support for some of the more common values, as well as some extras for controlling display when printing.">
 <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
-<meta name="generator" content="Jekyll v3.6.2">
+<meta name="generator" content="Jekyll v3.7.0">
 
 <title>Display property · Bootstrap</title>
 
 <!-- Bootstrap core CSS -->
 
-<link href="/dist/css/bootstrap.min.css" rel="stylesheet">
+<link href="/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
 
 
 <!-- Documentation extras -->
@@ -125,7 +125,7 @@
     </li>
   </ul>
 
-  <a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.3.zip">Download</a>
+  <a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0.zip">Download</a>
 </header>
 
 
@@ -337,11 +337,14 @@
               Visibility
             </a></li></ul>
     </div><div class="bd-toc-item">
-      <a class="bd-toc-link" href="/docs/4.0/extend/icons/">
+      <a class="bd-toc-link" href="/docs/4.0/extend/approach/">
         Extend
       </a>
 
       <ul class="nav bd-sidenav"><li>
+            <a href="/docs/4.0/extend/approach/">
+              Approach
+            </a></li><li>
             <a href="/docs/4.0/extend/icons/">
               Icons
             </a></li></ul>
@@ -379,7 +382,7 @@
 <li class="toc-entry toc-h2"><a href="#how-it-works">How it works</a></li>
 <li class="toc-entry toc-h2"><a href="#notation">Notation</a></li>
 <li class="toc-entry toc-h2"><a href="#examples">Examples</a></li>
-<li class="toc-entry toc-h2"><a href="#hiding-elements">Hiding Elements</a></li>
+<li class="toc-entry toc-h2"><a href="#hiding-elements">Hiding elements</a></li>
 <li class="toc-entry toc-h2"><a href="#display-in-print">Display in print</a></li>
 </ul>
           </div>
@@ -405,7 +408,7 @@
   <li><code class="highlighter-rouge">.d-{breakpoint}-{value}</code> for <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>
 </ul>
 
-<p>Where <em>display</em> is one of:</p>
+<p>Where <em>value</em> is one of:</p>
 
 <ul>
   <li><code class="highlighter-rouge">none</code></li>
@@ -437,7 +440,7 @@
 <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"d-block p-2 bg-primary text-white"</span><span class="nt">&gt;</span>d-block<span class="nt">&lt;/span&gt;</span>
 <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"d-block p-2 bg-dark text-white"</span><span class="nt">&gt;</span>d-block<span class="nt">&lt;/span&gt;</span></code></pre></div>
 
-<h2 id="hiding-elements">Hiding Elements</h2>
+<h2 id="hiding-elements">Hiding elements</h2>
 
 <p>For faster mobile-friendly development, use responsive display classes for showing and hiding elements by device. Avoid creating entirely different versions of the same site, instead hide element responsively for each screen size.</p>
 
@@ -513,34 +516,19 @@
 
 <h2 id="display-in-print">Display in print</h2>
 
-<p>Change the <code class="highlighter-rouge">display</code> value of elements when printing with our print display utility classes.</p>
+<p>Change the <code class="highlighter-rouge">display</code> value of elements when printing with our print display utility classes. Includes support for the same <code class="highlighter-rouge">display</code> values as our responsive <code class="highlighter-rouge">.d-*</code> utilities.</p>
 
-<table>
-  <thead>
-    <tr>
-      <th>Class</th>
-      <th>Print style</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td><code class="highlighter-rouge">.d-print-block</code></td>
-      <td>Applies <code class="highlighter-rouge">display: block;</code> to the element when printing</td>
-    </tr>
-    <tr>
-      <td><code class="highlighter-rouge">.d-print-inline</code></td>
-      <td>Applies <code class="highlighter-rouge">display: inline;</code> to the element when printing</td>
-    </tr>
-    <tr>
-      <td><code class="highlighter-rouge">.d-print-inline-block</code></td>
-      <td>Applies <code class="highlighter-rouge">display: inline-block;</code> to the element when printing</td>
-    </tr>
-    <tr>
-      <td><code class="highlighter-rouge">.d-print-none</code></td>
-      <td>Applies <code class="highlighter-rouge">display: none;</code> to the element when printing</td>
-    </tr>
-  </tbody>
-</table>
+<ul>
+  <li><code class="highlighter-rouge">.d-print-none</code></li>
+  <li><code class="highlighter-rouge">.d-print-inline</code></li>
+  <li><code class="highlighter-rouge">.d-print-inline-block</code></li>
+  <li><code class="highlighter-rouge">.d-print-block</code></li>
+  <li><code class="highlighter-rouge">.d-print-table</code></li>
+  <li><code class="highlighter-rouge">.d-print-table-row</code></li>
+  <li><code class="highlighter-rouge">.d-print-table-cell</code></li>
+  <li><code class="highlighter-rouge">.d-print-flex</code></li>
+  <li><code class="highlighter-rouge">.d-print-inline-flex</code></li>
+</ul>
 
 <p>The print and display classes can be combined.</p>
 
@@ -561,34 +549,6 @@
     <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
 <script>window.jQuery || document.write('<script src="/assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
 
-<script src="/assets/js/vendor/popper.min.js"></script><script src="/dist/js/bootstrap.min.js"></script><script src="/assets/js/docs.min.js"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
-<script>
-  docsearch({
-    apiKey: '48cb48b22351bc71ea5f12f4d1ede198',
-    indexName: 'bootstrap-v4',
-    inputSelector: '#search-input',
-    handleSelected: function (input, event, suggestion) {
-      var url = suggestion.url;
-      url = suggestion.isLvl1 ? url.split('#')[0]: url;
-      // If it's a title we remove the anchor so it does not jump.
-      window.location.href = url;
-    },
-    transformData: function (hits) {
-      return hits.map(function (hit) {
-        hit.url = hit.url.replace('https://v4-alpha.getbootstrap.com', '/docs/4.0');
-        return hit;
-      });
-    },
-    debug: false // Set debug to true if you want to inspect the dropdown
-  });
-</script><script>
-  Holder.addTheme('gray', {
-    bg: '#777',
-    fg: 'rgba(255,255,255,.75)',
-    font: 'Helvetica',
-    fontweight: 'normal'
-  });
-</script>
-
+<script src="/assets/js/vendor/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script><script src="/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/assets/js/docs.min.js"></script>
   </body>
 </html>