Заказать другой div с Bootstrap

Question

Я не могу заказать свой другой div, как я хочу.

Во-первых, я хотел бы, чтобы карта была такой же высоты, как мой заголовок.Затем я хочу, чтобы нижняя часть моих 2 кнопок находилась на той же высоте, что и нижняя часть моей карты.

Полагаю, это возможно, но я застрял ... Не могли бы вы мне помочь?

<div class="container" style="width:auto;margin-top:0%">
    <div class="row col-12">
        <div class="5" style="margin-top:2%"><h3>Change your user profile</h3></div>
        <div class="card border-primary md-5 col-6" style="width: auto; margin-left:51%">
            <div class="card-header" style="font-size:22px">Attention</div>
            <div class="card-body">
                <p class="card-text">
                    The modified data must first be validated. <br /><br />
                    A request will be sent as soon as you click on "Submit". <br /><br />
                    It is normal that the old data is still displayed, it means that the validation has not been done yet.
                </p>
            </div>
        </div>
        <div>
            <button type="button" class="btn btn-outline-primary" id="btnMember" onclick="hideCPY()">Personnal</button>
            <button type="button" style="margin-left:1%" class="btn btn-outline-primary" id="btnShowCompany" onclick="hideMember()">Company</button>
        </div>
    </div>

[

Answer 1

Вы должны удалить margin-left:51%, данное вашей карте, так как вам не нужны поля при работе с сеткой начальной загрузки.Также вы должны переместить кнопки в один и тот же контейнер первого столбца, чтобы выровнять их вместе с заголовком.

<div class="container" style="width:auto;margin-top:0%">
<div class="row col-12">
   <div class="col-5" style="margin-top:2%">
      <h3>Change your user profile</h3>
      <div>
         <button type="button" class="btn btn-outline-primary" id="btnMember" onclick="hideCPY()">Personnal</button>
         <button type="button" style="margin-left:1%" class="btn btn-outline-primary" id="btnShowCompany" onclick="hideMember()">Company</button>
      </div>
   </div>
   <div class="card border-primary md-5 col-6" style="width: auto;">
      <div class="card-header" style="font-size:22px">Attention</div>
      <div class="card-body">
         <p class="card-text">
            The modified data must first be validated. <br /><br />
            A request will be sent as soon as you click on "Submit". <br /><br />
            It is normal that the old data is still displayed, it means that the validation has not been done yet.
         </p>
      </div>
   </div>
</div>

Кроме того, я бы настоятельно рекомендовал удалить встроенные стили и использовать вместо этого классы CSS.

Рабочая скрипка здесь: http://jsfiddle.net/omxahu46/

Надеюсь, это поможет.