горизонтальные карты бок о бок

Question

Как сделать 2 горизонтальные (рядные) карты рядом друг с другом?Это мой код, который у меня есть, когда я копирую и вставляю его, карты сталкиваются и превращаются в беспорядок.

Мне нужно, чтобы карты были рядом, как это

<div class="card-body p-0 d-flex justify-content-around flex-wrap">
        <div class="col-md-3 ">
            <div class="card card-style1">

                <div class="card-header s-2">
                    <h3 class="card-title">Data </h3>
                </div>

     <div class="card-body d-flex justify-content-center" style="overflow-y: auto; list-style-type:none;">
                    <table class="data-info-table">
                        <tr data-toggle="tooltip" data-placement="left" title="Data Name">
                            <td><i class="fas fa-user "></i></td>
                            <td><textarea class="form-control asd" id="client" rows="1"  type="text" style="resize: none; overflow-y: auto;"></textarea>
                            </td>
                        </tr>

                        </tr>
    </div>
</div>
    </div>  

    </div>

Answer 1

Скопировано прямо с Bootstrap Card .Я только что добавил новый родительский div с class = "row" и col-6 для обеих карт.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />

<div class="row col-12">
  <div class="card col-6">
    <img class="card-img-top" src="https://images.pexels.com/photos/20787/pexels-photo.jpg?cs=srgb&dl=adorable-animal-cat-20787.jpg&fm=jpg" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      <a href="#" class="btn btn-primary">Go somewhere</a>
    </div>
  </div>

  <div class="card col-6">
    <img class="card-img-top" src="https://images.pexels.com/photos/20787/pexels-photo.jpg?cs=srgb&dl=adorable-animal-cat-20787.jpg&fm=jpg" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      <a href="#" class="btn btn-primary">Go somewhere</a>
    </div>
  </div>
</div>