title: Use Responsive Design with Bootstrap Fluid Containers
challengeType: 0
---
## Description
<sectionid='description'>
In the HTML5 and CSS section of freeCodeCamp we built a Cat Photo App. Now let's go back to it. This time, we'll style it using the popular Bootstrap responsive CSS framework.
Bootstrap will figure out how wide your screen is and respond by resizing your HTML elements - hence the name <code>Responsive Design</code>.
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 by adding the following code to the top of your HTML:
In this case, we've already added it for you to this page behind the scenes. Note that using either <code>></code> or <code>/></code> to close the <code>link</code> tag is acceptable.
To get started, we should nest all of our HTML (except the <code>link</code> tag and the <code>style</code> element) in a <code>div</code> element with the class <code>container-fluid</code>.
testString: assert(code.match(/<\/div>/g) && code.match(/<div/g)&&code.match(/<\/div>/g).length === code.match(/<div/g).length,'Makesureyour<code>div</code> element has a closing tag.');
testString: assert($(".container-fluid").children().length >= 8, 'Make sure you have nested all HTML elements after the closing <code>style</code> tag in <code>.container-fluid</code>.');