Custom deck of card in bootstrap 4 - html

Question

How to create this card grid inside container(Bootstrap 4)?
I doesn't understand how i can put text in container if text in div(card).
<section class="second__offers">
<div class="container">
<div class="card-group">
<div class="card text-black">
<img class="card-img-top" src="img/service-1.jpg" alt="Card image top">
<div class="card-img-overlay">
<h3 class="card-title">Card title</h3>
<h4 class="card-subtitle">Card subtitle</h4>
<p class="card-text">This is a simple Card example</p>
About
</div>
</div>
<div class="card text-black">
<img class="card-img-top" src="img/service-2.jpg" alt="Card image top">
<div class="card-img-overlay">
<h3 class="card-title">Card title</h3>
<p class="card-text">This is a simple Card example</p>
About
</div>
</div>
<div class="card text-black">
<img class="card-img-top" src="img/service-3.jpg" alt="Card image top">
<div class="card-img-overlay">
<h3 class="card-title">Card title</h3>
<p class="card-text">This is a simple Card example</p>
About
</div>
</div>
</div>
<div class="card-group">
...
</div>
</div>
</section>
example:

Answer 1

Use background-image: instead of img tag (add class to each card and in css and the fit background-image:)
To your comment make container take 100% of width use container-fluid instead of container and set in css:
.container-fluid{
padding:0!important;
margin:0!important;
}
https://jsfiddle.net/nhybo32s/10/
.face{
background-image: url(https://material.angular.io/assets/img/examples/shiba1.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
}
.body{
background-image: url(https://material.angular.io/assets/img/examples/shiba2.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
}
.card {border:none!important}
.container-fluid{
padding:0!important;
margin:0!important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<section class="second__offers">
<div class="container-fluid">
<div class="card-group">
<div class="card text-black face">
<div class="">
<h3 class="card-title">Card title</h3>
<h4 class="card-subtitle">Card subtitle</h4>
<p class="card-text">This is a simple Card example</p>
About
</div>
</div>
<div class="card text-black body">
<div>
<h3 class="card-title">Card title</h3>
<p class="card-text">This is a simple Card example</p>
About
</div>
</div>
<div class="card text-black">
<div>
<h3 class="card-title">Card title</h3>
<p class="card-text">This is a simple Card example</p>
About
</div>
</div>
</div>
<div class="card-group">
...
</div>
</div>
</section>