question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Make sure you have nested all HTML elements in .container-fluid.

See original GitHub issue

Challenge Use Responsive Design with Bootstrap Fluid Containers has an issue. User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.87 Safari/537.36. Please describe how to reproduce this issue, and include links to screenshots if possible.

My code:


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

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:6 (3 by maintainers)

github_iconTop GitHub Comments

2reactions
microfacticalGtmcommented, Jul 19, 2017

“Make sure you have nested all HTML elements in .container-fluid.” I don’t understand.

0reactions
Asjascommented, May 6, 2018

Hi @byerchl

Please use our freeCodeCamp Forum or freeCodeCamp Gitter for help queries.

Github is used for reporting issues.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Make sure you have nested all HTML elements in .container ...
Your missing task is “Make sure you have nested all HTML elements in .container-fluid”, You should make sure that both “h2” and “p”...
Read more >
html - Nesting a container class inside a container-fluid class ...
After researching this issue, I think I have a good answer to this question. Based on what I have found, it appears that...
Read more >
Use Responsive Design with Bootstrap Fluid Containers
Make sure you have nested all HTML elements in .container-fluid .
Read more >
Use Responsive Design with Bootstrap Fluid Containers ...
freeCodeCamp does this for us, so all we had to do was create a div that goes around all our html, and give...
Read more >
Overview - Bootstrap
While containers can be nested, most layouts do not require a nested container. ... .container-fluid , which is width: 100% at all breakpoints ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found