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

1

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">
  <header>
    <hgroup>
      <h3 class="text-primary">The Greatest Man in china</h3>
      <h4>Chief Ze Dong Mao</h4>
    </hgroup>
  </header>
    <figure>
      <img class="img-responsive" src="http://image18.poco.cn/mypoco/myphoto/20170403/16/18551742020170403165340040.jpg?2048x1454_120" alt="毛泽东在延安" />
      <figcaption>
        <small>Chief Ze Dong Mao in xxxx
        </small>
      </figcaption>
    </figure> 
  <p>
       毛泽动。。。。。。。。。  
  </p>
  <p>关于毛泽东更多的事迹，可以参看<a href="http://baike.baidu.com/item/%E6%AF%9B%E6%B3%BD%E4%B8%9C/113835?sefr=cr">这里</a>了解详情</p>
  <footer>
    <small>copyright by Ivan Gao 2017</small>
  </footer>
</div>

Hope any one help me, thanks!

2

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

3

I configure the CodePen default Bootstrap - “https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css”, I thought it before and I configured the Bootstrap 3.1 - “http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css” 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?

4

Could you post a link to your codepen?

5

it’s here: https://codepen.io/ccrubby/pen/jBddoq

6

How about using this:
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css

7

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:

8

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

screenshot1.png770×91 9.44 KB

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

9

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.

10

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!

11

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:

12

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
13

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