Forms

<form class="mx-0" style="max-width: 420px" onsubmit="return false">
  <label class="form-label mf-label" for="street">Straße und Hausnummer</label>
  <input class="form-control mb-3" id="street" value="Venloer Str. 12">

  <label class="form-label mf-label" for="time">Lieferzeit</label>
  <select class="form-select mb-3" id="time">
    <option>So schnell wie möglich</option>
    <option>18:30</option>
  </select>

  <label class="form-label mf-label" for="note">Hinweis für den Fahrer</label>
  <textarea class="form-control mb-1" id="note" rows="2" aria-describedby="note-help"></textarea>
  <p class="mf-caption text-body-secondary mb-3" id="note-help">Zum Beispiel: Klingel defekt, bitte anrufen.</p>

  <div class="form-check mb-2">
    <input class="form-check-input" type="checkbox" id="contactless" checked>
    <label class="form-check-label" for="contactless">Kontaktlos liefern</label>
  </div>
  <div class="form-check form-switch mb-4">
    <input class="form-check-input" type="checkbox" role="switch" id="cutlery">
    <label class="form-check-label" for="cutlery">Besteck mitschicken</label>
  </div>

  <button class="btn btn-primary w-100">Bestellen</button>
</form>

<div style="max-width: 420px">
  <label class="form-label mf-label" for="zip">Postleitzahl</label>
  <input class="form-control is-invalid" id="zip" value="5067" aria-describedby="zip-error" aria-invalid="true">
  <p class="invalid-feedback" id="zip-error">Das hat nicht geklappt. Prüf bitte deine Postleitzahl.</p>
</div>