Bootstrap 4 card-Image-overlay text flowing out of image

Bootstrap 4 card-Image-overlay text flowing out of image

I have this image with text overlayed, Not sure what causing it, but on mobile (small/xs)the play button and title is getting out of the image due the p text being long. what bootstrap class am i messing up to cause this issue? I thought the image height will adjust to take care of this issue when texts inside gets longer, is it the image?.

I have this image with text overlayed, Not sure what causing it, but on mobile (small/xs)the play button and title is getting out of the image due the p text being long. what bootstrap class am i messing up to cause this issue? I thought the image height will adjust to take care of this issue when texts inside gets longer, is it the image?.

html {
  font-size: 18px;
}
@media (min-width: 576px) {
  .container {
    max-width: 540px;
 }
}
@media (min-width: 768px) {
  .container {
    max-width: 720px;
 }
}
@media (min-width: 992px) {
  .container {
    max-width: 960px;
 }
}
@media (min-width: 1200px) {
  .container {
    max-width: 1400px;
 }
}
h1, .h1 {
  font-size: 3.815rem;
}
h2, .h2 {
  font-size: 2.441rem;
}
h3, .h3 {
  font-size: 1.563rem;
}
h4, .h4 {
  font-size: 1.25rem;
}
.product-video-section .product-video-container {
  position: relative;
}
.product-video-section .product-video-container video {
  height: auto;
  vertical-align: middle;
  width: 100%;
}
.product-video-section .product-video-container #product-video-button {
  color: #d4272e;
}
.product-video-section .product-video-container .product-video {
  display: none;
}
.product-video-section .product-video-container .product-video-texts .play-btn-wrap {
  text-decoration: none;
  background-color: #fff;
  border: 1px solid #d4272e;
  display: inline-block;
  border-radius: 50%;
  width: 3.5rem;
  height: 3.5rem;
  color: #d4272e;
  transition: all 300ms ease-in;
  cursor: pointer;
}
.product-video-section .product-video-container .product-video-texts .play-btn-wrap i {
  font-size: 2rem;
}
.product-video-section .product-video-container .product-video-texts .play-btn-wrap:hover {
  background-color: #d4272e;
  transition: all 300ms ease-in;
  transform: scale(1.2);
}
.product-video-section .product-video-container .product-video-texts .play-btn-wrap:hover i {
  color: #fff;
}
<!DOCTYPE html>
<html lang="en">

<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title>

&lt;script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
    crossorigin="anonymous"&gt;&lt;/script&gt;
&lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
    crossorigin="anonymous"&gt;&lt;/script&gt;
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
    crossorigin="anonymous"&gt;&lt;/script&gt;
&lt;script src="./Library/bower_components/slick-carousel/slick/slick.min.js"&gt;&lt;/script&gt;
&lt;script src="./index.js"&gt;&lt;/script&gt;
&lt;script src="https://unpkg.com/[email protected]/dist/ionicons.js"&gt;&lt;/script&gt;


&lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
    crossorigin="anonymous"&gt;
&lt;link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"
    integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"&gt;
&lt;link rel="stylesheet" href="./Library/bower_components/slick-carousel/slick/slick.css" /&gt;
&lt;link rel="stylesheet" href="./Library/bower_components/slick-carousel/slick/slick-theme.css" /&gt;

&lt;link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet"&gt;

&lt;link rel="stylesheet" type="text/css" href="./style/index.css"&gt;

</head>

<body>

    &lt;div class="product-video-section "&gt;
        &lt;div class="product-video-container card"&gt;
            &lt;img src="https://www.dropbox.com/s/5x8p2z5cvip5u38/chicago.jpg?dl=1"&gt;
            &lt;div class="card-img-overlay  d-flex align-items-center product-video-texts text-dark" id=""&gt;
                &lt;div class="row"&gt;
                    &lt;div class="col-12"&gt;
                        &lt;div class="d-flex justify-content-end row"&gt;
                            &lt;div class="col-lg-6 col-sm-12"&gt;
                                &lt;h4 class="card-title "&gt;This is video&lt;/h4&gt;
                                &lt;p class="card-text "&gt;

                                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia sint dolore nemo deserunt voluptatum animi omnis corrupti nam recusandae aliquam, amet ullam qui sequi assumenda, eius, debitis iusto voluptas perferendis!
                                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia sint dolore nemo deserunt voluptatum animi omnis corrupti nam recusandae aliquam, amet ullam qui sequi assumenda, eius, debitis iusto voluptas perferendis! sit amet consectetur adipisicing elit. Officia sint dolore nemo deserunt voluptatum animi omnis corrupti nam recusandae aliquam, amet ullam qui sequi assumenda, eius, debitis iusto voluptas perferendissit amet consectetur adipisicing elit. Officia sint dolore nemo deserunt voluptatum animi omnis corrupti nam recusandae aliquam, amet ullam qui sequi assumenda, eius, debitis iusto voluptas perferendis!!

                                &lt;/p&gt;

                                &lt;div href="" class="play-btn-wrap d-flex justify-content-center" data-toggle="modal"
                                     data-target="#@videoTarget"&gt;
                                    &lt;i class="ion-ios-play product-video-button  align-self-center pl-1" id="" aria-hidden="true"&gt;&lt;/i&gt;
                                &lt;/div&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;

                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;

</body>

</html>


Angular 9 Tutorial: Learn to Build a CRUD Angular App Quickly

What's new in Bootstrap 5 and when Bootstrap 5 release date?

Brave, Chrome, Firefox, Opera or Edge: Which is Better and Faster?

How to Build Progressive Web Apps (PWA) using Angular 9

What is new features in Javascript ES2020 ECMAScript 2020

Build Responsive website with HTML CSS Bootstrap 4 and JavaScript [2020]

Welcome, to the best video on complete HTML and CSS Course with one Project in one video in 2020. In this HTML CSS tutorial for beginners, you'll learn the fundamentals of web development(HTML and CSS), along with best practices and professional problem-solving techniques using Developer Tools. Now, What is HTML & CSS 2020?

Build a Register & Login Form using PHP, HTML, CSS, Bootstrap and MySQL

In this tutorial you will learn and build a Responsive PHP Registration & Login Form using PHP, HTML, CSS, Bootstrap and MySQL

How To Make ECommerce Website Using HTML CSS And Bootstrap Step By Step

In this eCommerce website development course you will learn to make an eCommerce website template from with HTML And CSS from beginning to end, step by step with explanation.