Bootstrap 4 Карточка с кнопкой Form POST - Невозможно выровнять по нижней части карточки

Question

У меня есть карточка bootstrap 4 с кнопкой в ​​конце, которая представляет собой кнопку формы с методом POST и привязанным к ней URL. Как выровнять эту кнопку по нижнему краю карточки? Вот мой текущий код, который, если бы он использовался с кнопкой, не являющейся формой, работал бы нормально. Вы можете видеть, что у меня есть d-flex и flex-column в теле карты, а также mt-auto на кнопке, как было предложено Bootstrap - выровняйте кнопку по нижней части карты

div class="container">
  <div class="card-deck mb-3 mt-4 text-center">

    {% for object in object_list %}

    <div class="card mb-4 box-shadow">
      <div class="card-header">
        <h4 class="my-0 font-weight-normal">Stuff</h4>
      </div>
      <div class="card-body d-flex flex-column">
        {% if Stuff == 'Stuff' %}
        <h3 class="card-title pricing-card-title">Stuff</h3>
        {% else %}
        <h3 class="card-title pricing-card-title">Stuff</h3>
        {% endif %}
        {% if Stuff != 'Stuff' %}
        <small>Stuff</small>
        <small>{{ Stuff }} Stuff</small>
        {% endif %}
        {% if Stuff != 'Stuff' %}
        <ul class="list-unstyled mt-3 mb-4">
          <li>Stuff</li>
          <li>Stuff</li>
          <li>Stuff</li>
          <li>Stuff</li>
          <li><strong>Stuff</strong></li>
          <li>Stuff</li>
          {% if Stuff == 'Stuff' %}
          <li>Stuff</li>
          {% endif %}
        </ul>
        {% else %}
        <ul class="list-unstyled mt-3 mb-4">
          <li>Stuff</li>
          <li>Stuff</li>
          <li>Stuff</li>
          <li>Stuff</li>
        </ul>
        {% endif %}
        <form method="POST" action="{% url 'Stuff' %}">
          {% csrf_token %}
          <div class="form-group">
            <div class="row d-flex justify-content-center">
              <div class="col-5">
                <button type="submit" class="btn btn-info btn-md btn-block login-button mt-auto">Stuff</button>
              </div>
            </div>
          </div>
          <!-- <button class="btn btn-warning">Stuff</button> -->
          <input type="hidden" name="Stuff" value="{{ Stuff }}">
        </form>


      </div>

    </div>
    {% endfor %}
  </div>


</div>

Answer 1

Решено с помощью class = "mt-auto" в разделе формы. Этот вопрос: bootstrap кнопки карты и вводимый текст выровнены по низу говорит, что все, что находится под mt-auto, выравнивается по нижнему краю.

Answer 2

Надеюсь, я правильно вас понимаю, но что, если вы добавите это к CSS:

.card-body{
padding-bottom:  0px;
}

Кнопка будет ближе к низу карточки.