4. Learn More: Grid


#1

I’m confused? What do I do?

Learn More: Grid
Looking good! Both menus now show up on the same line, and the navigation bar is complete.

Next, let's use Bootstrap's grid to arrange the three pieces of supporting content inside the <div class="learn-more">..</div> section. Here's how to use Bootstrap's grid.

<div class="container">

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

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

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

  </div>
</div>

First inside <div class="container">..</div>, there is a row defined by <div class="row">..</div>
A row is made up of columns, so inside <div class="row">..</div>, there are three columns each defined by <div class="col-md-4">
Why is the .col-md-4 class being used? Remember that Bootstrap's grid is 12 columns. Therefore, to create three equal-sized columns, they each need to span 4 grid columns.

Instructions
In index.html inside <div class="learn-more">..</div>

Inside <div class="container">..</div>, add the class "row" to the first div element, just like in the example above.
Then add the class "col-md-4" to the three div elements nested inside.
In the preview window, click the "Full Screen" button to see the results.


#2

This is my HTML

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

  <ul class="pull-left">
    <ul class="pull-right">

    <div class="nav">
      <div class="container">
        <ul>
          <li><a href="#">Name</a></li>
          <li><a href="#">Browse</a></li>
        </ul>
        <ul>
          <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="learn-more">
	  <div class="container">
		<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>

#3

And this is my CSS
.nav a {
color: #5a5a5a;
font-size: 11px;
font-weight: bold;
padding: 14px 10px;
text-transform: uppercase;
}

.nav li {
display: inline;
}

.jumbotron {
background-image:url('http://goo.gl/04j7Nn');
height: 500px;
background-repeat: no-repeat;
background-size: cover;
}

.jumbotron .container {
position: relative;
top:100px;
}

.jumbotron h1 {
color: #fff;
font-size: 48px;
font-family: 'Shift', sans-serif;
font-weight: bold;
}

.jumbotron p {
font-size: 20px;
color: #fff;
}

.learn-more {
background-color: #f7f7f7;
}

.learn-more h3 {
font-family: 'Shift', sans-serif;
font-size: 18px;
font-weight: bold;
}

.learn-more a {
color: #00b0ff;
}


#4

What do I do?? :disappointed_relieved:


#5

The only part that we are looking at in this exercise is your learn-more div.

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

You are going to use those un-named divs to create a row and three columns.

You will do that by add a class name to each of the <div> tags.

Each of your Travel, Host and Trust code will be a column -- you can do those first if you want.


#8

So like this?


<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="learn-more">
  <div class="container">
	<div>
      <div>
		<h3>Travel</h3>
		<div>
		<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>
		<div>
		<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>
		<div>
		<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>



#9

Could we just focus on your learn-more div?

How to post code: http://discuss.codecademy.com/t/using-backticks-to-format-your-code/3697/2?u=albionsrefuge