The Framework Code

File List

{% set fwdom = TRUE %}
{% set usebootbox = FALSE %}
{% set usejquery = FALSE %}

{% extends '@content/page.twig' %}

{% block setup %}
    var toast = new bootstrap.Toast(document.getElementById('ext'), {});
{% endblock setup %}

{% block onload %}
    document.getElementById('alert').addEventListener('click', function(){
        toast.show();
    })
{% endblock onload %}

{% block headerbody %}
    <h1 class="text-center">Header</h1>
{% endblock headerbody %}

{% block main %}
    <section class="row">
        <aside class="col bg-light">
            <p>Left Column</p>
        </aside>
        <article class="col-md-8">
            <div class="jumbotron">
                This is the middle column
            </div>
            <button id="alert" class="btn btn-lg btn-info" type="button">Alert</button>
        </article>
        <aside id="rightbar" class="col bg-light">
            <p>Right Column</p>
        </aside>
    </section>
    <div class="toast-container position-absolute p-3 top-50 end-0" id="toastPlacement">
        <div class="toast" id="ext" role="alert" aria-live="assertive" aria-atomic="true">
            <div class="toast-header">
                <strong class="me-auto">Alert!</strong>
                <small>Hello World</small>
                <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
            </div>
            <div class="toast-body">
                Hello, world! This is a Bootstrap toast message.
            </div>
        </div>
    </div>
{% endblock main %}

{% block footer %}
    <section class="col-md-12">
        <p class="text-center">Footer</p>
    </section>
{% endblock footer %}