31:T699,

.d-flex .align-items-start

Flex item

.d-flex .align-items-endc

Flex item

.d-flex .align-items-center

Flex item

.d-flex .align-items-baseline

Flex item

.d-flex .align-items-stretch

Flex item

32:T5db,

Flex item

.align-self-start

Flex item

.align-self-end

Flex item

.align-self-center

Flex item

.align-self-baseline

Flex item

.align-self-stretch

Flex item

33:[{"id":"a532ebf83cb3a75dd68f65c67539cf13b7241d321f9e8ebeaa109f3b29a32de3e1a30c40f5ef4aa2ed728f7d71668127b2c5a145828ede95745798ef0e79883b","href":"https://static.observableusercontent.com/files/a532ebf83cb3a75dd68f65c67539cf13b7241d321f9e8ebeaa109f3b29a32de3e1a30c40f5ef4aa2ed728f7d71668127b2c5a145828ede95745798ef0e79883b","name":"Screenshot 2021-05-24 at 14.46.48.png","type":"image/png","lastModified":1621860440427.479,"size":74959},{"id":"a436e8db18aa486e9714950e63734eba636d04b74e357119895eccde9e4c0ea6bde8888046133c524bee0742e6071cfe3bd7d862b605ca2b2c53f6d1b3fab2d5","href":"https://static.observableusercontent.com/files/a436e8db18aa486e9714950e63734eba636d04b74e357119895eccde9e4c0ea6bde8888046133c524bee0742e6071cfe3bd7d862b605ca2b2c53f6d1b3fab2d5","name":"Screenshot 2021-05-24 at 16.24.46.png","type":"image/png","lastModified":1621866307352.859,"size":145873}] 2f:{"title":"Bootstrap Playground | Part 3: Utilities","cells":[{"id":0,"value":"md`# Bootstrap Playground | Part 3: Utilities\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"md`\n\nUsing version 4.1.3\n\nDocs:\n- Version 4.1: https://getbootstrap.com/docs/4.1/getting-started/introduction/\n- Version 5.0: https://getbootstrap.com/docs/5.0/getting-started/introduction/\n\nUsing @aaronkyle [bootstrap-boilerplate](https://observablehq.com/@aaronkyle/bootstrap-boilerplate).\n\n---\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"toc()","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"### Borders\nhttps://getbootstrap.com/docs/4.1/utilities/borders/","pinned":false,"hidden":false,"mode":"md"},{"id":38,"value":"

\n \n \n \n \n \n

","pinned":true,"hidden":false,"mode":"html"},{"id":46,"value":"

\n \n \n \n \n \n

","pinned":true,"hidden":false,"mode":"html"},{"id":58,"value":"

\n \n \n \n \n \n \n \n \n \n

","pinned":true,"hidden":false,"mode":"html"},{"id":63,"value":"#### Border-radius","pinned":false,"hidden":false,"mode":"md"},{"id":75,"value":"

\n \n \n \n \n \n \n \n

","pinned":true,"hidden":false,"mode":"html"},{"id":87,"value":"### Close icon\n\nhttps://getbootstrap.com/docs/4.1/utilities/close-icon/","pinned":false,"hidden":false,"mode":"md"},{"id":91,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":95,"value":"### Colors\n\nhttps://getbootstrap.com/docs/4.1/utilities/colors/","pinned":false,"hidden":false,"mode":"md"},{"id":99,"value":"

.text-primary

.text-secondary

.text-success

.text-danger

.text-warning

.text-info

.text-light

.text-dark

.text-body

.text-muted

.text-white

.text-black-50

.text-white-50

","pinned":true,"hidden":false,"mode":"html"},{"id":103,"value":"

.bg-primary

.bg-secondary

.bg-success

.bg-danger

.bg-warning

.bg-info

.bg-light

.bg-dark

.bg-white

.bg-transparent

","pinned":true,"hidden":false,"mode":"html"},{"id":107,"value":"### Display\n\nhttps://getbootstrap.com/docs/4.1/utilities/display/","pinned":false,"hidden":false,"mode":"md"},{"id":111,"value":"

d-inline

","pinned":true,"hidden":false,"mode":"html"},{"id":115,"value":"d-block\nd-block","pinned":true,"hidden":false,"mode":"html"},{"id":118,"value":"Resize down to see hidden elements\n

hide on screens wider than md

hide on screens smaller than lg

","pinned":true,"hidden":false,"mode":"html"},{"id":134,"value":"Resize down/up to see appear/dessappear elements\n

\n Hidden on...\n

Hidden on all

Hidden only on xs

Hidden only on sm

Hidden only on md

Hidden only on lg

Hidden only on xl

\n \n Visible only...\n

Visible on all\t

Visible only on xs\t

Visible only on sm

Visible only on md

Visible only on lg

Visible only on xl\t

","pinned":true,"hidden":false,"mode":"html"},{"id":121,"value":"![Screenshot 2021-05-24 at 14.46.48.png](${await FileAttachment(\"Screenshot 2021-05-24 at 14.46.48.png\").url()})","pinned":false,"hidden":false,"mode":"md"},{"id":158,"value":"### Flex\n\nhttps://getbootstrap.com/docs/4.1/utilities/flex/","pinned":false,"hidden":false,"mode":"md"},{"id":162,"value":"

.d-flex (I'm a flexbox container!)

","pinned":true,"hidden":false,"mode":"html"},{"id":166,"value":"

.d-inline-flex (I'm an inline flexbox container!)

","pinned":true,"hidden":false,"mode":"html"},{"id":182,"value":"#### Direction","pinned":false,"hidden":false,"mode":"md"},{"id":173,"value":".d-flex .flex-row .mb-3\n

Flex item 1

Flex item 2

Flex item 3

\n\n.d-flex .flex-row-reverse .mb-3\n

Flex item 1

Flex item 2

Flex item 3

","pinned":true,"hidden":false,"mode":"html"},{"id":210,"value":"#### Justify content","pinned":false,"hidden":false,"mode":"md"},{"id":197,"value":"

d-flex justify-content-start

d-flex justify-content-end

d-flex justify-content-center

d-flex justify-content-between

d-flex justify-content-around

","pinned":true,"hidden":false,"mode":"html"},{"id":202,"value":"#### Align items","pinned":false,"hidden":false,"mode":"md"},{"id":214,"value":"$31","pinned":true,"hidden":false,"mode":"html"},{"id":234,"value":"#### Align self","pinned":false,"hidden":false,"mode":"md"},{"id":238,"value":"$32","pinned":true,"hidden":false,"mode":"html"},{"id":253,"value":"#### Fill","pinned":false,"hidden":false,"mode":"md"},{"id":259,"value":"

Flex item

","pinned":true,"hidden":false,"mode":"html"},{"id":269,"value":"#### Grow and shrink","pinned":false,"hidden":false,"mode":"md"},{"id":276,"value":"

.flew-grow

Flex item

Third flex item

","pinned":true,"hidden":false,"mode":"html"},{"id":287,"value":"

Flex item

.flex-shrink

","pinned":true,"hidden":false,"mode":"html"},{"id":298,"value":"#### Auto margins","pinned":false,"hidden":false,"mode":"md"},{"id":302,"value":"

Flex item

\n\n

.mr-auto

Flex item

\n\n

Flex item

.ml-auto

","pinned":true,"hidden":false,"mode":"html"},{"id":312,"value":"#### With align-items","pinned":false,"hidden":false,"mode":"md"},{"id":316,"value":"

.mb-auto

Flex item

\n\n

Flex item

.mt-auto

","pinned":true,"hidden":false,"mode":"html"},{"id":334,"value":"#### Wrap","pinned":false,"hidden":false,"mode":"md"},{"id":338,"value":"

Flex item

","pinned":true,"hidden":false,"mode":"html"},{"id":345,"value":"

Flex item

","pinned":true,"hidden":false,"mode":"html"},{"id":344,"value":"

Flex item

","pinned":true,"hidden":false,"mode":"html"},{"id":360,"value":"#### Order","pinned":false,"hidden":false,"mode":"md"},{"id":364,"value":"

.order-3 (first on DOM)

.order-2 (second on DOM)

.order-1 (third on DOM)

","pinned":true,"hidden":false,"mode":"html"},{"id":373,"value":"#### Align content","pinned":false,"hidden":false,"mode":"md"},{"id":380,"value":"

\n .d-flex .align-content-start .flex-wrap\n

Flex item

","pinned":true,"hidden":false,"mode":"html"},{"id":388,"value":"

\n .d-flex .align-content-end .flex-wrap\n

Flex item

","pinned":true,"hidden":false,"mode":"html"},{"id":392,"value":"

\n .d-flex .align-content-center .flex-wrap\n

Flex item

","pinned":true,"hidden":false,"mode":"html"},{"id":395,"value":"

\n .d-flex .align-content-between .flex-wrap\n

Flex item

","pinned":true,"hidden":false,"mode":"html"},{"id":404,"value":"

\n .d-flex .align-content-around .flex-wrap\n

Flex item

","pinned":true,"hidden":false,"mode":"html"},{"id":409,"value":"

\n .d-flex .align-content-stretch .flex-wrap\n

Flex item

","pinned":true,"hidden":false,"mode":"html"},{"id":414,"value":"### Float\n\nhttps://getbootstrap.com/docs/4.1/utilities/float/","pinned":false,"hidden":false,"mode":"md"},{"id":430,"value":"

Float left on all viewport sizes

Float right on all viewport sizes

Don't float on all viewport sizes

","pinned":true,"hidden":false,"mode":"html"},{"id":438,"value":"#### Responsive \n\n// NOT WORKING here within Observable?","pinned":false,"hidden":false,"mode":"md"},{"id":442,"value":"

Float left on viewports sized SM (small) or wider

Float left on viewports sized MD (medium) or wider

Float left on viewports sized LG (large) or wider

Float left on viewports sized XL (extra-large) or wider

","pinned":true,"hidden":false,"mode":"html"},{"id":417,"value":"### Position\n\nhttps://getbootstrap.com/docs/4.1/utilities/position/","pinned":false,"hidden":false,"mode":"md"},{"id":447,"value":"#### Fixed top","pinned":false,"hidden":false,"mode":"md"},{"id":458,"value":"

...

","pinned":true,"hidden":false,"mode":"html"},{"id":450,"value":"

...

","pinned":true,"hidden":false,"mode":"html"},{"id":453,"value":"

...

","pinned":true,"hidden":false,"mode":"html"},{"id":462,"value":"### Screenreaders\n\nhttps://getbootstrap.com/docs/4.1/utilities/position/","pinned":false,"hidden":false,"mode":"md"},{"id":464,"value":"Hide an element to all devices except screen readers with `.sr-only`. Combine `.sr-only` with `.sr-only-focusable` to show the element again when it’s focused (e.g. by a keyboard-only user). ","pinned":false,"hidden":false,"mode":"md"},{"id":472,"value":"### Shadows\n\nhttps://getbootstrap.com/docs/4.1/utilities/shadows/","pinned":false,"hidden":false,"mode":"md"},{"id":475,"value":"

.shadow-none (No shadow)

.shadow-sm (Small shadow)

.shadow (Regular shadow)

.shadow-lg (Larger shadow)

","pinned":true,"hidden":false,"mode":"html"},{"id":486,"value":"### Sizing\n\nhttps://getbootstrap.com/docs/4.1/utilities/sizing/\n\nRelative to the parent","pinned":false,"hidden":false,"mode":"md"},{"id":483,"value":"

Width 25%

Width 50%

Width 75%

Width 100%

Width auto

","pinned":true,"hidden":false,"mode":"html"},{"id":491,"value":"

Height 25%

Height 50%

Height 75%

Height 100%

Height auto

","pinned":true,"hidden":false,"mode":"html"},{"id":498,"value":"### Spacing (margin and padding!)\n\nhttps://getbootstrap.com/docs/4.1/utilities/spacing/","pinned":false,"hidden":false,"mode":"md"},{"id":508,"value":"![Screenshot 2021-05-24 at 16.24.46.png](${await FileAttachment(\"Screenshot 2021-05-24 at 16.24.46.png\").url()})","pinned":false,"hidden":false,"mode":"md"},{"id":523,"value":"

\n Margin top\n

.mt-3

","pinned":true,"hidden":false,"mode":"html"},{"id":559,"value":"html`\n

\n Padding top\n

.pt-3

\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":530,"value":"

.mb-3

","pinned":true,"hidden":false,"mode":"html"},{"id":568,"value":"html`\n

\n Padding bottom\n

.pb-3

\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":540,"value":"html`\n

\n >Margin left and righ\n

.mx-5 (both left and right)

\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":573,"value":"html`\n

\n Padding left and right\n

.px-5 (both left and right)

\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":544,"value":"html`\n

\n Margin top and bottom\n

.my-5 (both top and bottom)

\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":574,"value":"html`\n

\n Padding top and bottom\n

.py-5

\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":519,"value":"#### Horizontal centering","pinned":false,"hidden":false,"mode":"md"},{"id":502,"value":"

\n .mx-auto (width: 250px)\n

","pinned":true,"hidden":false,"mode":"html"},{"id":420,"value":"### Texts\n\nhttps://getbootstrap.com/docs/4.1/utilities/text/","pinned":false,"hidden":false,"mode":"md"},{"id":590,"value":"html`\n.text-justify\n

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.

\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":594,"value":"html`\n

.text-left (Left aligned text on all viewport sizes.)

.text-center (Center aligned text on all viewport sizes.)

.text-right (Right aligned text on all viewport sizes.)

\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":621,"value":"html`\n

Left aligned text on viewports sized SM (small) or wider.

Left aligned text on viewports sized MD (medium) or wider.

Left aligned text on viewports sized LG (large) or wider.

Left aligned text on viewports sized XL (extra-large) or wider.

\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":595,"value":"html`\nBLOCK LEVEL
\n.text-truncate\n

\n Praeterea iter est quasdam res quas ex communi.\n

\n\nINLINE LEVEL\n.d-inline-block .text-truncate
\n\n Praeterea iter est quasdam res quas ex communi.\n\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":624,"value":"html`\n

Lowercased text.

Uppercased text.

CapiTaliZed text.

\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":626,"value":"md`\n#### Font weight`","pinned":false,"hidden":false,"mode":"ojs"},{"id":629,"value":"html`\n

Bold text.

Normal weight text.

Light weight text.

Italic text.

\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":637,"value":"md`### Vertical align\n\nhttps://getbootstrap.com/docs/4.1/utilities/vertical-align/\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":632,"value":"html`\nbaseline\ntop\nmiddle\nbottom\ntext-top\ntext-bottom\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":634,"value":"html`\n\n \n \n \n \n \n \n \n \n \n \n

baseline

top

middle

bottom

text-top

text-bottom

\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":423,"value":"### Visibility\n\nhttps://getbootstrap.com/docs/4.1/utilities/visibility/","pinned":false,"hidden":false,"mode":"md"},{"id":640,"value":"html`\n

.visible

.invisible

\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":14,"value":"md`\n---\n\n# Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"// https://getbootstrap.com/docs/4.1/getting-started/introduction/#js\n$ = require(\"jquery\").then((jquery) => {\n window.jquery = jquery;\n return require(\"popper@1.14.3/index.js\").catch(() => jquery);\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":18,"value":"// https://getbootstrap.com/docs/4.1/getting-started/introduction/#css\nhtml`css `","pinned":true,"hidden":false,"mode":"ojs"},{"id":21,"value":"BootStrap4 = require(\"https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":23,"value":"import { toc } from \"@bryangingechen/toc\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":25,"value":"style = html`\n\n`","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}