Place a button in the bottom of a column in Bootstrap-CodePudding

I am trying to place a button to the bottom of the column with no success.

I read this question so I added the d-flex, flex-column, mt-auto CSS classes but they aren't have any effect. What am I missing?

.my-200 {
  height: 400px;
  background-color: black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div >
  <div >
  </div>
  <div >
    <div >
      <div >
        <label>Title</label>
        <input name="comment" type="text"  value="">
      </div>
    </div>

    <div >
      <div >
        <button >button 1</button>
      </div>
    </div>

    <div >
      <div >
        <button >place bottom</button>
      </div>
    </div>
  </div>
  </div

CodePudding user response：

Place a row BS class selector class in the flex-column element effectively making it a flex container, then place an align-self-start BS class selector on the last form-row element that contains the button making align-self set to start.

.my-200 {
  height: 400px;
  background-color: black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div >
  <div >
  </div>
  <div >
    <div >
      <div >
        <label>Title</label>
        <input name="comment" type="text"  value="">
      </div>
    </div>

    <div >
      <div >
        <button >button 1</button>
      </div>
    </div>

    <div >
      <div >
        <button >place bottom</button>
      </div>
    </div>
  </div>
  </div