29:null 2a:["$","title",null,{"children":"Bootstrap Playground | Part 1: Layouts | Carmen Torrecillas | Observable"}] 2f:T512,html`

.container
.row .justify-content

.col-4

.row .justify-content-center

.col-4

.row .justify-content-end

.col-4

.row .justify-content-around

.col-4

.row .justify-content-between

.col-4

`30:[{"id":"78fce1b8fac27e75b14bbd9bb763fbb036908290f281f6ecedc7befe8b1261840d9d47af09a098f050f52be3554445c29a46f51def78553e0f083d0caeb4710b","href":"https://static.observableusercontent.com/files/78fce1b8fac27e75b14bbd9bb763fbb036908290f281f6ecedc7befe8b1261840d9d47af09a098f050f52be3554445c29a46f51def78553e0f083d0caeb4710b","name":"Screenshot 2021-05-24 at 17.20.29.png","type":"image/png","lastModified":1621869667330.409,"size":27191},{"id":"a871446487ad1bba0e8c942bb795faad757ae6a2be0ddca0bbe784a15506a2a58b32f90cfe250b15c68c3fde9ffdc3153bac25b52acedd859207127fe152477d","href":"https://static.observableusercontent.com/files/a871446487ad1bba0e8c942bb795faad757ae6a2be0ddca0bbe784a15506a2a58b32f90cfe250b15c68c3fde9ffdc3153bac25b52acedd859207127fe152477d","name":"Screenshot 2021-05-24 at 17.21.28.png","type":"image/png","lastModified":1621869698272.88,"size":55151}] 2d:{"id":"4fcbb4a7fab48a38","slug":"bootstrap-boilerplate-version-4-1-part-1","title":"Bootstrap Playground | Part 1: Layouts","thumbnail":"e8e761aeb3eb2495e28b20f1d59236fb1e199b1a96b148ac66b8766bdd4ad163","access_level":"public","create_time":"$D2021-05-21T10:46:39.242Z","update_time":"$D2022-07-14T14:40:25.227Z","view_time":null,"first_public_time":"$D2021-05-24T15:36:42.426Z","has_unpublished_edits":null,"fork":{"id":"6b42c0c251200e77","slug":"bootstrap-boilerplate","title":"Bootstrap Boilerplate","owner":{"id":"8d652a601386fcf4","login":"aaronkyle","name":"Aaron Kyle Dennis"}},"stars":7,"starred":false,"owner":{"type":"team","id":"a262e760e83526f4","login":"carmen-tm","name":"Carmen Torrecillas","avatar_url":"https://avatars-next.observableusercontent.com/6166cc1d0d1b54f27c95caecb76fb456af5de2933e87f457e55d4d06b1973062","tier":"starter_2024"},"version":711,"publish_version":711,"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}],"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":2,"collection":{"id":"ff6ca1361fe2dae0","slug":"learning-bootstrap","title":"## Learning - Bootstrap","owner":{"id":"a262e760e83526f4","login":"carmen-tm","name":"Carmen Torrecillas"}},"type":"notebook","body":{"title":"Bootstrap Playground | Part 1: Layouts","cells":[{"id":0,"value":"md`# Bootstrap Playground | Part 1: Layouts\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":407,"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","output":"$undefined","database":"$undefined"},{"id":669,"value":"toc()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":681,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":688,"value":"md`### Breakpoints`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":691,"value":"![Screenshot 2021-05-24 at 17.20.29.png](${await FileAttachment(\"Screenshot 2021-05-24 at 17.20.29.png\").url()})","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"md`### Containers`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":695,"value":"![Screenshot 2021-05-24 at 17.21.28.png](${await FileAttachment(\"Screenshot 2021-05-24 at 17.21.28.png\").url()})","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":699,"value":"html`\n

\n.container\n

\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":700,"value":"html`\n

\n.container-fluid\n

\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"md`### Grid\nhttps://getbootstrap.com/docs/4.1/layout/grid/\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"md`#### Auto-layout columns`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":196,"value":"md`##### Equal-width`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"html`\n

\n.container\n

\n .col\n

\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"html`\n

\n.container\n

\n .col\n

\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"html`\n

\n.container-fluid\n

\n .col\n

\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"html`\n

\n .container\n

\n .col-sm\n

\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"html`\n

\n .container-fluid\n

\n .col-sm\n

\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"html`\n

\n .container\n

\n .col-md\n

\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"html`\n

\n .container-fluid\n

\n .col-md\n

\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"value":"md`##### Setting one column width\nThe rest will resize around it\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"html`\n

\n .container-fluid\n

\n .col-md\n

\n .col-6\n

\n .col-md\n

\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":167,"value":"md`##### Variable with content\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":170,"value":"html`\n

\n .container-fluid\n

\n .col-md\n

\n .col-md-auto (this width is variable depending on content)\n

\n .col-md\n

\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":176,"value":"html`\n

\n .container-fluid\n

\n .col\n

\n .col-auto (variable as well)\n

\n .col\n

\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":182,"value":"md`#### Responsive classes`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":205,"value":"md`##### All breakpoints`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":214,"value":"html`\n

\n .container\n

.col-sm-8

.col-sm-4

.col-sm

\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":217,"value":"md`##### Stacked to horizontal`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":207,"value":"html`\n

\n .container\n

col-sm-8

col-sm-4

col-sm

\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":221,"value":"html`\n

\n .container\n

col-md-8

col-md-4

col-md

\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":223,"value":"html`\n

\n .container-fuid\n

col-lg-8

col-lg-4

col-lg

\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":231,"value":"md`##### Mix and match`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":234,"value":"html`\n

\n .container
\n Stack the columns on mobile by making one full-width and the other half-width\n

.col-md-8

.col-6 .col-md-2

\n\n Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop\n

.col-6 .col-md-4

\n\n Columns are always 50% wide, on mobile and desktop\n

.col-6

\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":250,"value":"md`### Columns\nhttps://getbootstrap.com/docs/4.1/layout/grid/#alignment\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":252,"value":"md`#### Alignment`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":254,"value":"md`##### Vertical\nPodemos asignar .row las clases 'align-items-start', 'align-items-center' y 'align-items-end' para alinear en bloque todas las columnas.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":256,"value":"html`\n

\n .container
\n .row .align-items-start\n

\n .col\n

\n .row .align-items-center\n

\n .col \n

\n .row .align-items-end/small>\n

\n .col \n

\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":299,"value":"md`\nTambién podemos hacerlo individualmente a cada columna .col, asingando las clases 'align-selft-start', 'align-selft-center' y 'align-self-end'.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":285,"value":"html`\n

\n .row\n

\n .col .align-self-start 👆🏻\n

\n .col .align-self-center 👈🏻\n

\n .col .align-self-end 👇🏻\n

\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":302,"value":"md`##### Horizontal\nPodemos asignar .row las clases 'align-items-start', 'align-items-center' y 'align-items-end' para alinear en bloque horizontalmente.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":304,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":325,"value":"md`##### No gutters?\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":327,"value":"html`\n

.col-12 .col-sm-6 .col-md-8

.col-6 .col-md-4

\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":329,"value":"html`\n

.col-12 .col-sm-6 .col-md-8

.col-6 .col-md-4

\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":331,"value":"md`##### Column breaks\nPara romper las columnas, necesitamos entre medias un elemento que lo fuerce tal que así:\n'

'\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":333,"value":"html`\n

.col-6 .col-sm-3

\n\n \n

\n\n

.col-6 .col-sm-3

\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":347,"value":"html`\n

.col-6 .col-sm-4

\n\n \n

\n\n

.col-6 .col-sm-4

\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":349,"value":"md`#### Reordering\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":351,"value":"html`\n\n

\nUsing anything + .order-12 + .order-1\n

\n .col (First, but unordered)\n

\n .col .order-12 (Second, but last)\n

\n .col .order-1 (Third, but first)\n

\n\n \n

\nUsing .order-last + anything + .order-first\n

\n .col .order-last (First, but last)\n

\n .col (Second, but unordered)\n

\n .col .order-first (Third, but first)\n

\n\n

\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":369,"value":"md`#### Offsetting columns\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":372,"value":"md`##### Via offset classes\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":376,"value":"html`\n

\n .row\n

.col-md-4

.col-md-4 .offset-md-4

\nSame as \n

\n .row .justify-content-between\n

.col-md-4

\n\n

\n .row\n

.col-md-3 .offset-md-3

\n\n

\n .row\n

.col-md-6 .offset-md-3

\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":374,"value":"md`##### Via margins\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":402,"value":"html`\n

.col-md-4

.col-md-4 .ml-auto

.col-md-3 .ml-md-auto

.col-auto .mr-auto

.col-auto

\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":455,"value":"md`\n---\n\n# Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"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","output":"$undefined","database":"$undefined"},{"id":10,"value":"// https://getbootstrap.com/docs/4.1/getting-started/introduction/#css\nhtml`css `","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"bootstrap = require('bootstrap')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"//bootstrap.version","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":665,"value":"import { toc } from \"@bryangingechen/toc\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"style = html`\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2e:"$2d:body"