Bootstrap - Use Responsive Design with Bootstrap Fluid Containers

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.

Your code so far

.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; }

CatPhotoApp

Click here for cat photos.

A cute orange cat lying on its back.

Things cats love:

  • cat nip
  • laser pointers
  • lasagna

Top 3 things cats hate:

  1. flea treatment
  2. thunder
  3. other cats
Indoor Outdoor Loving Lazy Crazy Submit
.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;
}

CatPhotoApp

Click here for cat photos.

A cute orange cat lying on its back.

Things cats love:

  • cat nip
  • laser pointers
  • lasagna

Top 3 things cats hate:

  1. flea treatment
  2. thunder
  3. other cats
Indoor Outdoor Loving Lazy Crazy Submit
```

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Safari/537.36 Edg/110.0.1587.41

Challenge: Bootstrap - Use Responsive Design with Bootstrap Fluid Containers

Link to the challenge:

2

I would like some help here please ?

3

If you want good help then you need to do a few things:

  • Explain to us what you are having a problem with. What you don’t understand. Why you think your solution should work. Why you think it might be failing.

  • Format your code properly so we can see your actual HTML and CSS. To display your code in here you need to wrap it in triple back ticks. On a line by itself type three back ticks. Then on the first line below the three back ticks paste in your code. Then below your code on a new line type three more back ticks. The back tick on my keyboard is in the upper left just above the Tab key and below the Esc key. You may also be able to use Ctrl+e to automatically give you the triple back ticks while you are typing in the this editor and the cursor is on a line by itself. Alternatively, with the cursor on a line by itself, you can use the </> button above the editor to add the triple back ticks.

4

This is my code I cant see what is wrong with this

  • All HTML elements after the closing style tag are nested in .container-fluid . And it is
<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">

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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"/>
<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://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" 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="https://freecatphotoapp.com/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>
5

Why did you move the link element that imports the google font? Why did you add a new link element for the bootstrap stylesheet?

Making any unnecessary changes that aren’t asked for in the instructions will usually cause the tests to fail. Don’t change any of the original HTML. The only thing you want to do is add the new div.