Bootstrap 4

The following example assumes you're including necessary Bootstrap 4 JS and CSS. You can keep the inline CSS inside the formatting template or move it to your page's <head></head> tags of course.
<style>label.required:after{content:"*";color:#d00;margin-left:5px}ul.errors{display:block!important}.is-invalid{color:#dc3545}.submit-align-left{text-align:left}.submit-align-right{text-align:right}.submit-align-center{text-align:center}.submit-align-center button:not(:first-of-type),.submit-align-left button:not(:first-of-type),.submit-align-right button:not(:first-of-type){margin-left:5px}.submit-align-spread button:first-child{float:left}.submit-align-spread button:last-child{float:right}</style>

{{ form.renderTag() }}

{% if form.pages|length > 1 %}
  <ul class="nav nav-tabs">
    {% for page in form.pages %}
      <li class="{{ form.currentPage.index == page.index ? "active" : "disabled" }}">
        {% if form.currentPage.index == page.index %}
          <a href="javascript:;">{{ page.label }}</a>
        {% else %}
          <a href="javascript:;">{{ page.label }}</a>
        {% endif %}
      </li>
    {% endfor %}
  </ul>
{% endif %}

{% if form.hasErrors %}
  <div class="alert alert-danger">
    {{ "Error! Please review the form and try submitting again."|t('freeform') }}

    {% if form.errors|length %}
      <ul>
        {% for error in form.errors %}
          <li>{{ error }}</li>
        {% endfor %}
      </ul>
    {% endif %}
  </div>
{% endif %}

{% for row in form %}
  <div class="row {{ form.customAttributes.rowClass }}">
    {% for field in row %}
      {% set width = (12 / (row|length)) %}

      {% set isCheckbox = field.type in ["checkbox","mailing_list"] %}

      {% set columnClass = "form-group" %}
      {% set columnClass = columnClass ~ form.customAttributes.columnClass %}
      {% set columnClass = columnClass ~ " col-sm-" ~ width ~ " col-12" %}

      {% set class = "form-control" ~ (field.hasErrors ? " is-invalid") %}
      {% if field.type == "file" %}
        {% set class = "form-control-file" ~ (field.hasErrors ? " is-invalid") %}
      {% elseif isCheckbox %}
        {% set class = "checkbox" %}
      {% endif %}

      {% set labelClass = (field.required ? " required" : "") %}
      {% set errorClass = "invalid-feedback" %}
      {% set instructionClass = "form-text text-muted" %}

      {% if field.type == "submit" %}
        {% set columnClass = columnClass ~ " submit-align-" ~ field.position %}
      {% endif %}

      <div class="{{ columnClass }}"{{ field.rulesHtmlData }}>
        {% if field.type == "checkbox_group" %}

          {{ field.renderLabel({
            labelClass: labelClass,
            instructionsClass: instructionClass,
            errorClass: errorClass,
          }) }}

          {% for index, option in field.options %}
            <div class="form-check">
              <input type="checkbox"
                   name="{{ field.handle }}[]"
                   value="{{ option.value }}"
                   id="{{ field.idAttribute }}-{{ index }}"
                   class="form-check-input {{ class }}"
                  {{ option.checked ? "checked" : "" }}
              />

              <label class="form-check-label" for="{{ field.idAttribute }}-{{ index }}">
                {{ option.label|t|raw }}
              </label>
            </div>
          {% endfor %}

          {{ field.renderInstructions() }}
          {{ field.renderErrors({ errorClass: errorClass }) }}

        {% elseif field.type == "radio_group" %}

          {{ field.renderLabel({
            labelClass: labelClass,
            instructionsClass: instructionClass,
            errorClass: errorClass,
          }) }}

          {% for index, option in field.options %}
            <div class="form-check">
              <input type="radio"
                   name="{{ field.handle }}"
                   value="{{ option.value }}"
                   id="{{ field.idAttribute }}-{{ index }}"
                   class="form-check-input {{ class }}"
                  {{ option.checked ? "checked" : "" }}
              />
              <label class="form-check-label" for="{{ field.idAttribute }}-{{ index }}">
                {{ option.label|t|raw }}
              </label>
            </div>
          {% endfor %}

          {{ field.renderInstructions() }}
          {{ field.renderErrors() }}

        {% elseif field.type == "dynamic_recipients" and (field.showAsRadio or field.showAsCheckboxes) %}

          {{ field.renderLabel({
            labelClass: labelClass,
            instructionsClass: instructionClass,
            errorClass: errorClass,
          }) }}

          {% for index, option in field.options %}
            <div class="form-check">
              <input type="{{ field.showAsRadio ? "radio" : "checkbox" }}"
                   name="{{ field.handle }}[]"
                   value="{{ loop.index0 }}"
                   class="form-check-input {{ class }}"
                   id="{{ field.idAttribute }}-{{ index }}"
                  {{ option.checked ? "checked" : "" }}
              />

              <label class="form-check-label" for="{{ field.idAttribute }}-{{ index }}">
                {{ option.label|t|raw }}
              </label>
            </div>
          {% endfor %}

          {{ field.renderInstructions() }}
          {{ field.renderErrors() }}

        {% elseif field.type in ["checkbox", "mailing_list"] %}

          <div class="form-check">
            {{ field.renderInput({ class: class ~ " form-check-input" }) }}
            {{ field.renderLabel({ labelClass: "form-check-label" ~ (field.hasErrors ? " is-invalid") }) }}
            {{ field.renderErrors({ errorClass: errorClass }) }}
          </div>

        {% elseif field.type == "submit" %}

          {{ field.render({ class: "btn btn-primary" }) }}

        {% elseif field.type == "cc_details" %}

          {# FOR FREEFORM PAYMENTS #}

          {{ field.renderLabel({
            labelClass: (field.required ? " required" : ""),
            instructionsClass: "help-block",
            errorClass: "help-block",
          }) }}

          {% for layoutRow in field.layoutRows %}
            <div class="row {{ form.customAttributes.rowClass }}">
              {% for layoutField in layoutRow %}
                {% set layoutWidth = (12 / (layoutRow|length)) %}
                {% set columnClass = columnClass|replace(' col-sm-' ~ width) %}
                {% set columnClass = columnClass ~ " col-sm-" ~ layoutWidth %}
                <div class="{{ columnClass }}">
                  {{ layoutField.render({
                    class: isCheckbox ? "checkbox" : "form-control",
                    instructionsClass: "help-block",
                    instructionsBelowField: true,
                    labelClass: (layoutField.required ? " required" : ""),
                    errorClass: "help-block",
                  }) }}
                </div>
              {% endfor %}
            </div>
          {% endfor %}

          {{ field.renderInput({
            instructionsClass: "help-block",
            instructionsBelowField: true,
            labelClass: (field.required ? " required" : ""),
            errorClass: "help-block",
          }) }}

          {{ field.renderInstructions }}
          {{ field.renderErrors }}

        {% else %}

          {{ field.render({
            class: class,
            labelClass: labelClass,
            instructionsClass: instructionClass,
            instructionsBelowField: true,
            errorClass: errorClass,
          }) }}

        {% endif %}
      </div>
    {% endfor %}
  </div>
{% endfor %}


{{ form.renderClosingTag }}
​Bootstrap 4

Bootstrap 4
