Create a Custom Heading 5

Tell us what’s happening:
I’m having so much trouble with this one. I tried looking up results in the Forum Search and nothing matched my question in the forums. Where do I put the new divs and how do I use them?

Your code so far


<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">

<style>
  h2 {
    font-family: Lobster, Monospace;
  }

  .thick-green-border {
    border-color: green;
    border-width: 10px;
    border-style: solid;
    border-radius: 50%;
  }
</style>

<div class="container-fluid">
  <div class="row col-xs-8"></div><h2 class="text-primary text-center">CatPhotoApp</h2>

  <a href="#"><img class="img-responsive thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>

  <div class="col-xs-4"></div><img src="https://bit.ly/fcc-running-cats" class="img-responsive" alt="Three kittens running towards the camera.">
  <div class="row">
    <div class="col-xs-4">
      <button class="btn btn-block btn-primary">Like</button>
    </div>
    <div class="col-xs-4">
      <button class="btn btn-block btn-info">Info</button>
    </div>
    <div class="col-xs-4">
      <button class="btn btn-block btn-danger">Delete</button>
    </div>
  </div>
  <p>Things cats <span class="text-danger">love:</span></p>
  <ul>
    <li>cat nip</li>
    <li>laser pointers</li>
    <li>lasagna</li>
  </ul>
  <p>Top 3 things cats hate:</p>
  <ol>
    <li>flea treatment</li>
    <li>thunder</li>
    <li>other cats</li>
  </ol>
  <form action="/submit-cat-photo">
    <label><input type="radio" name="indoor-outdoor"> Indoor</label>
    <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
    <label><input type="checkbox" name="personality"> Loving</label>
    <label><input type="checkbox" name="personality"> Lazy</label>
    <label><input type="checkbox" name="personality"> Crazy</label>
    <input type="text" placeholder="cat photo URL" required>
    <button type="submit">Submit</button>
  </form>
</div>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/72.0.3626.121 Safari/537.36 Avast/72.0.1174.122.

Link to the challenge:
https://learn.freecodecamp.org/front-end-libraries/bootstrap/create-a-custom-heading

Hi there,
Let’s break this down

Nest your first image and your h2 element within a single <div class="row"> element.
So we need to nest the following two elements inside a row class division


  <h2 class="text-primary text-center">CatPhotoApp</h2>

  <a href="#"><img class="img-responsive thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>

spoiler for step one:


<div class="row"> 
  <h2 class="text-primary text-center">CatPhotoApp</h2>

  <a href="#"><img class="img-responsive thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>

</div>

Ok so now that they are nested inside the row we need a means to determine how the space inside that row is distributed. that brings us to step two.

Nest your h2 element within a <div class="col-xs-8"> and your image in a <div class="col-xs-4"> so that they are on the same line.

That means, create two divisions of the specified classes and place each of the previous elements inside the appropriate division.
The spoiler below is commented to show structure

<div class="row"> 
  <div class="col-xs-8">
      <h2 class="text-primary text-center">CatPhotoApp</h2>
  </div> <!--END col-xs-8-->  

   <div class="col-xs-4">
      <a href="#"><img class="img-responsive thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
   </div> <!--END col-xs-4-->  

</div><!--END ROW-->

hope this helps

<link href=“https://fonts.googleapis.com/css?family=Lobster” rel=“stylesheet” type=“text/css”>

<style>

h2 {

font-family: Lobster, Monospace;

}

.thick-green-border {

border-color: green;

border-width: 10px;

border-style: solid;

border-radius: 50%;

}

</style>

<div class=“row”>

<div class=“col-xs-8”>

<h2 class=“text-primary text-center”>CatPhotoApp</h2>

</div>

<div class=“col-xs-4”>

<a href="#"><img class=“img-responsive thick-green-border” src=“https://bit.ly/fcc-relaxing-cat” alt=“A cute orange cat lying on its back.”></a>

</div>

</div>

<img src=“https://bit.ly/fcc-running-cats” class=“img-responsive” alt=“Three kittens running towards the camera.”>

<div class=“row”>

<div class=“col-xs-4”>

<button class=“btn btn-block btn-primary”>Like</button>

</div>

<div class=“col-xs-4”>

<button class=“btn btn-block btn-info”>Info</button>

</div>

<div class=“col-xs-4”>

<button class=“btn btn-block btn-danger”>Delete</button>

</div>

</div>

<p>Things cats <span class=“text-danger”>love:</span></p>

<ul>

<li>cat nip</li>

<li>laser pointers</li>

<li>lasagna</li>

</ul>

<p>Top 3 things cats hate:</p>

<ol>

<li>flea treatment</li>

<li>thunder</li>

<li>other cats</li>

</ol>

<form action="/submit-cat-photo">

<label><input type=“radio” name=“indoor-outdoor”> Indoor</label>

<label><input type=“radio” name=“indoor-outdoor”> Outdoor</label>

<label><input type=“checkbox” name=“personality”> Loving</label>

<label><input type=“checkbox” name=“personality”> Lazy</label>

<label><input type=“checkbox” name=“personality”> Crazy</label>

<input type=“text” placeholder=“cat photo URL” required>

<button type=“submit”>Submit</button>

</form>

</div>

This is my new code, and this is the error I keep getting:

// running tests

Make sure each of your div elements has a closing tag.

// tests completed

OK so this is weird
your code is correct, but the quotation marks you used are not being recognized as such
image
top is what I get from my keyboard and the second row is what you posted, notice the difference in the quotation symbol.
I changed all the symbols in the challenge and it passes
image
strange…

Thank you! It worked, finally. I had forgotten to keep the “div class=‘container-fluid’” in the code.