Make sure you have nested all HTML elements in .container-fluid.
See original GitHub issueChallenge 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:
- Created 6 years ago
- Comments:6 (3 by maintainers)
Top 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 >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
“Make sure you have nested all HTML elements in .container-fluid.” I don’t understand.
Hi @byerchl
Please use our freeCodeCamp Forum or freeCodeCamp Gitter for help queries.
Github is used for reporting issues.