Supporting Content Section in Bootstrap

Get Help Make & Deploy a Website
#1

<PLEASE USE THE FOLLOWING TEMPLATE TO HELP YOU CREATE A GREAT POST!>

<Below this line, add a link to the EXACT exercise that you are stuck at.>
https://www.codecademy.com/en/courses/make-a-website/lessons/bootstrap/exercises/supporting-content?action=resume

<In what way does your code behave incorrectly? Include ALL error messages.>
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

#4

wite code-xs-... and then your images will keep horizontinally on every device.