Using Responsive Design with Bootstrap Fluid Containers

Using Responsive Design with Bootstrap Fluid Containers
0.0 0

#1

**Tell us what’s happening:

  • List item

**
—the closing tag <div/> is correct

however, i am not able to solve
1.the “div” element having a class
and
2. nesting the HTML elements in “.container-fluid”

any advice please?
i did not modify the code only added <div class=“container-fluid”> after </style>.

Your code so far


<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
  .red-text {
    color: red;
  }

  h2 {
    font-family: Lobster, Monospace;
  }

  p {
    font-size: 16px;
    font-family: Monospace;
  }

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

  .smaller-image {
    width: 100px;
  }
</style>
<div class=“container-fluid”>
<h2 class="red-text">CatPhotoApp</h2>

<p>Click here for <a href="#">cat photos</a>.</p>

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

<p>Things cats love:</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:**

Your Browser User Agent is: ```Mozilla/5.0 (Macintosh; Intel Mac OS X 10.13; rv:59.0) Gecko/20100101 Firefox/59.0```.

**Link to the challenge:**
https://www.freecodecamp.org/challenges/use-responsive-design-with-bootstrap-fluid-containers

#2

Make sure you are using either double quotes or single quotes to surround the class attribute’s value. See how in the h2 element in above code, double quotes were used? In the div element you added, you are using curly quotes. Curly quotes are not valid syntax.


#3

Thank you for making time to respond to this request…
It is good to know this: either use these " " or these ’ ', and not to mix them.

This was not the problem, as Apple had a “coding” update called ( Comman line tool (macOS high Sierra Version 10.13) for Xcode. and simultaneously the OTHER weird part as i placed all the correct

and
, in my browser it was highlighted in pink, displaying a “error”, but i went anyways and submitted via “ctr+enter” and despite error highlighted it did go through.