31:T521,html`

A simple primary alert with an example link. Give it a click if you like.

A simple secondary alert with an example link. Give it a click if you like.

A simple success alert with an example link. Give it a click if you like.

A simple danger alert with an example link. Give it a click if you like.

A simple warning alert with an example link. Give it a click if you like.

A simple info alert with an example link. Give it a click if you like.

A simple light alert with an example link. Give it a click if you like.

A simple dark alert with an example link. Give it a click if you like.

`32:T982,

33:Tb39,

34:Tb3b,

35:Td38,

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

36:T6ef,Previo al input, un div con .input-group-prepend

Posteriormente al input, un div con .input-group-append

@example.com

Previo al input, un div con .input-group-prepend
Your vanity URL

https://example.com/users/

Previo al input, un div con .input-group-prepend + posteriormente, un div con .input-group-append

.00

Previo al input, un div con .input-group-prepend

With textarea

37:T648,38:[] 2f:{"title":"Bootstrap Playground | Part 2: Components","cells":[{"id":0,"value":"md`# Bootstrap Playground | Part 2: Components\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"md`\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":57,"value":"toc(\"h1, h2, h3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":60,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":122,"value":"md`### Alerts\nhttps://getbootstrap.com/docs/4.1/components/alerts/\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":126,"value":"html`\n

\n A simple primary alert—check it out!\n

\n A simple secondary alert—check it out!\n

\n A simple success alert—check it out!\n

\n A simple danger alert—check it out!\n

\n A simple warning alert—check it out!\n

\n A simple info alert—check it out!\n

\n A simple light alert—check it out!\n

\n A simple dark alert—check it out!\n

\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":129,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":132,"value":"

Well done!

Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.

Whenever you need to, be sure to use margin utilities to keep things nice and tidy.

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

\n Holy guacamole! You should check in on some of those fields below.\n \n

","pinned":true,"hidden":false,"mode":"html"},{"id":24,"value":"md`### Buttons\nhttps://getbootstrap.com/docs/4.1/components/buttons/\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"md`At Civio we have customized btns like .btn.btn-civio, .btn.btn-espanaenllamas, or .btn.btn-outline-civio, etc.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"html`\n\n\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":44,"value":"md`If using an elemento as button, we add its btn classes and need to give a role=\"button\" for a11y.`","pinned":true,"hidden":false,"mode":"ojs"},{"id":40,"value":"html`\n Link .btn .btn-primary\n\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":50,"value":"md`#### Outlines`","pinned":false,"hidden":false,"mode":"ojs"},{"id":52,"value":"html`\n\n\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":65,"value":"md`#### Sizes`","pinned":false,"hidden":false,"mode":"ojs"},{"id":68,"value":"html`\n

\n \n \n

\n\n

\n \n \n

\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":76,"value":"md`#### Disabled state`","pinned":false,"hidden":false,"mode":"ojs"},{"id":79,"value":"html`\n\"button tag with boolean attribute \"disabled\": type=\"button\" class=\"btn btn-lg btn-primary\" disabled\"
\n\n\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":89,"value":"md`#### Button group\nGroup a series of buttons together on a line or stacked vertically\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":91,"value":"html`\n

\n \n \n \n

\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":100,"value":"md`#### Nesting \n**Update**: as [Fabian Iwand](https://observablehq.com/@mootari) commented below, the Observable editor overlays the sandbox content. If the cell is unpinned and close, also the messages one, the dropdown is visible :)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":168,"value":"

\n \n \n\n

\n \n \n

","pinned":false,"hidden":false,"mode":"html"},{"id":190,"value":"### Carousel\n\nhttps://getbootstrap.com/docs/4.1/components/carousel/\n\n**Options** can be passed via JavaScript or `data-` attribues: `interval` (speed), `keyboard` (if true, keyboard events), `pause` (if true, pauses the cycling on `mouseenter` event and resumes it on `mouseleave`, `ride` (autoplays the carousel when the use cycles the first item), `wrap`\n","pinned":false,"hidden":false,"mode":"md"},{"id":439,"value":"md`#### Slides only\n\n// First example here seems NOT TO WORK within Observable\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":148,"value":"

First slide just paragraph

Second slide just paragraph

Third slide just paragraph

","pinned":false,"hidden":false,"mode":"html"},{"id":200,"value":"$32","pinned":false,"hidden":false,"mode":"html"},{"id":172,"value":"#### With controls","pinned":false,"hidden":false,"mode":"md"},{"id":144,"value":"$33","pinned":false,"hidden":false,"mode":"html"},{"id":180,"value":"#### Crossfade","pinned":false,"hidden":false,"mode":"md"},{"id":176,"value":"$34","pinned":false,"hidden":false,"mode":"html"},{"id":116,"value":"md`### Collapse elements\nToggle visibility\n\nhttps://getbootstrap.com/docs/4.1/components/collapse/\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":207,"value":"

\n \n Link with href\n \n \n

\n Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.\n

","pinned":true,"hidden":false,"mode":"html"},{"id":211,"value":"#### Accordion example","pinned":false,"hidden":false,"mode":"md"},{"id":215,"value":"$35","pinned":true,"hidden":false,"mode":"html"},{"id":218,"value":"### Dropbdowns \n\nhttps://getbootstrap.com/docs/4.1/components/dropdowns/\n\n// **Update**: working, but you need to unpin and close Observable cells :)","pinned":false,"hidden":false,"mode":"md"},{"id":228,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":233,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":267,"value":"### Forms\n\nhttps://getbootstrap.com/docs/4.1/components/forms/","pinned":false,"hidden":false,"mode":"md"},{"id":271,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":237,"value":"### Input group\n\nhttps://getbootstrap.com/docs/4.1/components/input-group/","pinned":false,"hidden":false,"mode":"md"},{"id":242,"value":"$36","pinned":true,"hidden":false,"mode":"html"},{"id":275,"value":"### List group\n\nhttps://getbootstrap.com/docs/4.1/components/list-group/","pinned":false,"hidden":false,"mode":"md"},{"id":279,"value":"

Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum at eros

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

Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum at eros

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

Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum at eros

","pinned":true,"hidden":false,"mode":"html"},{"id":291,"value":"### Modal\n// NOT WORKING here within Observable\n\nhttps://getbootstrap.com/docs/4.1/components/modal/","pinned":false,"hidden":false,"mode":"md"},{"id":295,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":299,"value":"\n\n\n\n","pinned":false,"hidden":false,"mode":"html"},{"id":306,"value":"\n\n\n\n","pinned":false,"hidden":false,"mode":"html"},{"id":312,"value":"### Navs\nhttps://getbootstrap.com/docs/4.1/components/navs/","pinned":false,"hidden":false,"mode":"md"},{"id":317,"value":"

\n Active\n
\n Link\n
\n Link\n
\n Disabled\n

","pinned":true,"hidden":false,"mode":"html"},{"id":321,"value":".nav .justify-content-center\n

\n Active\n
\n Link\n
\n Link\n
\n Disabled\n

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

\n Active\n
\n Link\n
\n Link\n
\n Disabled\n

","pinned":true,"hidden":false,"mode":"html"},{"id":335,"value":".nav .justify-content-center\n

\n Active\n
\n Link\n
\n Link\n
\n Disabled\n

","pinned":true,"hidden":false,"mode":"html"},{"id":343,"value":"### Navbar\nhttps://getbootstrap.com/docs/4.1/components/navbar/","pinned":false,"hidden":false,"mode":"md"},{"id":347,"value":"$37","pinned":true,"hidden":false,"mode":"html"},{"id":355,"value":"### Pagination\n\nhttps://getbootstrap.com/docs/4.1/components/pagination/","pinned":false,"hidden":false,"mode":"md"},{"id":359,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":367,"value":"If using \"<<\" or icons instead of Previous/Next, we need to use `aria-hidden` and `sr-only` info to assure accesibility","pinned":false,"hidden":false,"mode":"md"},{"id":363,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":382,"value":"### Scrollspy\n\nhttps://getbootstrap.com/docs/4.1/components/scrollspy/\n\nAutomatically higlight active item based on scroll position (works on list group and on nav component).\n\nIf we are spying on the body, it needs \n```\nbody {\n position: relative;\n}\n```","pinned":false,"hidden":false,"mode":"md"},{"id":390,"value":"### Tooltips\n\nhttps://getbootstrap.com/docs/4.1/components/tooltips/","pinned":false,"hidden":false,"mode":"md"},{"id":400,"value":"$$(function () {\n $('[data-toggle=\"tooltip\"]').tooltip();\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":396,"value":"\n\n\n","pinned":false,"hidden":false,"mode":"html"},{"id":465,"value":"html`\n

\n\"\n>holi\n\n

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":8,"value":"md`\n---\n\n# Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"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":15,"value":"// https://getbootstrap.com/docs/4.1/getting-started/introduction/#css\nhtml`css `","pinned":true,"hidden":false,"mode":"ojs"},{"id":17,"value":"//bootstrap = require(\"bootstrap\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":140,"value":"BootStrap4 = require(\"https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":19,"value":"import { toc } from \"@bryangingechen/toc\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"style = html`\n\n`","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W38","stdlib":"1","titling":"auto"}

Collapsible Group Item #1

Collapsible Group Item #2

Collapsible Group Item #3

Well done!

Modal title

Modal title

Modal title