Bootstrap lesson 5


#1

here are the codes below and i have made changes but the error is Add a <div class="neighborhood-guides">..</div> section to the page.

kindly help me check..thank you

<!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">
      <div class="row">
    <div class="col-md-4">
        <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">
      <div class="col-md-4">
        <h1>Find a place to stay.</h1>
        
  <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>
        <p>Rent from people in over 34,000 cities and 192 countries.</p>
        <a href="#">Learn More</a>
      </div>
    </div> 

    <div class="learn-more">
	  <div class="container">
	  <div class="col-md-4">
		<div>
	      <div>
			<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>
			<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>
			<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

    <div class="nav">
      <div class="container">
      <div class="row">
    <div class="col-md-4">
        <ul class="pull-left">
          <li><a href="#">Name</a></li>

There should not be a row or column div in your nav div.

    <div class="jumbotron">
      <div class="container">
      <div class="col-md-4">
        <h1>Find a place to stay.</h1>

There should not be a column in your jumbotron.
Where is the p element and your closing tags for jumbotron and container?

  <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>

I don't see an opening tag for your neighborhood-guides div.


#3

dear albionsrefuge...i have made the changes but i see the same error..pls help

<!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>
        
  <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>
        <p>Rent from people in over 34,000 cities and 192 countries.</p>
        <a href="#">Learn More</a>
      </div>
    </div> 

    <div class="learn-more">
	  <div class="container">
	  <div class="col-md-4">
		<div>
	      <div>
			<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>
			<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>
			<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>

#4

Looking at the code in the above image, your jumbotron is missing:

  • its p element
  • the closing tag for the container div
  • the closing tag for the jumbotron div

Looking at the code in the above image, I don't see an opening tag for your neighborhood-guides div.


#5

Can you help make the changes please? thank you.
I'm a little confused because i dont know where to put the p element


#6

No problem. Here is the step from the instructions that we are talking about. The p element can be placed on the next line below the h2 element.


#7

thats exactly what I did and i still have the same problem


"Neighborhood Guides"


Not sure where to stay? We've created neighborhood guides for cities all around the world.

<div class="row">
  <div class="col-md-4">
  </div>

  <div class="col-md-4">
  </div>

  <div class="col-md-4">
  </div>

#8


#9

Oh, sorry about that, I was talking about your jumbotron at first and then got distracted. Your jumbotron is missing the p and the a elements and the two closing div tags. Several exercises ago, we build it to look like this:

    <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>

#10

Hello albionsrefuge

I made the changes but here comes another error i dont seem to understand

Oops, try again. Add a <div class="neighborhood-guides">..</div> section to the page.


#11

this is lesson 5 of bootstrap


#12

It is telling you that because you don't have one of those. You should have one to begin your neighborhood-guides div. From step 1:

add a div element with the class "neighborhood-guides"