Can´t create columns/rows with Bootstrap, Neighborhood Guides: 5,6,7


#1

The pictures nor the "learn more"-segments appear in columuns.

Thanks,

<!DOCTYPE html>
<html>

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

  <body>
    <div class="nav">
      <div class="container">
       <ul class="pull-left">
         <li><a href="#">Name</a></li>
          <li><a href="#">Browse</a></li>
        </ul>
        <ul class="pull-right"
          <li><a href="#">Sign Up</a></li>
          <li><a href="#">Log In</a></li>
          <li><a href="#">Help</a></li>
        </ul>
      </div>
    </div>

    <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 class="thumbnail">
<img src="http://goo.gl/0sX3jq">
</div>

<div class="thumbnail">
<img src="http://goo.gl/an2HXY">
</div>
</div>

<div class="col-md-4">
<div class="thumbnail">
<img src="http://goo.gl/Av1pac">
</div>

<div class="thumbnail">
<img src="http://goo.gl/vw43v1">
</div>

</div>

<div class="col-md-4">
<div class="thumbnail">
<img src="http://goo.gl/0Kd7UO">
</div>
</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>
    
  </body>
</html>

#2

I know this is the equivalent of the "Did you turn it off and on?" answer most tech support gives, but click the expand button (the two arrows pointing away from each other in the top right) so the page you're working on becomes full screen and see if it works. I just copied and pasted your code to notepad ++ and ran it and it looked correct. I'm probably just misunderstanding your problem though.


#3

I'm not sure if I understand your question properly, do you mean that you don't see any lines for the columns?


#4

Well , I just realised I have been fooled by the responsive layout of Bootstrap. When I went into a fullscreen preview everything looked good.

Responsive layout: Bootstrap adapts the layout according to screen width.
The full screen preview is much wider than the normal preview(which is on the right of the code). In the normal preview, there is no room for columns, hence they are not displayed.

Thanks anyways :slightly_smiling: