freeCodeCamp Challenge Guide: Use Responsive Design with Bootstrap Fluid Containers

Guide
1

Use Responsive Design with Bootstrap Fluid Containers

Problem Explanation

Welcome to the Bootstrap challenges, the following challenge has you making the existing content children or sub-child of a new div which would be a bootstrap container

Hints

Hint 1

Wrap all HTML code into a single <div></div>.

Hint 2

Use the class of container-fluid

Solutions

Since you have to add all the HTML in the newly created div, the following is the solution:

Solution 1 (Click to Show/Hide) 
<div class="container-fluid>

</div>

NOTE: IN the above solution, the ... represents the HTML which was already present.

8 Likes
2

So what did I do wrong here?It’s telling me close all of my elements which I did>

CatPhotoApp

   <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"></a>

    <p>Things cats love:</p>
  • cat nip
  • laser pointers
  • lasagna

Top 3 things cats hate:

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

why can’t I post my code here?

4

You didn’t close the img tag.

2 Likes
5

but img tags self close

btw how are i supposed to post my code here?

1 Like
6

/*

*/

is this wrong?

7

Yes it is. You need to close it with /> instead of >

2 Likes
8

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

hi
how to do this
what should i add in the container fluid class

5 Likes
9

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

Friends
how to do this
what should i add in the container fluid class

10

I know the camp doesn’t explain what to do here well.
This is what to do though:
create the div and inside add the class=container-fluid

1 Like
11

Nesting all of the HTML elements will include all of the HTML text that you have so far.

Do you recall how to include a task? (hint <div class…)

3 Likes
12

I have no clue what to do here! Did i miss something

1 Like
13

So looks like the class has to cover the whole code, so it has to open (<div…) at the beginning and the last line of the code has to be

14

So the line has to be included for every website that is responsive? And is it this link that holds all the css definitions like container-fluid

15

So the line

<link rel=“stylesheet” href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"> has to be included for every website that is responsive? And is it this link that holds all the css definitions like container-fluid

16

in case you didnt find out

div class="container-fluid"
all your HTML code
/div

8 Likes
17

got the answer myself…thanks

19

could you explain a little? if you dont mind.

21

add div = class “container-fluid” after </style.
and end the /div at the end of your code.

1 Like
22

This exercise is a little blurry on what it wants from you. Basically it’s asking you to make a “div”, which we learned earlier is used to section off a portion of your code so that it doesn’t play by the same rules as some of the other stuff you already set up. Here, it’s asking you to make all of your code (below the style stuff) a div, and its asking you to make it a class called “container-fluid”. If you’re not sure how to make it a class, now would be the time to go back and learn it again.

7 Likes