Bootstrap 4 Kitchensink Form

<div class="container">
  <div class="row mx-0 justify-content-center">
    <div class="col-md-7 col-lg-5 px-lg-2 col-xl-4 px-xl-0">
      <form
        method="POST"
        class="w-100 rounded p-4 border bg-white"
        action="https://herotofu.com/start"
        enctype="multipart/form-data"
      >
        <label class="d-block mb-4">
          <span class="d-block mb-2">Your name</span>
          <input
            name="name"
            type="text"
            class="form-control"
            placeholder="Joe Bloggs"
          />
        </label>

        <label class="d-block mb-4">
          <span class="d-block mb-2">Email address</span>
          <input
            name="email"
            type="email"
            class="form-control"
            placeholder="joe.bloggs@example.com"
          />
        </label>

        <div class="mb-4">
          <label class="d-block mb-2">Your photo</label>
          <div class="form-control h-auto">
            <input name="photo" type="file" class="form-control-file" />
          </div>
        </div>

        <label class="d-block mb-4">
          <span class="d-block mb-2">When is your birthday?</span>
          <input name="birthday" type="date" class="form-control" />
        </label>

        <label class="d-block mb-4">
          <span class="d-block mb-2"
            >What kind of present you expect this year?</span
          >
          <select name="present" class="custom-select">
            <option>Chocolate cake</option>
            <option>Dancing cat</option>
            <option>Custom meme about me</option>
            <option>Zoom backgrounds for the rest of my life</option>
          </select>
        </label>

        <label class="d-block mb-4">
          <span class="d-block mb-2">Interesting... Please tell more</span>
          <textarea
            name="message"
            class="form-control"
            rows="3"
            placeholder="Mmmm... cake."
          ></textarea>
        </label>

        <div class="mb-4">
          <div>
            <label class="custom-control custom-radio">
              <input
                name="season"
                value="summer"
                type="radio"
                class="custom-control-input"
                checked
              />
              <span class="d-inline-block mt-1 custom-control-label"
                >I like summer</span
              >
            </label>
          </div>

          <div>
            <label class="custom-control custom-radio">
              <input
                name="season"
                value="winter"
                type="radio"
                class="custom-control-input"
              />
              <span class="d-inline-block mt-1 custom-control-label"
                >I'm more into winter</span
              >
            </label>
          </div>
        </div>

        <div class="mb-4">
          <label class="d-block custom-control custom-checkbox">
            <input
              name="offers"
              value="yes"
              type="checkbox"
              class="custom-control-input"
            />
            <span class="d-inline-block mt-2 custom-control-label"
              >Email me news and special offers</span
            >
          </label>
        </div>

        <div class="mb-3">
          <button type="submit" class="btn btn-primary px-3">
            Regular Button
          </button>
        </div>

        <div class="d-block text-right">
          <div class="small">
            by
            <a
              href="https://herotofu.com/start"
              class="text-dark"
              target="_blank"
              >HeroTofu</a
            >
          </div>
        </div>
      </form>
    </div>
  </div>
</div>

/* The following CSS is used only for the preview,
   please don't copy it to your production code */
body { padding: 2rem 0; }