Supporting Content Section in Bootstrap

#1



https://www.codecademy.com/en/courses/make-a-website/lessons/bootstrap/exercises/supporting-content?action=resume


Everything in the code seems to be fine. I have checked it numerous times. But somehow the images in the supporting content section appear to be displayed in one column rather than two rows as it should look like on the website.
Thank you!

 </header>
<section class="jumbotron">
    <div class="container">
      <div class="row text-center">
    <h2>Homemade Goods</h2>
   <h3>
     This Year's Best
        </h3>
    <a class="btn btn-primary" 
       href="#" role="button">See all</a>
    </div>
    </div> 
   
  </section>
 <section class="container">
    <div class="row">
    <figure class="col-sm-6">
      <p>kitchen</p>
      <img src="https://s3.amazonaws.com/codecademy-content/projects/make-a-website/lesson-4/kitchen.jpg"/> </figure>
   <figure class="col-sm-6">
     <p>woodwork</p>
     <img src="https://s3.amazonaws.com/codecademy-content/projects/make-a-website/lesson-4/woodwork.jpg"/> </figure>
    </div>
    <div class="row">
      <figure class="col-sm-6">
        <p>gifts</p>
        <img src="https://s3.amazonaws.com/codecademy-content/projects/make-a-website/lesson-4/gifts.jpg"/> </figure>
      <figure class="col-sm-6">
        <p>antiques</p>
        <img src="https://s3.amazonaws.com/codecademy-content/projects/make-a-website/lesson-4/antique.jpg"/> </figure>
    </div>
  </section>
</body>
</html>

#2

@sophiapopovits,
You will have to use a separate DIV-Tag to define the col-setting like

<div class="row>">
  <!-- 1st col -->
  <div class="col-sm-6">
    <p>test</p>
    <figure>
      <img src="" />
    </figure>
  </div>
  <!-- 2nd col -->
  <div class="col-sm-6">
    <p>test</p>
    <figure>
      <img src="" />
    </figure>
  </div>
</div>

read
http://stackoverflow.com/questions/34853158/text-below-images-in-a-row-using-bootstrap

++ bootstrap
http://getbootstrap.com/getting-started/
http://getbootstrap.com/2.3.2/components.html
We now have .col-xs (phones), .col-sm (tablets), .col-md (desktops), and .col-lg (large desktops).

#3

I tried changing it, but it still doesn't appear the same way as it does on the original website.

https://www.codecademy.com/en/courses/make-a-website/lessons/bootstrap/exercises/supporting-content?action=resume