Help Me! Basic Bootstrap Question

Help Me! Basic Bootstrap Question
0

#1

Okay, so I’ve been playing and staring at this code for over an hour trying to get it to work and my brain now wants to turn to mush. Can someone please look this code over and explain to me why my image is refusing to be responsive. It just sits there, none changing.

Spongebob demostrating imagination

#2

Oh I forgot to add the link, silly me, here it is: https://codepen.io/Spy10/pen/wqJBYm/?editors=1100


#3

This might be a silly question, but what are you expecting it to do? You said it should be responsive, but can you explain in more detail what you want to see happen in specific situations?

Understanding what you want it to do would help us understand how to best answer your question.


#4

Well, I’ve been working with HTML and CSS on and off for a year now and I just started using the bootstrap framework. According to the website I’m learning from, the .img-responsive class is supposed to make the image as wide as your browser. The css code should look someone like width:100% height:auto overflow:hidden but whenever I add it to my img class, the image won’t change. I’m thinking I’m probably doing something wrong or have overlooked something.


#5

I could be wrong, but I think .img-responsive is the equivalent of applying the following to the image:

max-width: 100%, height: auto, and display:block to the image

The max-width part will not allow the image to grow larger than itself. The image is small in dimensions. If this is the only image you want to “grow”, then just create another class called grow with the following:

.grow {
  width:100%;
  height: auto;
}

and add it to the class on the image as follows:

<img class="img-responsive grow"  src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRkVLYcibJ-KvPPKrP7dv0f7IDWl8MVip62AOSEM4mXNPtolrTa" alt="Spongebob demostrating imagination">

FYI - Your original code applied the img-responsive class the image container div instead of the image.


#6

This works, thanks. It would seem I still have much to learn. I don’t think my brain is wired for front end web development but even back end developers need to be familiar with the front end side so I hear. And yea, I sometimes get my divs confused but I will hopefully get used to it. Thanks, again.