Material based Bootstrap Web Components
Introduction
Material based Bootstrap Web Components built with the Smart Framework.Installation & Usage
Include Smart source CSS and JavaScript files via npm.
npm install @smarthtmlelemnets/smart-bootstrap
CSS
Copy-paste the stylesheet into your before all other npm stylesheets to load our CSS.<link rel="stylesheet" href="src/styles/smart.bootstrap.css">or
import 'src/styles/smart.bootstrap.css';
Javascript
<script src="src/smart.element.js"></script> <script src="src/smart.bootstrap.js"></script>
or
import 'src/smart.element.js' import 'src/smart.bootstrap.js'
Examples
Browse examples: https://www.htmlelements.com/bootstrap/.Border
Source code
<h2>Additive</h2> <div class="group"> <span class="border"></span> <span class="border-top"></span> <span class="border-right"></span> <span class="border-bottom"></span> <span class="border-left"></span> </div> <h2>Substractive</h2> <div class="group"> <span class="border-0"></span> <span class="border-top-0"></span> <span class="border-right-0"></span> <span class="border-bottom-0"></span> <span class="border-left-0"></span> </div> <h2>Border color</h2> <div>Change the border color using utilities built on our theme colors.</div> <div class="group"> <span class="border border-primary"></span> <span class="border border-secondary"></span> <span class="border border-success"></span> <span class="border border-danger"></span> <span class="border border-warning"></span> <span class="border border-info"></span> <span class="border border-light"></span> <span class="border border-dark"></span> <span class="border border-white"></span> </div> <h2>Border radius</h2> <div>Add classes to an element to easily round its corners.</div> <div class="group"> <span class="border rounded"></span> <span class="border rounded-top"></span> <span class="border rounded-right"></span> <span class="border rounded-bottom"></span> <span class="border rounded-left"></span> <span class="border rounded-circle"></span> <span class="border rounded-pill"></span> <span class="border rounded-0"></span> </div> <h2>Sizes</h2> <div>Use .rounded-lg or .rounded-sm for larger or smaller border-radius</div> <span class="border rounded-sm"></span> <span class="border rounded-lg"></span>
Close
Source code
<button type="button" class="close" aria-label="Close"> <span aria-hidden="true">×</span> </button>
Colors
Source code
<h2>Color</h2> <div class="group"> <p class="text-primary">.text-primary</p> <p class="text-secondary">.text-secondary</p> <p class="text-success">.text-success</p> <p class="text-danger">.text-danger</p> <p class="text-warning">.text-warning</p> <p class="text-info">.text-info</p> <p class="text-light bg-dark">.text-light</p> <p class="text-dark">.text-dark</p> <p class="text-body">.text-body</p> <p class="text-muted">.text-muted</p> <p class="text-white bg-dark">.text-white</p> <p class="text-black-50">.text-black-50</p> <p class="text-white-50 bg-dark">.text-white-50</p> </div> <p>Contextual text classes also work well on anchors with the provided hover and focus states. Note that the .text-white and .text-muted class has no additional link styling beyond underline.</p> <div class="group"> <p><a href="#" class="text-primary">Primary link</a></p> <p><a href="#" class="text-secondary">Secondary link</a></p> <p><a href="#" class="text-success">Success link</a></p> <p><a href="#" class="text-danger">Danger link</a></p> <p><a href="#" class="text-warning">Warning link</a></p> <p><a href="#" class="text-info">Info link</a></p> <p><a href="#" class="text-light bg-dark">Light link</a></p> <p><a href="#" class="text-dark">Dark link</a></p> <p><a href="#" class="text-muted">Muted link</a></p> <p><a href="#" class="text-white bg-dark">White link</a></p> </div> <h2>Background color</h2> <p>Similar to the contextual text color classes, easily set the background of an element to any contextual class. Anchor components will darken on hover, just like the text classes. Background utilities do not set color, so in some cases you’ll want to use .text-* utilities.</p> <div class="p-3 mb-2 bg-primary text-white">.bg-primary</div> <div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div> <div class="p-3 mb-2 bg-success text-white">.bg-success</div> <div class="p-3 mb-2 bg-danger text-white">.bg-danger</div> <div class="p-3 mb-2 bg-warning text-dark">.bg-warning</div> <div class="p-3 mb-2 bg-info text-white">.bg-info</div> <div class="p-3 mb-2 bg-light text-dark">.bg-light</div> <div class="p-3 mb-2 bg-dark text-white">.bg-dark</div> <div class="p-3 mb-2 bg-white text-dark">.bg-white</div> <div class="p-3 mb-2 bg-transparent text-dark">.bg-transparent</div>
Display
Source code
<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>
Flex
Source code
<h2>Enable flex behaviors</h2> <div class="group"> <div class="d-flex p-2 highlight">I'm a flexbox container!</div> <div class="d-inline-flex p-2 bd-highlight">I'm an inline flexbox container!</div> </div> <h2>Direction</h2> <p>Set the direction of flex items in a flex container with direction utilities. In most cases you can omit the horizontal class here as the browser default is row. However, you may encounter situations where you needed to explicitly set this value (like responsive layouts). </p> <div>Use .flex-row to set a horizontal direction (the browser default), or .flex-row-reverse to start the horizontal direction from the opposite side.</div> <div class="d-flex flex-row highlight mb-3"> <div class="p-2 highlight">Flex item 1</div> <div class="p-2 highlight">Flex item 2</div> <div class="p-2 highlight">Flex item 3</div> </div> <div class="d-flex flex-row-reverse highlight"> <div class="p-2 highlight">Flex item 1</div> <div class="p-2 highlight">Flex item 2</div> <div class="p-2 highlight">Flex item 3</div> </div> <div>Use .flex-column to set a vertical direction, or .flex-column-reverse to start the vertical direction from the opposite side.</div> <div class="d-flex flex-column highlight mb-3"> <div class="p-2 highlight">Flex item 1</div> <div class="p-2 highlight">Flex item 2</div> <div class="p-2 highlight">Flex item 3</div> </div> <div class="d-flex flex-column-reverse highlight"> <div class="p-2 highlight">Flex item 1</div> <div class="p-2 highlight">Flex item 2</div> <div class="p-2 highlight">Flex item 3</div> </div> <h2>Justify Content</h2> <div>Use justify-content utilities on flexbox containers to change the alignment of flex items on the main axis (the x-axis to start, y-axis if flex-direction: column). Choose from start (browser default), end, center, between, or around.</div> <div class="example"> <div class="d-flex justify-content-start highlight mb-3"> <div class="p-2 highlight">Flex item</div> <div class="p-2 highlight">Flex item</div> <div class="p-2 highlight">Flex item</div> </div> <div class="d-flex justify-content-end highlight mb-3"> <div class="p-2 highlight">Flex item</div> <div class="p-2 highlight">Flex item</div> <div class="p-2 highlight">Flex item</div> </div> <div class="d-flex justify-content-center highlight mb-3"> <div class="p-2 highlight">Flex item</div> <div class="p-2 highlight">Flex item</div> <div class="p-2 highlight">Flex item</div> </div> <div class="d-flex justify-content-between highlight mb-3"> <div class="p-2 highlight">Flex item</div> <div class="p-2 highlight">Flex item</div> <div class="p-2 highlight">Flex item</div> </div> <div class="d-flex justify-content-around highlight"> <div class="p-2 highlight">Flex item</div> <div class="p-2 highlight">Flex item</div> <div class="p-2 highlight">Flex item</div> </div> <h2>Align items</h2> <div>Use align-items utilities on flexbox containers to change the alignment of flex items on the cross axis (the y-axis to start, x-axis if flex-direction: column). Choose from start, end, center, baseline, or stretch (browser default).</div> <div class="d-flex align-items-start highlight mb-3" style="height: 100px"> <div class="p-2 highlight">Flex item</div> <div class="p-2 highlight">Flex item</div> <div class="p-2 highlight">Flex item</div> </div> <div class="d-flex align-items-end highlight mb-3" style="height: 100px"> <div class="p-2 highlight">Flex item</div> <div class="p-2 highlight">Flex item</div> <div class="p-2 highlight">Flex item</div> </div> <div class="d-flex align-items-center highlight mb-3" style="height: 100px"> <div class="p-2 highlight">Flex item</div> <div class="p-2 highlight">Flex item</div> <div class="p-2 highlight">Flex item</div> </div> <div class="d-flex align-items-baseline highlight mb-3" style="height: 100px"> <div class="p-2 highlight">Flex item</div> <div class="p-2 highlight">Flex item</div> <div class="p-2 highlight">Flex item</div> </div> <h2>Align self</h2> <div class="example"> <div class="d-flex highlight mb-3" style="height: 100px"> <div class="p-2 highlight">Flex item</div> <div class="align-self-start p-2 highlight">Aligned flex item</div> <div class="p-2 highlight">Flex item</div> </div> <div class="d-flex highlight mb-3" style="height: 100px"> <div class="p-2 highlight">Flex item</div> <div class="align-self-end p-2 highlight">Aligned flex item</div> <div class="p-2 highlight">Flex item</div> </div> <div class="d-flex highlight mb-3" style="height: 100px"> <div class="p-2 highlight">Flex item</div> <div class="align-self-center p-2 highlight">Aligned flex item</div> <div class="p-2 highlight">Flex item</div> </div> <div class="d-flex highlight mb-3" style="height: 100px"> <div class="p-2 highlight">Flex item</div> <div class="align-self-baseline p-2 highlight">Aligned flex item</div> <div class="p-2 highlight">Flex item</div> </div> <div class="d-flex highlight" style="height: 100px"> <div class="p-2 highlight">Flex item</div> <div class="align-self-stretch p-2 highlight">Aligned flex item</div> <div class="p-2 highlight">Flex item</div> </div> <h2>Fill</h2> <div class="d-flex highlight"> <div class="p-2 flex-fill highlight">Flex item with a lot of content</div> <div class="p-2 flex-fill highlight">Flex item</div> <div class="p-2 flex-fill highlight">Flex item</div> </div> <h2>With align-items</h2> <div class="d-flex align-items-start flex-column highlight mb-3" style="height: 200px;"> <div class="mb-auto p-2 highlight">Flex item</div> <div class="p-2 highlight">Flex item</div> <div class="p-2 highlight">Flex item</div> </div> <div class="d-flex align-items-end flex-column highlight mb-3" style="height: 200px;"> <div class="p-2 highlight">Flex item</div> <div class="p-2 highlight">Flex item</div> <div class="mt-auto p-2 highlight">Flex item</div> </div> <h2>Order</h2> <p>Change the visual order of specific flex items with a handful of order utilities. We only provide options for making an item first or last, as well as a reset to use the DOM order. As order takes any integer value (e.g., 5), add custom CSS for any additional values needed. </p> <div class="d-flex flex-nowrap highlight"> <div class="order-3 p-2 highlight">First flex item</div> <div class="order-2 p-2 highlight">Second flex item</div> <div class="order-1 p-2 highlight">Third flex item</div> </div> <h2>Use align-content utilities on flexbox containers to align flex items together on the cross axis. Choose from start (browser default), end, center, between, around, or stretch. To demonstrate these utilities, we’ve enforced flex-wrap: wrap and increased the number of flex items.</h2> <div class="d-flex align-content-start flex-wrap highlight mb-3" style="height: 200px"> <div class="p-2 highlight">Flex item</div> <div class="p-2 highlight">Flex item</div> <div class="p-2 highlight">Flex item</div> <div class="p-2 highlight">Flex item</div> <div class="p-2 highlight">Flex item</div> <div class="p-2 highlight">Flex item</div> <div class="p-2 highlight">Flex item</div> <div class="p-2 highlight">Flex item</div> <div class="p-2 highlight">Flex item</div> <div class="p-2 highlight">Flex item</div> <div class="p-2 highlight">Flex item</div> <div class="p-2 highlight">Flex item</div> <div class="p-2 highlight">Flex item</div> <div class="p-2 highlight">Flex item</div> <div class="p-2 highlight">Flex item</div> </div> <div class="d-flex align-content-end flex-wrap highlight mb-3" style="height: 200px"> <div class="p-2 highlight">Flex item</div> <div class="p-2 highlight">Flex item</div> <div class="p-2 highlight">Flex item</div> <div class="p-2 highlight">Flex item</div> <div class="p-2 highlight">Flex item</div> <div class="p-2 highlight">Flex item</div> <div class="p-2 highlight">Flex item</div> <div class="p-2 highlight">Flex item</div> <div class="p-2 highlight">Flex item</div> <div class="p-2 highlight">Flex item</div> <div class="p-2 highlight">Flex item</div> <div class="p-2 highlight">Flex item</div> <div class="p-2 highlight">Flex item</div> <div class="p-2 highlight">Flex item</div> <div class="p-2 highlight">Flex item</div> </div>
Shadows
Source code
<div class="shadow-none p-3 mb-5 bg-light rounded">No shadow</div> <div class="shadow-sm p-3 mb-5 bg-white rounded">Small shadow</div> <div class="shadow p-3 mb-5 bg-white rounded">Regular shadow</div> <div class="shadow-lg p-3 mb-5 bg-white rounded">Larger shadow</div>
Spacing & Text
Source code
<h2>Notation</h2>
<p>Spacing utilities that apply to all breakpoints, from <code class="highlighter-rouge">xs</code> to <code class="highlighter-rouge">xl</code>, have no breakpoint abbreviation in them. This is because those classes are applied from <code class="highlighter-rouge">min-width: 0</code> and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.</p>
<p>The classes are named using the format <code class="highlighter-rouge">{property}{sides}-{size}</code> for <code class="highlighter-rouge">xs</code> and <code class="highlighter-rouge">{property}{sides}-{breakpoint}-{size}</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>.</p>
<p>Where <em>property</em> is one of:</p>
<ul>
<li><code class="highlighter-rouge">m</code> - for classes that set <code class="highlighter-rouge">margin</code></li>
<li><code class="highlighter-rouge">p</code> - for classes that set <code class="highlighter-rouge">padding</code></li>
</ul>
<p>Where <em>sides</em> is one of:</p>
<ul>
<li><code class="highlighter-rouge">t</code> - for classes that set <code class="highlighter-rouge">margin-top</code> or <code class="highlighter-rouge">padding-top</code></li>
<li><code class="highlighter-rouge">b</code> - for classes that set <code class="highlighter-rouge">margin-bottom</code> or <code class="highlighter-rouge">padding-bottom</code></li>
<li><code class="highlighter-rouge">l</code> - for classes that set <code class="highlighter-rouge">margin-left</code> or <code class="highlighter-rouge">padding-left</code></li>
<li><code class="highlighter-rouge">r</code> - for classes that set <code class="highlighter-rouge">margin-right</code> or <code class="highlighter-rouge">padding-right</code></li>
<li><code class="highlighter-rouge">x</code> - for classes that set both <code class="highlighter-rouge">*-left</code> and <code class="highlighter-rouge">*-right</code></li>
<li><code class="highlighter-rouge">y</code> - for classes that set both <code class="highlighter-rouge">*-top</code> and <code class="highlighter-rouge">*-bottom</code></li>
<li>blank - for classes that set a <code class="highlighter-rouge">margin</code> or <code class="highlighter-rouge">padding</code> on all 4 sides of the element</li>
</ul>
<p>Where <em>size</em> is one of:</p>
<ul>
<li><code class="highlighter-rouge">0</code> - for classes that eliminate the <code class="highlighter-rouge">margin</code> or <code class="highlighter-rouge">padding</code> by setting it to <code class="highlighter-rouge">0</code></li>
<li><code class="highlighter-rouge">1</code> - (by default) for classes that set the <code class="highlighter-rouge">margin</code> or <code class="highlighter-rouge">padding</code> to <code class="highlighter-rouge">.25</code></li>
<li><code class="highlighter-rouge">2</code> - (by default) for classes that set the <code class="highlighter-rouge">margin</code> or <code class="highlighter-rouge">padding</code> to <code class="highlighter-rouge">.5</code></li>
<li><code class="highlighter-rouge">3</code> - (by default) for classes that set the <code class="highlighter-rouge">margin</code> or <code class="highlighter-rouge">padding</code> to <code class="highlighter-rouge">1</code></li>
<li><code class="highlighter-rouge">4</code> - (by default) for classes that set the <code class="highlighter-rouge">margin</code> or <code class="highlighter-rouge">padding</code> to <code class="highlighter-rouge">1.5</code></li>
<li><code class="highlighter-rouge">5</code> - (by default) for classes that set the <code class="highlighter-rouge">margin</code> or <code class="highlighter-rouge">padding</code> to <code class="highlighter-rouge">3</code></li>
<li><code class="highlighter-rouge">auto</code> - for classes that set the <code class="highlighter-rouge">margin</code> to auto</li>
</ul>
<h2>Text Alignment</h2>
<p class="text-left">.text-left - Left aligned text on all viewport sizes.</p>
<p class="text-center">.text-center - Center aligned text on all viewport sizes.</p>
<p class="text-right">.text-right - Right aligned text on all viewport sizes.</p>
<p class="text-sm-left">.text-sm-left - Left aligned text on viewports sized SM (small) or wider.</p>
<p class="text-md-left">.text-md-left - Left aligned text on viewports sized MD (medium) or wider.</p>
<p class="text-lg-left">.text-lg-left - Left aligned text on viewports sized LG (large) or wider.</p>
<p class="text-xl-left">.text-xl-left - Left aligned text on viewports sized XL (extra-large) or wider.</p>
<div class="badge badge-primary text-wrap" style="width: 6rem;">
.text-wrap - This text should wrap.
</div>
<p class="text-monospace">.text-monospace - This is in monospace</p>
Tables
Source code
<table class="table"> <thead> <tr> <th scope="col">#</th> <th scope="col">First</th> <th scope="col">Last</th> <th scope="col">Handle</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <th scope="row">2</th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <th scope="row">3</th> <td>Larry</td> <td>the Bird</td> <td>@twitter</td> </tr> </tbody> </table> <div>You can also invert the colors—with light text on dark backgrounds—with .table-dark.</div> <table class="table table-dark"> <thead> <tr> <th scope="col">#</th> <th scope="col">First</th> <th scope="col">Last</th> <th scope="col">Handle</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <th scope="row">2</th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <th scope="row">3</th> <td>Larry</td> <td>the Bird</td> <td>@twitter</td> </tr> </tbody> </table> <h2>Table head options</h2> <div>Similar to tables and dark tables, use the modifier classes .thead-light or .thead-dark to make <thead>s appear light or dark gray.</div> <table class="table"> <thead class="thead-dark"> <tr> <th scope="col">#</th> <th scope="col">First</th> <th scope="col">Last</th> <th scope="col">Handle</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <th scope="row">2</th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <th scope="row">3</th> <td>Larry</td> <td>the Bird</td> <td>@twitter</td> </tr> </tbody> </table> <table class="table"> <thead class="thead-light"> <tr> <th scope="col">#</th> <th scope="col">First</th> <th scope="col">Last</th> <th scope="col">Handle</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <th scope="row">2</th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <th scope="row">3</th> <td>Larry</td> <td>the Bird</td> <td>@twitter</td> </tr> </tbody> </table> <h2>Striped rows</h2> <div>Use .table-striped to add zebra-striping to any table row within the <tbody>.</div> <table class="table table-striped"> <thead> <tr> <th scope="col">#</th> <th scope="col">First</th> <th scope="col">Last</th> <th scope="col">Handle</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <th scope="row">2</th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <th scope="row">3</th> <td>Larry</td> <td>the Bird</td> <td>@twitter</td> </tr> </tbody> </table> <table class="table table-striped table-dark"> <thead> <tr> <th scope="col">#</th> <th scope="col">First</th> <th scope="col">Last</th> <th scope="col">Handle</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <th scope="row">2</th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <th scope="row">3</th> <td>Larry</td> <td>the Bird</td> <td>@twitter</td> </tr> </tbody> </table> <h2>Borderless table</h2> Add .table-borderless for a table without borders. <table class="table table-borderless"> <thead> <tr> <th scope="col">#</th> <th scope="col">First</th> <th scope="col">Last</th> <th scope="col">Handle</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <th scope="row">2</th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <th scope="row">3</th> <td colspan="2">Larry the Bird</td> <td>@twitter</td> </tr> </tbody> </table>
Typography
Source code
<table> <thead> <tr> <th>Heading</th> <th>Example</th> </tr> </thead> <tbody> <tr> <td> <p><code class="highlighter-rouge"><h1></h1></code></p> </td> <td><span class="h1">h1. Bootstrap heading</span></td> </tr> <tr> <td> <p><code class="highlighter-rouge"><h2></h2></code></p> </td> <td><span class="h2">h2. Bootstrap heading</span></td> </tr> <tr> <td> <p><code class="highlighter-rouge"><h3></h3></code></p> </td> <td><span class="h3">h3. Bootstrap heading</span></td> </tr> <tr> <td> <p><code class="highlighter-rouge"><h4></h4></code></p> </td> <td><span class="h4">h4. Bootstrap heading</span></td> </tr> <tr> <td> <p><code class="highlighter-rouge"><h5></h5></code></p> </td> <td><span class="h5">h5. Bootstrap heading</span></td> </tr> <tr> <td> <p><code class="highlighter-rouge"><h6></h6></code></p> </td> <td><span class="h6">h6. Bootstrap heading</span></td> </tr> </tbody> </table> <p class="h1">h1. Bootstrap heading</p> <p class="h2">h2. Bootstrap heading</p> <p class="h3">h3. Bootstrap heading</p> <p class="h4">h4. Bootstrap heading</p> <p class="h5">h5. Bootstrap heading</p> <p class="h6">h6. Bootstrap heading</p> <h2>Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using a display heading—a larger, slightly more opinionated heading style. Keep in mind these headings are not responsive by default, but it’s possible to enable responsive font sizes.</h2> <h1 class="display-1">Display 1</h1> <h1 class="display-2">Display 2</h1> <h1 class="display-3">Display 3</h1> <h1 class="display-4">Display 4</h1> <h2>Lead</h2> <p>Make a paragraph stand out by adding .lead.</p> <p class="lead"> Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus. </p> <h2>Inline Text</h2> <p>You can use the mark tag to <mark>highlight</mark> text.</p> <p><del>This line of text is meant to be treated as deleted text.</del></p> <p><s>This line of text is meant to be treated as no longer accurate.</s></p> <p><ins>This line of text is meant to be treated as an addition to the document.</ins></p> <p><u>This line of text will render as underlined</u></p> <p><small>This line of text is meant to be treated as fine print.</small></p> <p><strong>This line rendered as bold text.</strong></p> <p><em>This line rendered as italicized text.</em></p>
Vertical Align
Source code
<span class="align-baseline">baseline</span> <span class="align-top">top</span> <span class="align-middle">middle</span> <span class="align-bottom">bottom</span> <span class="align-text-top">text-top</span> <span class="align-text-bottom">text-bottom</span> </div> <div>With table cells:</div> <div class="group"> <table style="height: 100px;"> <tbody> <tr> <td class="align-baseline">baseline</td> <td class="align-top">top</td> <td class="align-middle">middle</td> <td class="align-bottom">bottom</td> <td class="align-text-top">text-top</td> <td class="align-text-bottom">text-bottom</td> </tr> </tbody> </table> </div>