Modal

Modals can be used to create dialog boxes, popovers and more.

(Requires Javascript)

The div with class "modal-bg" should be treated as a container. Anything you put inside it will appear at the center of the screen. In the code snippet below a simple text card is used for demonstration purposes.

          
            <div class="modal-bg" style="display: none">
              <div class="text-card relative">
                <h3 class="mb-2">Modal</h3>
                <p>
                  Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in
                  laying out print, graphic or web designs. The passage is attributed to an
                  unknown typesetter in the 15th century who is thought to have scrambled
                  parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen
                  book.
                </p>
                <button class="btn btn-danger mt-3 btn-close">Close</button>
              </div>
            </div>