A lightweight, flexible component that can optionally extend the entire viewport to showcase key content on your site.

This feature is available only since version 4.2.0

Basic example

Default behavior show the same content as previous version 4.1.0

That meens, with only jumbotron attribute defined, we got such output :title: or :doctitle: for header, and :description: for sub-header.

Jumbotron Bootstrap Component

http://getbootstrap.com/components/#jumbotron

Html code produced is :

<div class="jumbotron">
    <h1>Jumbotron Bootstrap Component</h1>
    <p class="lead">http://getbootstrap.com/components/#jumbotron</p>
</div>

Common Jumbotron

If you want to display the same jumbotron content on all pages, use both jumbotron and jumboinfo1 attributes and put the common content into a jumboinfo.html file.

E.g: Content of a jumboinfo.html file

<h1>Hello, world!</h1>
<p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>

We got such result :

Hello, world!

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

Specific Jumbotron

If you want to display a specific jumbotron content on one page, use both jumbotron and jumboinfo attributes and put the specific content into a <filename>-jumboinfo.html file, where <filename> is the docname of your page.

See
[http://asciidoc.org/userguide.html#X60]
for docname attribute.

E.g: Content of a <filename>-jumboinfo.html file

<h1>Hello, world!</h1>
<p><a class="btn btn-primary btn-lg" role="button">Learn more</a></p>

We got such result :

Hello, world!

Learn more

Combined Common and Specific Jumbotron

If you want to display a jumbotron that include both the common and the specific content, use both jumbotron and jumboinfo2 attributes and put the specific content into a <filename>-jumboinfo.html file, where <filename> is the docname of your page.

See
[http://asciidoc.org/userguide.html#X60]
for docname attribute.

E.g: Content of a jumboinfo.html file

<h1>Hello, world!</h1>
<p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>

E.g: Content of a <filename>-jumboinfo.html file

<p><a class="btn btn-primary btn-lg" role="button">Learn more</a></p>

We got such result :

Hello, world!

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

Learn more