<div class="container">
  <div class="row">
  <div class="card-group">
<div class="card">

                    <img class="card-img-top" src="https://source.unsplash.com/daily?nature" alt="Card image top">
                    <div class="card-img-overlay">
                        <h3 class="card-title">Card 1</h3>
                        <h4 class="card-subtitle">of the group</h4>
                        <p class="card-text">You can use the cap image as an overlay for the body</p>
                    </div>
                </div>
    <div class="card text-primary">

                    <img class="card-img-top" src="https://source.unsplash.com/daily?nature" alt="Card image top">
                    <div class="card-img-overlay">
                        <h3 class="card-title">Card 2</h3>
                        <h4 class="card-subtitle">Of the group</h4>
                        <p class="card-text">
                          Group Columns have the same width and height thanks to Flexbox
                        </p>
                    </div>
                </div><div class="card">

                    <img class="card-img-top" src="https://source.unsplash.com/daily?nature" alt="Card image top">
                    <div class="card-img-overlay">
                        <h3 class="card-title">Card 3</h3>
                        <h4 class="card-subtitle">Of the group</h4>
                        <p class="card-text">You can use the cap image as an overlay for the body</p>
                    </div>
                </div>
</div>
</div>
  <div class="row">
  <div class="card-deck">
<div class="card">

                    <img class="card-img-top" src="https://source.unsplash.com/daily?nature" alt="Card image top">
                    <div class="card-img-overlay">
                        <h3 class="card-title">Card 1</h3>
                        <h4 class="card-subtitle">of the deck</h4>
                        <p class="card-text">You can use the cap image as an overlay for the body</p>
                    </div>
                </div>
    <div class="card text-primary">

                    <img class="card-img-top" src="https://source.unsplash.com/daily?nature" alt="Card image top">
                    <div class="card-img-overlay">
                        <h3 class="card-title">Card 2</h3>
                        <h4 class="card-subtitle">Of the deck</h4>
                        <p class="card-text">
                          Group Columns have the same width and height thanks to Flexbox
                        </p>
                    </div>
                </div><div class="card">

                    <img class="card-img-top" src="https://source.unsplash.com/daily?nature" alt="Card image top">
                    <div class="card-img-overlay">
                        <h3 class="card-title">Card 3</h3>
                        <h4 class="card-subtitle">Of the deck</h4>
                        <p class="card-text">You can use the cap image as an overlay for the body</p>
                    </div>
                </div>
</div>  
  </div>
</div>