<h1  class="center-title">Card Group</h1>
<br>
<div class="container">  <!-- container - START -------  -->
<div class="card-group"> <!-- card-group  START -------  -->

<!-- card 1 -- START --------  --> 
  <div class="card"  style="border-color: black;">
   <img class="card-img-top img-fluid" src="http://i67.tinypic.com/209irsm.jpg">

    <div class="card-block">
      <h4 class="card-title">Card title</h4>
      <p class="card-text">ICE trains run from all major German train stations.</p>
    </div>
  </div>

<!-- card 2 -- START -----------  -->
<div class="card"   style="border-color: black;">
   <img class="card-img-top img-fluid" src="http://i65.tinypic.com/2qspgys.jpg">

    <div class="card-block">
      <h4 class="card-title">Card title</h4>
      <p class="card-text">High Speed trains criss-cross France. This is a double-decker SNCF train.</p>
    </div>
</div>

<!-- card 3 -- START -----------  -->
<div class="card"  style="border-color: black;">
   <img class="card-img-top img-fluid" src="http://i65.tinypic.com/a2w7io.jpg">
 <div class="card-block">
      <h4 class="card-title">Card title</h4>
      <p class="card-text">Switzerland is a land of mountains and wonderful mountain train routes.</p>
</div> <!-- card-block  END -------  -->  

</div> <!-- card 3 --  END -------  -->  
</div> <!-- card-group --  END -------  -->
</div> <!-- container- END -------  -->
.center-title {
    margin: auto;
    text-align: center;
}

External CSS

  1. https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css

External JavaScript

  1. https://code.jquery.com/jquery-3.1.1.slim.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js
  3. https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js