40:null 41:["$","title",null,{"children":"Bootstrap Playground | Part 3: Utilities | Carmen Torrecillas | Observable"}] 47: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

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

49:[{"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}] 45:{"id":"89cee5a8736e71b5","slug":"bootstrap-boilerplate-version-4-1-part-3","title":"Bootstrap Playground | Part 3: Utilities","thumbnail":"7e6dd739ea3056eb40df8259c04de83e87ad988f8b7822d0c14ad794fc091289","access_level":"public","create_time":"$D2021-05-24T11:20:19.660Z","update_time":"$D2021-05-24T15:45:13.993Z","view_time":null,"first_public_time":"$D2021-05-24T15:36:48.501Z","has_unpublished_edits":null,"fork":false,"stars":4,"starred":false,"owner":{"type":"team","id":"a262e760e83526f4","login":"carmen-tm","name":"Carmen Torrecillas","avatar_url":"https://avatars-next.observableusercontent.com/6166cc1d0d1b54f27c95caecb76fb456af5de2933e87f457e55d4d06b1973062","tier":"starter_2024","bio":"Data visualisation at @civio, a non-profit journalism organisation specialising in public data and access to information. ","following":false},"version":667,"publish_version":667,"role":null,"authored":false,"authors":[{"type":"individual","id":"8b6befb4233b6103","login":"carmen-tm","name":"Carmen Torrecillas","avatar_url":"https://avatars-next.observableusercontent.com/6166cc1d0d1b54f27c95caecb76fb456af5de2933e87f457e55d4d06b1973062","tier":null,"bio":"Data visualisation at @civio, a non-profit journalism organisation specialising in public data and access to information. ","following":false}],"members":[{"type":"individual","id":"8b6befb4233b6103","login":"carmen-tm","name":"Carmen Torrecillas","avatar_url":"https://avatars-next.observableusercontent.com/6166cc1d0d1b54f27c95caecb76fb456af5de2933e87f457e55d4d06b1973062","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"ff6ca1361fe2dae0","slug":"learning-bootstrap","title":"## Learning - Bootstrap","owner":{"id":"a262e760e83526f4","login":"carmen-tm","name":"Carmen Torrecillas"}},"type":"notebook","body":{"titling":"auto","title":"Bootstrap Playground | Part 3: Utilities","cells":[{"id":0,"value":"md`# Bootstrap Playground | Part 3: Utilities\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"toc()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"### Borders\nhttps://getbootstrap.com/docs/4.1/utilities/borders/","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"

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

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

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

","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"### Close icon\n\nhttps://getbootstrap.com/docs/4.1/utilities/close-icon/","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"### Colors\n\nhttps://getbootstrap.com/docs/4.1/utilities/colors/","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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

.bg-primary

.bg-secondary

.bg-success

.bg-danger

.bg-warning

.bg-info

.bg-light

.bg-dark

.bg-white

.bg-transparent

d-inline

hide on screens wider than md

hide on screens smaller than lg

\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

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

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

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

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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":202,"value":"#### Align items","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":214,"value":"$47","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":234,"value":"#### Align self","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":238,"value":"$48","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":253,"value":"#### Fill","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":259,"value":"

Flex item

.flew-grow

Flex item

Third flex item

Flex item

.flex-shrink

Flex item

\n\n

.mr-auto

Flex item

\n\n

Flex item

.ml-auto

.mb-auto

Flex item

\n\n

Flex item

.mt-auto

Flex item

.order-3 (first on DOM)

.order-2 (second on DOM)

.order-1 (third on DOM)

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

Flex item

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

Flex item

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

Flex item

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

Flex item

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

Flex item

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

Flex item

Float left on all viewport sizes

Float right on all viewport sizes

Don't float on all viewport sizes

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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":462,"value":"### Screenreaders\n\nhttps://getbootstrap.com/docs/4.1/utilities/position/","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":472,"value":"### Shadows\n\nhttps://getbootstrap.com/docs/4.1/utilities/shadows/","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":475,"value":"

.shadow-none (No shadow)

.shadow-sm (Small shadow)

.shadow (Regular shadow)

.shadow-lg (Larger shadow)

Width 25%

Width 50%

Width 75%

Width 100%

Width auto

Height 25%

Height 50%

Height 75%

Height 100%

Height auto

\n Margin top\n

.mt-3

\n Padding top\n

.pt-3

.mb-3

\n Padding bottom\n

.pb-3

\n >Margin left and righ\n

.mx-5 (both left and right)

\n Padding left and right\n

.px-5 (both left and right)

\n Margin top and bottom\n

.my-5 (both top and bottom)

\n Padding top and bottom\n

.py-5

\n .mx-auto (width: 250px)\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.

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

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 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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":624,"value":"html`\n

Lowercased text.

Uppercased text.

CapiTaliZed text.

Bold text.

Normal weight text.

Light weight text.

Italic text.

baseline

top

middle

bottom

text-top

text-bottom

.visible

.invisible

\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"md`\n---\n\n# Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"// https://getbootstrap.com/docs/4.1/getting-started/introduction/#css\nhtml`css `","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"BootStrap4 = require(\"https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"import { toc } from \"@bryangingechen/toc\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"style = html`\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W49","stdlib":"1"}} 46:"$45:body"