smart-webcomponents
Version:
Web Components & Custom Elements for Professional Web Applications
51 lines (45 loc) • 2.59 kB
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Material Bootstrap Utilities Display | https://www.htmlelements.com</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<link rel="stylesheet" type="text/css" href="../../styles/demos.css" />
<link rel="stylesheet" type="text/css" href="../../styles/common.css" />
<script type="text/javascript" src="../../scripts/common.js"></script>
<link rel="stylesheet" type="text/css" href="../source/styles/smart.bootstrap.css" />
<link rel="stylesheet" type="text/css" href="styles.css" />
<script type="text/javascript" src="../source/smart.element.js"></script>
<script type="text/javascript" src="../source/smart.bootstrap.js"></script>
<script src="index.js"></script>
</head>
<body class="smart material viewport">
<h2 id="buttons">Material Bootstrap Utilities Display</h2><br />
<p>CSS for Display and Visibility</p>
Display utility classes that apply to all breakpoints, from xs to xl, have no breakpoint abbreviation in them. This is because those classes are applied from min-width: 0; and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.
As such, the classes are named using the format:
<div class="group">
<ul>
<li>.d-{value} for xs.</li>
<li>.d-{breakpoint}-{value} for sm, md, lg, and xl.</li>
</ul>
</div>
<div class="group">
<ul>
<li><code class="highlighter-rouge">none</code></li>
<li><code class="highlighter-rouge">inline</code></li>
<li><code class="highlighter-rouge">inline-block</code></li>
<li><code class="highlighter-rouge">block</code></li>
<li><code class="highlighter-rouge">table</code></li>
<li><code class="highlighter-rouge">table-cell</code></li>
<li><code class="highlighter-rouge">table-row</code></li>
<li><code class="highlighter-rouge">flex</code></li>
<li><code class="highlighter-rouge">inline-flex</code></li>
</ul>
</div>
<div>Set the visibility of elements with our visibility utilities. These utility classes do not modify the display value at all and do not affect layout – .invisible elements still take up space in the page. Content will be hidden both visually and for assistive technology/screen reader users.
</div>
Apply <em>.visible</em> or <em>.invisible</em> as needed.
</body>
</html>