Need some help using jQuery on my img!

Hi! I’m fighting my way through the “Build a Tribute Page” challenge and it’s been going pretty well so far.

I wanted to get out of the habit of using in-line style, so I thought I’d use jQuery to get my top image to fit within the jumbotron & thumbnail space.
But I think I must be doing it wrong.


  <div class="container">
    <div class="jumbotron">
      <div class="row">
        <div class="col-sm-12">
          <h1 class="text-primary text-center">Tastosis</h1>
          <h3 class="text-center"><em>The Casting Archon</em></h3><br>
          <div class="thumbnail">
            <img src="">
          <div class="row">
            <div class="col-sm-6 text-left">
            <div class="col-sm-6 text-right">

    $(document).ready(function() {
      $(".thumbnail").children("img").css("width", "100%");

With the above in codepen, the image doesn’t resize, it sticks out to the side.
But if I change the img tag to:

<img style="width: 100%;" src="">

It works no problem…

I’d love to know what it is that I’m missing / misunderstanding!

Oh boy, after fiddling with the codepen settings, apparently it wasn’t working because I used Bootstrap 4 instead of Bootstrap 3. When I switched it over to 3, everything looked a lot closer to the example video.

Is this a general rule for the tutorials here? To use version 3…?

Because Boostrap 4 is so new, most resources that you’ll find will refer to Bootstrap 3 components. Bootstrap’s official documentation is actually very good though,so if you want to use Bootstrap 4, it shouldn’t be too much extra work.

Thanks for letting me know!