freeCodeCamp Challenge Guide: Use Responsive Design with Bootstrap Fluid Containers

freeCodeCamp Challenge Guide: Use Responsive Design with Bootstrap Fluid Containers
0

#1

Bootstrap will figure out how wide your screen is and respond by resizing your HTML elements - hence the name Responsive Design.

With responsive design, there is no need to design a mobile version of your website. It will look good on devices with screens of any width.

You can add Bootstrap to any app just by including it with

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>

at the top of your HTML.


#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

#3

why can’t I post my code here?


#4

You didn’t close the img tag.


#5

but img tags self close

btw how are i supposed to post my code here?


#6

/*

*/

is this wrong?


#7

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


#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


#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


#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…)


#12

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


#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


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


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