Skip to main content

Bootstrap 5 Dark ModeImproved in 5.0+

The following example assumes you're including necessary Bootstrap 5.3 JS and CSS as well as the data-bs-theme="dark" attribute to a parent element (such as html or an outer div tag). You can place the additional CSS and JS inside the formatting template or add to your site's CSS / JS files.

Dark Mode relies on features newly available in the Bootstrap 5.3 version in order to work.

Preview​

Video: Preview of Formatting Template Examples

Templates​

Please note that you will need to include the data-bs-theme="dark" attribute to a parent element, such as <html> or an outer <div> tag.

/bootstrap-5-dark/
{# CSS overrides #}
{% set cssPath = view.assetManager.publishedUrl('@freeform-formatting-templates/bootstrap-5-dark/_main.css', true) %}
{% do view.registerCssFile(cssPath) %}

{# JS overrides #}
{% set jsPath = view.assetManager.publishedUrl('@freeform-formatting-templates/bootstrap-5-dark/_main.js', true) %}
{% do view.registerJsFile(jsPath) %}

{% import "freeform/_templates/formatting/bootstrap-5-dark/_row.twig" as rowMacro %}

{# Render the opening form tag #}
{{ form.renderTag({
    attributes: {
        form: { class: "freeform-form", "data-freeform-bootstrap-dark": true },
        row: { class: "row" },
        success: { class: "alert alert-success" },
        errors: { class: "alert alert-danger" },
        novalidate: true,
    },
    buttons: {
        attributes: {
            submit: { class: "btn btn-primary" },
            back: { class: "btn btn-secondary" },
            save: { class: "btn btn-primary" },
        },
    },
    fields: {
        "@global": {
            attributes: {
                container: { class: "mb-3 col-12" },
                input: {
                    class: "form-control bg-dark-subtle text-white"
                },
                label: { class: "mb-1" },
                instructions: { class: "form-text text-muted mt-n1 mb-1" },
                error: { class: "list-unstyled m-0 fst-italic text-danger" },
            },
        },
        ":required": {
            attributes: {
                label: { "+class": "required" },
            },
        },
        ":errors": {
            attributes: {
                input: { "+class": "is-invalid" },
            },
        },
        "@group": {
            attributes: {
                label: { "+class": "group-label" },
            },
        },
        "@checkbox" : {
            attributes: {
                input: { "=class": "form-check-input checkbox bg-dark-subtle" },
                label: { "+class": "form-check-label text-white" },
            },
        },
        "@dropdown" : {
            attributes: {
                input: { "+class": "form-select bg-dark-subtle text-white" },
            },
        },
        "@file" : {
            attributes: {
                input: { "+class": "form-control-file" },
            },
        },
        "@signature": {
            attributes: {
                input: {
                    "-class": "form-control",
                    "+class": "btn btn-light"
                },
            },
        },
        "@stripe": {
            attributes: {
                input: {
                    "-class": "form-control bg-dark-subtle",
                },
            },
        },
    },
}) }}

{# Success and error message handling for non-AJAX forms #}
{% if not form.settings.ajax %}
    {% if form.submittedSuccessfully %}
        <div{{ form.attributes.success|raw }}>
            <p>{{ form.settings.successMessage | t('freeform') }}</p>
        </div>
    {% endif %}
    {% if form.hasErrors %}
        <div{{ form.attributes.errors|raw }}>
            <p>{{ form.settings.errorMessage | t('freeform') }}</p>

            {% if form.errors|length %}
                <ul class="mb-0">
                    {% for error in form.errors %}
                        <li>{{ error }}</li>
                    {% endfor %}
                </ul>
            {% endif %}
        </div>
    {% endif %}
{% endif %}

{# Render page tabs if multi-page #}
{% if form.pages|length > 1 %}
    <ul class="nav nav-tabs mb-4">
        {% for page in form.pages %}
            <li class="nav-item">
                <span class="nav-link{{ form.currentPage.index == page.index ? ' fw-bold active' : ' disabled' }}">
                    {{ page.label }}
                </span>
            </li>
        {% endfor %}
    </ul>
{% endif %}

{# Display form field rows and columns #}
{{ rowMacro.render(form.rows, form) }}

{# Render the closing form tag #}
{{ form.renderClosingTag }}
/bootstrap-5-dark/fields/
{{ field.render }}

The following CDN links for Bootstrap 5 are for v5.3.1, which may no longer be the latest version. Please see official Bootstrap 5 documentation for latest versions and CDN links.

<!-- Latest compiled and minified CSS -->
<link
  href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
  rel="stylesheet"
  integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9"
  crossorigin="anonymous"
/>

<!-- Latest compiled and minified JavaScript -->
<script
  src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
  integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm"
  crossorigin="anonymous"
></script>

Live Demo​

The demo below is a live demo site that shows most of what the Demo Templates include (some sections and data has been limited).

Page Feedback