Bootstrap: Как я могу поставить разрыв строки между текстовой областью и кнопкой?

Question

Это страница начальной загрузки

<div id="cover-caption">
<div id="container" class="container-fluid">
<div class="row d-flex">
<div class="col-lg-10 offset-sm-1 text-center"><br>
<h1 class ="font-weight-bold">Classes</h1>
<div class="info-form">
<form action="" class="form-inline justify-content-center">
<div class="form-group">
<input type="text" class="form-control" placeholder="Class Name">
</div><br>
<div class="form-group">
<input type="text" class="form-control" placeholder="Title">
</div><br>
<div class="form-group">
<textarea type="text" class="form-control" placeholder="Notes"></textarea>
</div>
<button type="submit" class="btn btn-warning">Submit</button>
</form>
</div>
<br>
</div>
</div>
</div>
</div>
</div>

Вот мой CSS:

#cover {
  background: #222 url('') center center no-repeat;
  background-size: cover;
  height: 100%;
  text-align: center;
  display: flex;
  align-items: center;
 }

 #cover-caption {
 width: 100%;
 }

Я хочу поставить разрыв строки между текстовой областью и кнопкой, и <br> не работает. Может кто-нибудь объяснить, почему и помочь мне исправить это

Answer 1

Я наконец понял вашу проблему.

Вы позволяете загрузочной форме CSS переопределить вашу кнопку. Вам не нужно ничего менять, просто поместите кнопку за пределами формы.

<form action="" class="form-inline justify-content-center">
  <div class="form-group">
    <input type="text" class="form-control" placeholder="Class Name">
  </div><br>
  <div class="form-group">
    <input type="text" class="form-control" placeholder="Title">
  </div><br>
  <div class="form-group">
    <textarea type="text" class="form-control" placeholder="Notes"></textarea>
  </div>
</form>
<button type="submit" class="btn btn-warning">Submit</button>

Answer 2

Вы ищете <hr>? или просто <br><br>?

Или вы можете поставить style="padding-top: 10px;" на кнопку ...

Хорошего дня.

EDIT:

удален встроенный класс формы из тега формы, заменен на span (вам нужно исправить центрирование):

<div id="cover-caption">
        <div id="container" class="container-fluid">
            <div class="row d-flex">
                <div class="col-lg-10 offset-sm-1 text-center">
                    <br>
                    <h1 class="font-weight-bold">Classes</h1>
                    <div class="info-form">
                        <form action="">
                            <span class="form-inline justify-content-center">
                                <div class="form-group">
                                    <input type="text" class="form-control" placeholder="Class Name">
                                </div>
                                <br>
                                <div class="form-group">
                                    <input type="text" class="form-control" placeholder="Title">
                                </div>
                                <br>
                                <div class="form-group">
                                    <textarea type="text" class="form-control" placeholder="Notes"></textarea>
                                </div>
                            </span>
                            <button type="submit" class="btn btn-warning">Submit</button>
                        </form>
                    </div>
                    <br>
                </div>
            </div>
        </div>
    </div>
</div>