5/14 GRID: Bootstrap code not working as prescribed?


#1

The "learn-more" section should come up with 3 columns, but the items stay as they were originally, stacked one on top of the other. I've attempted to move the div with the class "row" to different parts of the code and nothing changes.

Can anyone find something wrong in my code? Is it how I called the bootstrap.css? I've exhausted my limited resources of knowledge on this, so a second set of eyes would do wonders.

The save and submit button didn't return any errors, but the code doesn't seem to do what I was lead to believe it should do...

Thanks!

My code



<link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
<link rel="stylesheet" href="main.css">







<div class="jumbotron">
  <div class="container">
    <h1>Find a place to stay.</h1>
    <p>Rent from people in over 34,000 cities and 192 countries.</p>
    <a href="#">Learn More</a>
  </div>
</div> 

<div class="neighborhood-guides">
  <div class="container">
    <h2>Neighborhood Guides</h2>
      <p>Not sure where to stay? We've created neighborhood guides for cities all around the world.</p>
        <div class="row">
          <div class="col-md-4">
          </div>
          <div class="col-md-4">
          </div>
          <div class="col-md-4">
          </div>
        </div>
  </div>
</div>

<div class="learn-more">
  <div class="container">
    <div class="row">
      <div class="col-md-4">
		<h3>Travel</h3>
		<p>From apartments and rooms to treehouses and boats: stay in unique spaces in 192 countries.</p>
		<p><a href="#">See how to travel on Airbnb</a></p>
      </div>
	<div class="col-md-4">
		<h3>Host</h3>
		<p>Renting out your unused space could pay your bills or fund your next vacation.</p>
		<p><a href="#">Learn more about hosting</a></p>
	</div>
	<div class="col-md-4">
		<h3>Trust and Safety</h3>
		<p>From Verified ID to our worldwide customer support team, we've got your back.</p>
		<p><a href="#">Learn about trust at Airbnb</a></p>
      </div>
    </div>
  </div>
</div>



#2

Hi @petedc1344, how wide is the web preview that you are looking at? If it is small then you will see them stacked, if if it is wide enough then you will see them in the 3 column configuration. This is called responsive design and that is something that Bootstrap helps you with.


#3

Ah, I see. Yes, putting the web preview screen to full screen does it. They should mention that while you're doing it. I thought there was something wrong because nobody said to check the results in full screen. Oh well.

Thanks!