Bootstrap Playground | Part 3: Utilities / Carmen Torrecillas

</div>

</div>

</div>

</div>

</button>

<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-light bg-dark">.text-light</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 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-light text-dark">.bg-light</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>

<div class="d-inline p-2 bg-primary text-white">d-inline</div>

<div class="d-inline p-2 bg-dark text-white">d-inline</div>

<span class="d-block p-2 bg-primary text-white">d-block</span>

<span class="d-block p-2 bg-dark text-white">d-block</span>

<small>Resize down to see hidden elements</small>

<div class="d-md-none text-primary">hide on screens wider than md</div>

<div class="d-none d-lg-block text-secondary">hide on screens smaller than lg</div>

<small>Resize down/up to see appear/dessappear elements</small>

<small>Hidden on...</small>

<div class="d-none text-primary">Hidden on all</div>

<div class="d-none d-sm-block text-secondary">Hidden only on xs</div>

<div class="d-sm-none d-md-block text-danger">Hidden only on sm</div>

<div class="d-md-none d-lg-block text-success">Hidden only on md</div>

<div class="d-lg-none d-xl-block text-info">Hidden only on lg</div>

<div class="d-lg-none text-warming">Hidden only on xl</div>

<small>Visible only...</small>

<div class="d-block text-primary">Visible on all </div>

<div class="d-block d-sm-none text-secondary">Visible only on xs </div>

<div class="d-none d-sm-block d-md-none text-danger">Visible only on sm</div>

<div class="d-none d-md-block d-lg-none text-success">Visible only on md</div>

<div class="d-none d-lg-block d-xl-none text-info">Visible only on lg</div>

<div class="d-none d-xl-block text-warming">Visible only on xl </div>

</div>

<div class="d-flex p-2 bg-info">.d-flex (I'm a flexbox container!)</div>

<div class="d-inline-flex p-2 bg-info">.d-inline-flex (I'm an inline flexbox container!)</div>

</div>

<small class="d-block text-right">.d-flex .flex-row-reverse .mb-3</small>

</div>

<div class="d-flex justify-content-start">d-flex justify-content-start</div>

<div class="d-flex justify-content-end">d-flex justify-content-end</div>

<div class="d-flex justify-content-center">d-flex justify-content-center</div>

<div class="d-flex justify-content-between">d-flex justify-content-between</div>

<div class="d-flex justify-content-around">d-flex justify-content-around</div>

<small>.d-flex .align-items-start</small>

</div>

<small>.d-flex .align-items-endc</small>

</div>

<small>.d-flex .align-items-center</small>

</div>

<small>.d-flex .align-items-baseline</small>

</div>

<small>.d-flex .align-items-stretch</small>

</div>

<div class="align-self-start p-2 bg-danger border border-light">.align-self-start</div>

</div>

<div class="align-self-end p-2 bg-danger border border-light">.align-self-end</div>

</div>

<div class="align-self-center p-2 bg-danger border border-light">.align-self-center</div>

</div>

<div class="align-self-baseline p-2 bg-danger border border-light">.align-self-baseline</div>

</div>

<div class="align-self-stretch p-2 bg-danger border border-light">.align-self-stretch</div>

</div>

</div>

<div class="p-2 bg-warning border">Third flex item</div>

</div>

<div class="p-2 flex-shrink-1 bg-info">.flex-shrink</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

<div class="order-3 p-2 bg-light border">.order-3 (first on DOM)</div>

<div class="order-2 p-2 bg-light border">.order-2 (second on DOM) </div>

<div class="order-1 p-2 bg-light border">.order-1 (third on DOM)</div>

</div>

<small>.d-flex .align-content-start .flex-wrap</small>

</div>

<small>.d-flex .align-content-end .flex-wrap</small>

</div>

<small>.d-flex .align-content-center .flex-wrap</small>

</div>

<small>.d-flex .align-content-between .flex-wrap</small>

</div>

<small>.d-flex .align-content-around .flex-wrap</small>

</div>

<small>.d-flex .align-content-stretch .flex-wrap</small>

</div>

<div class="float-left border">Float left on all viewport sizes</div><br>

<div class="float-right border">Float right on all viewport sizes</div><br>

<div class="float-none border">Don't float on all viewport sizes</div>

<div class="float-sm-left">Float left on viewports sized SM (small) or wider</div><br>

<div class="float-md-left">Float left on viewports sized MD (medium) or wider</div><br>

<div class="float-lg-left">Float left on viewports sized LG (large) or wider</div><br>

<div class="float-xl-left">Float left on viewports sized XL (extra-large) or wider</div><br>

<div class="shadow-none p-3 mb-5 bg-light rounded">.shadow-none (No shadow)</div>

<div class="shadow-sm p-3 mb-5 bg-white rounded">.shadow-sm (Small shadow)</div>

<div class="shadow p-3 mb-5 bg-white rounded">.shadow (Regular shadow)</div>

<div class="shadow-lg p-3 mb-5 bg-white rounded">.shadow-lg (Larger shadow)</div>

<div class="w-25 p-3" style="background-color: #eee;">Width 25%</div>

<div class="w-50 p-3" style="background-color: #eee;">Width 50%</div>

<div class="w-75 p-3" style="background-color: #eee;">Width 75%</div>

<div class="w-100 p-3" style="background-color: #eee;">Width 100%</div>

<div class="w-auto p-3" style="background-color: #eee;">Width auto</div>

<div class="h-25 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 25%</div>

<div class="h-50 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 50%</div>

<div class="h-75 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 75%</div>

<div class="h-100 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 100%</div>

<div class="h-auto d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height auto</div>

</div>

<small>Margin top</small>

</div>

html`

<small>Padding top</small>

</div>

`

</div>

html`

<small>Padding bottom</small>

</div>

`

html`

<small>>Margin left and righ</small>

<div class="mx-5 bg-warning border text-center">.mx-5 (both left and right)</div>

</div>

`

html`

<small class="d-block text-center">Padding left and right</small>

<div class="px-5 bg-warning border text-center">.px-5 (both left and right)</div>

</div>

`

html`

<small class="d-block text-center">Margin top and bottom</small>

<div class="my-5 bg-success border text-center">.my-5 (both top and bottom)</div>

</div>

`

html`

<small class="d-block text-center">Padding top and bottom</small>

</div>

`

.mx-auto (width: 250px)

</div>

html`

<small>.text-justify</small>

<p class="text-justify">Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.</p>

`

html`

<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>

</div>

`

html`

<p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>

<p class="text-md-left">Left aligned text on viewports sized MD (medium) or wider.</p>

<p class="text-lg-left">Left aligned text on viewports sized LG (large) or wider.</p>

<p class="text-xl-left">Left aligned text on viewports sized XL (extra-large) or wider.</p>

`

html`

<small>BLOCK LEVEL</small></br>

<small>.text-truncate</small>

Praeterea iter est quasdam res quas ex communi.

</div>

<small class="d-block">INLINE LEVEL</small>

<small>.d-inline-block .text-truncate</small></br>

Praeterea iter est quasdam res quas ex communi.

</span>

`

html`

<p class="text-lowercase">Lowercased text.</p>

<p class="text-uppercase">Uppercased text.</p>

<p class="text-capitalize">CapiTaliZed text.</p>

`

html`

<p class="font-weight-normal">Normal weight text.</p>

<p class="font-weight-light">Light weight text.</p>

<p class="font-italic">Italic text.</p>

`

html`

<span class="align-baseline">baseline</span>

<span class="align-middle">middle</span>

<span class="align-bottom">bottom</span>

<span class="align-text-bottom">text-bottom</span>

`

html`

<tbody>

<tr>

<td class="align-baseline">baseline</td>

<td class="align-middle">middle</td>

<td class="align-bottom">bottom</td>

<td class="align-text-bottom">text-bottom</td>

</tr>

</tbody>

</table>

`

html`

<div class="visible">.visible</div>

<div class="invisible">.invisible</div>

`

// https://getbootstrap.com/docs/4.1/getting-started/introduction/#js

$ = require("jquery").then((jquery) => {

window.jquery = jquery;

return require("popper@1.14.3/index.js").catch(() => jquery);

})

// https://getbootstrap.com/docs/4.1/getting-started/introduction/#css

html`<code>css</code> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">`

BootStrap4 = require("https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js")

import { toc } from "@bryangingechen/toc"

style = html`

<style>

.container {

border: 1px dashed blue;

}

.container-fluid {

border: 1px dashed red;

}

.row > * {

background: lightgrey;

border: 1px solid white;

}

.col-sm {

background: pink;

border: 1px solid white;

}

.col-md {

background: coral;

border: 1px solid white;

}

.col-6 {

background: cadetblue;

border: 1px solid white;

}

small {

color: grey;

}

.bd-example [class^=border] {

display: inline-block;

width: 5rem;

height: 5rem;

margin: .25rem;

background-color: #f5f5f5;

}

.bd-example.substractive span {

border: 2px solid coral;

}

</style>

`

Purpose-built for displays of data