Bootstrap Playground | Part 1: Layouts / Carmen Torrecillas

html`

<small>.container</small>

</div>

`

html`

<small>.container-fluid</small>

</div>

`

html`

<small>.container</small>

.col

</div>

.col

</div>

.col

</div>

`

html`

<small>.container</small>

.col

</div>

.col

</div>

.col

</div>

.col

</div>

`

html`

<small>.container-fluid</small>

.col

</div>

.col

</div>

.col

</div>

`

html`

<small>.container</small>

.col-sm

</div>

.col-sm

</div>

.col-sm

</div>

`

html`

<small>.container-fluid</small>

.col-sm

</div>

.col-sm

</div>

.col-sm

</div>

`

html`

<small>.container</small>

.col-md

</div>

.col-md

</div>

.col-md

</div>

`

html`

<small>.container-fluid</small>

.col-md

</div>

.col-md

</div>

.col-md

</div>

`

html`

<small>.container-fluid</small>

.col-md

</div>

.col-6

</div>

.col-md

</div>

`

html`

<small>.container-fluid</small>

.col-md

</div>

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

</div>

.col-md

</div>

`

html`

<small>.container-fluid</small>

.col

</div>

.col-auto (variable as well)

</div>

.col

</div>

`

html`

<small>.container</small>

</div>

</div>

`

html`

<small>.container</small>

</div>

</div>

`

html`

<small>.container</small>

</div>

</div>

`

html`

<small>.container-fuid</small>

</div>

</div>

`

html`

<small>.container</small></br>

<small>Stack the columns on mobile by making one full-width and the other half-width</small>

</div>

<small>Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop</small>

</div>

<small>Columns are always 50% wide, on mobile and desktop</small>

</div>

`

html`

<small>.container</small></br>

<small>.row .align-items-start</small>

.col

</div>

.col

</div>

.col

</div>

<small>.row .align-items-center</small>

.col

</div>

.col

</div>

.col

</div>

<small>.row .align-items-end/small>

.col

</div>

.col

</div>

.col

</div>

`

html`

.col .align-self-start 👆🏻

</div>

.col .align-self-center 👈🏻

</div>

.col .align-self-end 👇🏻

</div>

`

html`

<small>.container</small></br>

<small style="display:block; margin-top:2rem;">.row .justify-content</small>

.col-4

</div>

.col-4

</div>

<small style="display:block; text-align:center; margin-top:2rem">.row .justify-content-center</small>

.col-4

</div>

.col-4

</div>

<small style="display:block; text-align:right; margin-top:2rem">.row .justify-content-end</small>

.col-4

</div>

.col-4

</div>

<small style="display:block; text-align:center; margin-top:2rem">.row .justify-content-around</small>

.col-4

</div>

.col-4

</div>

<small style="display:block; text-align:center; margin-top:2rem">.row .justify-content-between</small>

.col-4

</div>

.col-4

</div>

`

html`

</div>

`

html`

</div>

`

md`##### Column breaks

Para romper las columnas, necesitamos entre medias un elemento que lo fuerce tal que así:

'<div class="w-100"></div>'

`

html`

</div>

`

html`

</div>

`

html`

<small>Using anything + .order-12 + .order-1</small>

.col (First, but unordered)

</div>

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

</div>

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

</div>

<small>Using .order-last + anything + .order-first</small>

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

</div>

.col (Second, but unordered)

</div>

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

</div>

`

html`

<div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>

</div>

<small>.row .justify-content-between</small>

</div>

<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>

</div>

<div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>

</div>

`

html`

</div>

</div>

</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">`

//bootstrap.version

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;

}

</style>

`

Purpose-built for displays of data