<div class="container my-3">
  <div
    class="row p-4 pb-0 pe-lg-0 pt-lg-5 align-items-center rounded-3 border shadow-lg border-warning"
  >
    <div class="col-lg-7 p-3 p-lg-5 pt-lg-3">
      <h1 class="display-4 fw-bold lh-1">
        Border hero with cropped image and shadows
      </h1>
      <p class="lead">
        Quickly design and customize responsive mobile-first sites with
        Bootstrap, the worldâ€™s most popular front-end open source toolkit,
        featuring Sass variables and mixins, responsive grid system, extensive
        prebuilt components, and powerful JavaScript plugins.
      </p>
      <div class="d-grid gap-2 d-md-flex justify-content-md-start mb-4 mb-lg-3">
        <button
          type="button"
          class="btn btn-warning btn-lg px-4 me-md-2 fw-bold"
        >
          Primary
        </button>
        <button type="button" class="btn btn-outline-warning btn-lg px-4">
          Default
        </button>
      </div>
    </div>
    <div class="col-lg-4 offset-lg-1 p-0 overflow-hidden shadow-lg">
      <img class="rounded-lg-3" src="img/card.jpg" alt="" width="720" />
    </div>
  </div>
</div>
