Build a Tribute Page - class="img-responsive" useless by using bootstrap [SOLVED]

hi all,

I am doing the basic front-end Development Project-Build a Tribute Page, I followed the step to work it in CodePen, and configure the bootstrap as the CSS library. In this case, you need to fill a image in the page, my image has a very large size so I used the bootstrap class “img-responsive”(what I Learned from FCC lesson before) to make my image to fit to my browser view(or called the CodePen preview view), but it is useless, nothing to fit. Then I tried other bootstrap classes such as “text-primary” on my h tag, it’s ok. So I don’t know what’s wrong about it?

this is my code in CodePen html panel:

<div class="container-fluid">
      <h3 class="text-primary">The Greatest Man in china</h3>
      <h4>Chief Ze Dong Mao</h4>
      <img class="img-responsive" src="" alt="毛泽东在延安" />
        <small>Chief Ze Dong Mao in xxxx
  <p>关于毛泽东更多的事迹,可以参看<a href="">这里</a>了解详情</p>
    <small>copyright by Ivan Gao 2017</small>

Hope any one help me, thanks!

Are you sure you’re not using Bootstrap 4? It seems it doesn’t have any img-responsive class.

I configure the CodePen default Bootstrap - “”, I thought it before and I configured the Bootstrap 3.1 - “” as a test, but it still useless, so I don’t know what’s wrong about it, my syntax error or editor error or Bootstrap version error?

Could you post a link to your codepen?

it’s here:

How about using this:

yeah, it’s wonderful! thansk a ton. But one more question, why it’s ok in bootstrap 3.3.7 not 3.3.1(FCC lesson used it and img-responsive still ok)? :grin:

The link you posted is blocked because it’s not https.

I tried replacing http with https and it seems to work as well.

I had this problem. It changed to img-fluid for bootstrap 4. Beats me why they had to change the names. There are several name changes at version 4.

yes, you are right, I need to study to find the point on my browser console first, then I used the bootstrap 3.3.1 link(from FCC lesson) with https,it’s also ok. Whatever, thank you so much!

It beat me 2~~ I don’t know why they do that, but I used the class you told me and it’s ok, great, now I get two ways to solve this problem, thank you:smiley:

Thanks so much for posting this! I was completely unable to figure out what I was doing wrong. This link fixed everything. Just wanted you to know how much I appreciated your answering this question so I could someday search and find what I needed. :smiley:

1 Like

Wooow!! thx!. i just start my Tribute Page and just went through the same problem. This link fixed it :slight_smile: