Bootstrap-在整个图像大小中动态调整文本div的大小

Question

I'm learning Bootstrap and have a container with one row and a column with the following classes:

col-lg-4 col-md-6 col-sm-12

Inside the column, I have a div with an image and another div called img-text containing text. I have formatted img-text to display over the image but would like the div to stretch across the image dynamically when I resize the page. Please see the image for more details.

Here's what I have so far.

 .img_text { height: 60px; width: 90.5%; background-color: #4aaaa5; position: absolute; top: 65%; color: white; font-family: 'Georgia', Times, Times New Roman, serif; font-size: 1.5em; padding-top: 20px; text-align: center; z-index: 1; } 

 <div class='col-lg-4 col-md-6 col-sm-12' id='col1'> <img src='img/ph1.jpg' class='img-responsive' /> <div class='img_text'>Apples</div> </div> 

Answer 1

Adjust .img_text{width: 100%;}

ps it might cause a bug at a bigger screen size. In that case, you'll need to use media rules

 .img_text { height: 60px; width: 100%; background-color: #4aaaa5; position: absolute; top: 65%; color: white; font-family: 'Georgia', Times, Times New Roman, serif; font-size: 1.5em; padding-top: 20px; text-align: center; z-index: 1; } 

 <div class='col-lg-4 col-md-6 col-sm-12' id='col1'> <img src='img/ph1.jpg' class='img-responsive' /> <div class='img_text'>Apples</div> </div> 

Answer 2

try iy

.img_text {
  height: 60px;
  width: calc(100% - 15px);
  background-color: #4aaaa5;
  position: absolute;
  top: 65%;
  float:left;
  color: white;
  font-family: 'Georgia', Times, Times New Roman, serif;
  font-size: 1.5em;
  padding-top: 20px;
  text-align: center;
  z-index: 1;
}

and

#col1{
overflow:hidden;
}