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

`32:[{"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}] 2f:{"title":"Bootstrap Playground | Part 1: Layouts","cells":[{"id":0,"value":"md`# Bootstrap Playground | Part 1: Layouts\n`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":669,"value":"toc()","pinned":false,"hidden":false,"mode":"ojs"},{"id":681,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":688,"value":"md`### Breakpoints`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":101,"value":"md`### Containers`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":699,"value":"html`\n

\n.container\n

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

\n.container-fluid\n

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

\n.container\n

\n .col\n

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

\n.container\n

\n .col\n

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

\n.container-fluid\n

\n .col\n

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

\n .container\n

\n .col-sm\n

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

\n .container-fluid\n

\n .col-sm\n

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

\n .container\n

\n .col-md\n

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

\n .container-fluid\n

\n .col-md\n

\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":115,"value":"md`##### Setting one column width\nThe rest will resize around it\n`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":167,"value":"md`##### Variable with content\n`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":182,"value":"md`#### Responsive classes`","pinned":false,"hidden":false,"mode":"ojs"},{"id":205,"value":"md`##### All breakpoints`","pinned":false,"hidden":false,"mode":"ojs"},{"id":214,"value":"html`\n

\n .container\n

.col-sm-8

.col-sm-4

.col-sm

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

\n .container\n

col-sm-8

col-sm-4

col-sm

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

\n .container\n

col-md-8

col-md-4

col-md

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

\n .container-fuid\n

col-lg-8

col-lg-4

col-lg

\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":231,"value":"md`##### Mix and match`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":250,"value":"md`### Columns\nhttps://getbootstrap.com/docs/4.1/layout/grid/#alignment\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":252,"value":"md`#### Alignment`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"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"},{"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"},{"id":304,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":325,"value":"md`##### No gutters?\n`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"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"},{"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"},{"id":349,"value":"md`#### Reordering\n`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":369,"value":"md`#### Offsetting columns\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":372,"value":"md`##### Via offset classes\n`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":374,"value":"md`##### Via margins\n`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":455,"value":"md`\n---\n\n# Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":10,"value":"// https://getbootstrap.com/docs/4.1/getting-started/introduction/#css\nhtml`css `","pinned":true,"hidden":false,"mode":"ojs"},{"id":28,"value":"bootstrap = require('bootstrap')","pinned":false,"hidden":false,"mode":"ojs"},{"id":59,"value":"//bootstrap.version","pinned":true,"hidden":false,"mode":"ojs"},{"id":665,"value":"import { toc } from \"@bryangingechen/toc\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":65,"value":"style = html`\n\n`","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}