Question about using responsive design with bootstrap fluid containers

Question about using responsive design with bootstrap fluid containers
0

#1

Tell us what’s happening:
I finished the question but I am confused to as 1. Why do we should nest all of our HTML in a div element with the class container-fluid. 2. Why the class “.container-fluid” does not appear in our style tag. 3. If I add the code, that the challenge says can add bootstrap to any app, will that code work for almost any normal web app I’m creating without editing it & does the div tag and the class we added to the div tag have anything to do with that bootstrap code?

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 (Windows NT 10.0; rv:56.0) Gecko/20100101 Firefox/56.0```.

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

#2

I will refer you to the Bootstrap 3 documentation for this answer. Just read down a couple of paragraphs in to that page.

The style declarations that are your own custom styles would go into the style section. The bootstrap 3 styles are added via a link behind the scenes for you. If you wanted to add bootstrap classes to your own project, then you would have a line above your existing style section like:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" >
  1. If I add the code, that the challenge says can add bootstrap to any app, will that code work for almost any normal web app I’m creating without editing it & does the div tag and the class we added to the div tag have anything to do with that bootstrap code?

The answer is yes as long as you have linked the file I mentioned in your question #2 answer.