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>


html css css3 bootstrap

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Creating Responsive Grid Vanilla using HTML,CSS and Bootstrap

A Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles, quizzes and practice/competitive

Login Form in HTML CSS | Login Page in HTML CSS Bootstrap

Download Link: https://drive.google.com/file/d/1acIep5LBxATRiGx0kdcFNbLlAVTHx__Y/view?usp=sharing This example shows you how to create a simple and sample lo...

Login Form HTML CSS | Bootstrap 5

Using Bootstrap 5 to create a Login Form HTML CSS. We create a basic login form HTML css code through the Bootstrap Framework. If you are looking for a login form HTML template that does the basics, this should have you covered. Using a starter template, we create a new project and go through the process of how to login form HTML CSS.

Pricing Table HTML, CSS | Bootstrap 5

Creating a Pricing Table that is responsive in the latest Bootstrap 5 using their example as reference. Using bootstrap we create a pricing table using basic HTML and CSS. Creating Bootstrap 5 template. HTML Pricing Table Header. Pricing List Table. Pricing Card Layout. Pricing Table Column Row Design. Responsive Pricing Table html css. Pricing Table Button

Creating a Login Form using HTML, CSS and Bootstrap 5

Learn how to create a login form using HTML, CSS and Bootstrap 5. Using Bootstrap 5 to create a Login Form HTML CSS. Login Form HTML CSS | Bootstrap 5