Tuto carte UI et bootstrap

Bonsoir,

J'ai suivi le tutoriel css "carte UI" et j'ai eu un petit problème quand j'ai voulu intégrer bootstrap.
En effet j'ai essayé de mettre 2 articles à côté mais soit ils étaient superposés soit ils étaient relativement proche.
De plus j'ai du rajouté des margin pour qu'ils ne soient pas coupés verticalement.

Voici mon code html

<div class="row">
    <div class="container-fluid">
      <div class="col-sm-6">
        <article class="card">
          <header class="card__thumb">
            <a href="#"><img src="http://lorempicsum.com/futurama/370/235/2">></a>
          </header>
          <div class="card__date">
            <span class="card__date__day">12</span>
            <span class="card__date__month">mai</span>
          </div>
          <div class="card__body">
            <div class="card__category"><a href="#">Site</a></div>
            <h2 class="card__title"><a href="#">Système de proposition d'artiste</a></h2>
            <div class="card__subtitle">Faîtes partager vos découvertes</div>
            <p class="card__description">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            </p>
          </div>
          <footer class="card__footer">
            <span class="icon icon--time"></span>5 heures
            <span class="icon icon--comment"></span><a href="#">62 commentaires</a>
          </footer>
        </article>
      </div>
      <div class="col-sm-6">
        <article class="card">
          <header class="card__thumb">
            <a href="#"><img src="http://lorempicsum.com/futurama/370/235/2">></a>
          </header>
          <div class="card__date">
            <span class="card__date__day">12</span>
            <span class="card__date__month">mai</span>
          </div>
          <div class="card__body">
            <div class="card__category"><a href="#">Site</a></div>
            <h2 class="card__title"><a href="#">Système de proposition d'artiste</a></h2>
            <div class="card__subtitle">Faîtes partager vos découvertes</div>
            <p class="card__description">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            </p>
          </div>
          <footer class="card__footer">
            <span class="icon icon--time"></span>5 heures
            <span class="icon icon--comment"></span><a href="#">62 commentaires</a>
          </footer>
        </article>
      </div>
    </div>
  </div>

Je n'ai pas changé le code css à part le .card

.card {
    position: absolute;
    margin-top: 50px;
    margin-left: 15px;
    background-color: #fff;
    box-shadow: 0px 0px 20px rgba(0,0,0,0.3);
    transition: box-shadow 0.3s;
    border: black 1px solid;
    border-radius: 5px;
    overflow: hidden;
}

Je vous remercie par avance :)