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:
-
In this case, we've already added it for you to this page behind the scenes. Note that using either > or /> to close the link tag is acceptable.
-
To get started, we should nest all of our HTML (except the link tag and the style element) in a div element with the class container-fluid.