All demos

Containers

A container holds regions, and every region is an ordinary one: rows, columns, content areas and elements nest inside it exactly as they do at the top level. The five buttons in the toolbar add a tabs container, an accordion, a popup, an offcanvas, a carousel and a card — tabs, accordion and carousel hold a pane each, the others hold one region.

While editing, a popup is unfolded in place and an accordion opens and closes from its headers as it will on the page — what you leave open here is what the authored page opens with. Bootstrap's own JS is never asked to do any of it, so there is no backdrop and no focus trap to fight with. Double click a tab or item label to rename it, and a card’s header and footer the same way. The offcanvas under the popup is the same panel unfolded, and its gear says where it comes from and from which breakpoint it is plain content. The row after it shows two levels: tabs inside an accordion item. A tabs container's gear has a Tabs section for its variant - tabs, pills or underline, full width, alignment, and vertical from a breakpoint up - and the row after has two of them. The last row is a carousel: one slide shows at a time, the arrows in its drawer move between them, and the gear has a Carousel section for fade, autoplay and the rest of Bootstrap's options, and a slide’s own gear has its interval.


            

The first tab, with an ordinary editable region in it.

The second tab.

A trigger the host owns, anywhere in the canvas: open the same popup. Grid editor leaves the markup alone and writes Bootstrap's attributes onto it in the output.

Filters

An offcanvas slides in from the right, over the page.

A card, whose body is one region

A card holds no panes, so it is the plainest container there is: a header, this region, and a footer if you want one.

The region is ordinary, so it takes rows and columns of its own — these two, for instance.

An accordion item, open in the authored page.

Tabs inside an accordion item: two levels, which is as deep as the examples go.

The editor does not police depth; the examples stop here.

Pills, vertical from tablet up: open the container’s gear and look in Tabs.

On a phone the pills are a row above the panes.

Underline, filling the width.

The second.

The third.