Sidebar Blocks

A sidebar is a short piece of text presented outside the narrative flow of the main text. The sidebar is normally presented inside a bordered box to set it apart from the main text.

.An Example Sidebar
************************************************
Any AsciiDoc SectionBody element (apart from
SidebarBlocks) can be placed inside a sidebar.
************************************************

Renders:

An Example Sidebar

Any AsciiDoc SectionBody element (apart from SidebarBlocks) can be placed inside a sidebar.

You may also used the attribute role to control padding and rounded corners.

With well-sm role:

.An Example Sidebar
[role="well-sm"]
****
Any AsciiDoc SectionBody element (apart from
SidebarBlocks) can be placed inside a sidebar.
****

Renders:

An Example Sidebar

Any AsciiDoc SectionBody element (apart from SidebarBlocks) can be placed inside a sidebar.

With well-lg role:

.An Example Sidebar
[role="well-lg"]
****
Any AsciiDoc SectionBody element (apart from
SidebarBlocks) can be placed inside a sidebar.
****

Renders:

An Example Sidebar

Any AsciiDoc SectionBody element (apart from SidebarBlocks) can be placed inside a sidebar.

Open Blocks

Open blocks are special: they are used to generate document abstracts, book part introductions and more.

Previous version 3, used it to simulate multi columns. Version 4 dropped this behavior. Don’t be afraid, this feature is still possible using the standard Bootstrap classes like .col-md-* and so on.

Panels

First open block structure is used to implement the Bootstrap Panel Component.

Example 1. With primary contextual state class

Panel title

Panel content

Example 2. With success contextual state class

Panel title

Panel content

Example 3. With warning contextual state class

Panel title

Panel content

Learn how AsciiDoc-Bootstrap backend implements this feature.

Alerts

Second open block structure is used to implement the Bootstrap Alert Component.

Example 4. With info contextual state class

Heads up!

This alert needs your attention, but it’s not super important.

Example 5. With success contextual state class

Well done!

You successfully read this important alert message.

Example 6. With warning contextual state class

Warning!

Better check yourself, you’re not looking too good.

Learn how AsciiDoc-Bootstrap backend implements this feature.