Admonition NOTE block

NOTE: This is an example note.

[NOTE]
Alternatively, you can specify the paragraph admonition style explicitly using an AttributeList element.

Renders:

Note
 This is an example note.
Note
 Alternatively, you can specify the paragraph admonition style explicitly using an AttributeList element.

Admonition IMPORTANT block

IMPORTANT: This is another example more important.

Renders:

Important
 This is another example more important.

Admonition CAUTION block

CAUTION: This is another example important but less.

Renders:

Caution
 This is another example important but less.

Admonition WARNING block

WARNING: This is a warning example.

Renders:

Warning
 This is a warning example.

Admonition NOTE custom icon block

[icon="./images/icons/example.png"]
NOTE: What lovely war.

Renders:

Note
 What lovely war.

Admonition TIP block

[TIP]
.A TIP admonition block
=====================================================================
Qui in magna commodo, est labitur dolorum an. Est ne magna primis
adolescens.

. Fusce euismod commodo velit.
. Vivamus fringilla mi eu lacus.
  .. Fusce euismod commodo velit.
  .. Vivamus fringilla mi eu lacus.
. Donec eget arcu bibendum
  nunc consequat lobortis.
=====================================================================

Renders:

Tip
A TIP admonition block

Qui in magna commodo, est labitur dolorum an. Est ne magna primis adolescens.

  1. Fusce euismod commodo velit.

  2. Vivamus fringilla mi eu lacus.

    1. Fusce euismod commodo velit.

    2. Vivamus fringilla mi eu lacus.

  3. Donec eget arcu bibendum nunc consequat lobortis.

Learn More

Behind the scene

Have a look in the LESS source file less/asciidoc-bootstrap.less, you should have at least this line activated
[https://raw.github.com/llaville/asciidoc-bootstrap-backend/v4/less/asciidoc/admonition-text.less]
 :

@import "asciidoc/admonition-text.less";

And this other line deactivated (if you don’t want to use Icons Font feature) :

@import "asciidoc/admonition-iconsfont.less";

If you want to modify the default render, either change the less/asciidoc/admonition-text.less source file, and rebuild the asciidoc-bootstrap.css file, or copy the CSS rules in a new CSS file (free name), and build your page ( AsciiDoc ) with attribute stylesheet.

Important
 Your custom stylesheet MUST be located in the {stylesdir}.

E.g:

$ asciidoc.py
  -b bootstrap
  -a linkcss
  -a stylesdir=./stylesheets
  -a scriptsdir=./javascripts
  -a theme=flatly
  -a stylesheet=admonition-text.css
  -a navbar=fixed
  -a totop
  {docfile}
Content of admonition-text.css
.admonition {
    /* bootstrap 3 .alert style */
    padding: 15px;
    margin-bottom: 21px;
    border: 2px solid transparent;
    border-radius: 4px;
}
.note {
    border-color: olive;
}
.tip {
    border-color: blue;
}
.warning {
    border-color: yellow;
}
.caution {
    border-color: fuchsia;
}
.important {
    border-color: red;
}
.note .icon {
    color: olive;
}
.tip .icon {
    color: blue;
}
.warning .icon {
    color: yellow;
}
.caution .icon {
    color: fuchsia;
}
.important .icon {
    color: red;
}
.admonition .icon {
    float: none;
    font-size: 1.33em;
}
.admonition .icon .title {
    margin: 0;
    text-transform: uppercase;
    background-color: #DDD;
    padding-left: 1em;
}
.admonition .content {
    padding-left: 0;
    padding-top: 0.5em;
    margin-left: 0;
    border-left: 0;
    border-top: 0;
    min-height: 0;
}

See results in live with :