Вертикальное выравнивание с Bootstrap

Question

Я хочу выровнять по вертикали 2 деления, одно в центре, а второе внизу. Также я хочу добиться этого с помощью bootstrap сетки .

Мой компонент:

.loading{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
}
.loading-data{
  border-radius: 10px;
  height:calc(100% - 100px);
  width: calc(100% - 100px);
  top: 5%;
  margin: 0 auto;
  position: relative;
  background-color: #313139;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div className="loading">
  <div className="loading-data">
    <div className="container-fluid">
      <div className="row align-items-center">
        <div className="name">Names</div>
      </div>
      <div className="row align-items-end">
        <div className="copyright">Droits</div>
        <div className="links">links</div>
      </div>
    </div>
  </div>
</div>

Текущий результат:

Что я хочу:

Answer 1

Вы ищете что-то вроде этого?

<div className="loading">
        <div className="loading-data">
         <div></div>
          <div className="row align-items-center">
            <div className="name">Names</div>
          </div>
          <div className="container-fluid">
            <div className="row align-items-end">
              <div className="copyright">Droits</div>
              <div className="links">links</div>
            </div>
          </div>
        </div>
      </div>

css

body {
  background-color: rgb(29, 32, 39);
  color: red;
  font-weight: 700;
}
.loading-data {
  border-radius: 10px;
  margin: 0 auto;
  position: relative;
  height: 100vh;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
}
.container-fluid {
  width: 100%;
}
.align-items-end {
  display: flex;
  justify-content: space-between;
}

Рабочий пример Демо