Lesson: Responsive Design with Bootstrap

Use Responsive Design with Bootstrap Fluid Containers

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 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 by adding the following code to the top of your HTML:

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

In this case, we've already added it for you to this page behind the scenes.

To get started, we should nest all of our HTML in a div element with the class container-fluid.

---