How to put a div under another div?

I'm trying to put a form under an h1, but they're next to each other as if they were in separate columns. Here's the html:

<div class="container">
      <div class="row">

        <div class="col-sm">
        </div>

        <div class="col-sm d-flex justify-content-center col-sm-8 mt-5">
          <div><h1>Text &#128075;</h1></div>

          <div>
            <form>
              <div class="form-group">
                <label for="exampleInputEmail1">Email address</label>
                <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email" />
                <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
              </div>
              <button type="submit" class="btn btn-primary">Submit</button>
            </form>
          </div>

        </div>

        <div class="col-sm">
        </div>

      </div>
    </div>

(I'm using bootstrap)