Boostrap 4 Layout

Question

Хорошо, я не могу обернуть голову вокруг того, что я ищу, это следующее изображение

Проблема в том, что текст наleft (100% цифровой процесс подачи заявки) должен находиться в контейнере, чтобы он соответствовал полям / отступам остальной части сайта

Пока это мой код

<div class="container-fluid bg-primary" style="padding-left: 0;">
 <div class="row" style="padding-left: 0;">
  <div class="col-lg-7 how-it-works-background" style="padding-top: 145px; padding-bottom: 125px;">
  <div class="container">
      <div class="row">
          <div class="col-lg-12" style="vertical-align: middle; margin:auto;">
              <h2 class="font-white">100% digital</h2>
              <h2 class="font-white">application process</h2>
              <div style="padding-top: 28px;">
                  <button class="btn btn-moola-white btn-4c">HOW IT WORKS</button>
              </div>

            </div>
      </div>

  </div>

</div>
<div class="col-lg-5" style="vertical-align: middle; margin:auto; padding-left: 10%; padding-right: 10%;">
    <h4 class="font-white">same day cash transfer</h4>
    Apply before Xpm weekdays to get your loan approved on the same day.
    <br>
    <br>
    <h4 class="font-white">automatic repayments</h4>
    Never miss a payment with automatic repayments on your payday-weekly, fortnightly or monthly.
    <br>
    <br>
    <h4 class="font-white">no penalty for early repayment</h4>
    If you pay your loan off ahead of schedule, great! We don't charge fees for this.
</div>
</div> 
</div>

Любойвопросы, пожалуйста, задавайте, оцените помощь.

Answer 1

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

вы можете использовать их таким образом

.row {
  height: 400px;
  /* demo purpose  remove it or reset it*/
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" /><div class="container-fluid bg-primary pl-0 text-white">
  <div class="row " >
    <div class="d-flex col-lg-7 how-it-works-background"   >
      <div class=" m-auto">
        <div>
          <div>
            <h2 class="font-white">100% digital</h2>
            <h2 class="font-white">application process</h2>
            <div class="pt-4">
              <button class="btn btn-moola-white btn-4c">HOW IT WORKS</button>
            </div>

          </div>
        </div>

      </div>

    </div>
    <div class="d-flex col-lg-5 justify-content-center flex-column py-2" >
      <h4 >same day cash transfer</h4>
      <p class="text-body">Apply before Xpm weekdays to get your loan approved on the same day.</p>
      <h4 class="mt-4">automatic repayments</h4>
      <p class="text-body">Never miss a payment with automatic repayments on your payday-weekly, fortnightly or monthly.</p>      
      <h4 class="mt-4">no penalty for early repayment</h4>
      <p class="text-body">If you pay your loan off ahead of schedule, great! We don't charge fees for this.</p>
    </div>
  </div>
</div>

Полезный ресурс / напоминание: найти доступный класс перед установкой избыточного стиля https://getbootstrap.com/docs/4.3/layout/grid/ (здесь для сброса поля или отступов https://getbootstrap.com/docs/4.3/utilities/spacing/)

, чтобы понять, как использовать fex: https://css -tricks.com / snippets / css / a-guide-to-flexbox /