Как разместить две загрузочные карты рядом друг с другом

Question

Я хочу разместить две карты рядом друг с другом (по горизонтали), но в настоящее время они выровнены по вертикали. То есть я хочу поместить карту заголовка 1 рядом с картой заголовка 2, хотя я использовал какое-то поле, но сдвигал только в том же месте по горизонтали, а не по вертикали.

<div class="card" style="width: 20rem;">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
            <h5 class="card-title">Heading 1</h5>
            <p class="card-text">some text</p>
            <a href="#" class="btn btn-primary">a button</a>
    </div>
</div>

<div class="card" style="width: 20rem;">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
            <h5 class="card-title">Heading 2</h5>
            <p class="card-text">some text</p>
            <a href="#" class="btn btn-primary">a button</a>
    </div>
</div>

Answer 1

Вы можете использовать сетку Bootstrap для достижения этого:

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-6 d-flex justify-content-center">
      <div class="card" style="width: 20rem;>
        <img class="card-img-top" src="..." alt="Card image cap">
        <div class="card-body">
          <h5 class="card-title">Heading 1</h5>
          <p class="card-text">some text</p>
          <a href="#" class="btn btn-primary">a button</a>
        </div>
      </div>
    </div>
    <div class="col-sm-6 d-flex justify-content-center">
      <div class="card" style="width: 20rem;>
        <img class="card-img-top" src="..." alt="Card image cap">
        <div class="card-body">
          <h5 class="card-title">Heading 2</h5>
          <p class="card-text">some text</p>
          <a href="#" class="btn btn-primary">a button</a>
        </div>
      </div>
    </div>
  </div>
</div>