Optional Bootstrap Lab

OVERVIEW & PURPOSE

The purpose of the lab is to help those who have chosen to create a website learn how to use Bootstrap. Bootstrap was originally created by developers at Twitter, but is now available to everyone via GitHub. (It is the second most starred project behind freeCodeCamp.) Bootstrap is a web development framework that allows you to create mobile friendly web applications. This means that you can customize the behavior of your web page depending on the user’s screen size. (No need to create a android app or iOS app.)

This lab is optional and can be completed as an alternative to the another lab that has been assigned.

Note to save your code click this icon:

ACTIVITY

Refer to this link to answer the following questions: https://www.w3schools.com/bootstrap/bootstrap_get_started.asp

1. What is responsive web design?
2. We will include Bootstrap in our web pages using a CDN. What does this stand for?
3. What is the HTML code for including Bootstrap in your project via CDN?

Refer to this link to answer the following questions: https://www.w3schools.com/bootstrap/bootstrap_grid_basic.asp

4. With Bootstrap, you can create a grid with an unlimited amount of rows. However, how many columns can you create per row?
5. What html tag do you use to create a grid?
6. What are the four grid system classes?
7. Here is a link to show you how to create a row with two columns of equal length. How would you create a row with twelve columns of equal length?  Inside each column, place the number of that column. Modify the code in the link, save it, and provide your saved URL.
8. Resize your browser so that it looks like a mobile device. What happens to your columns?
9. To prevent column stacking, you need to specify the column width for the xs class. Change you code in step 7. Reduce the browser size so that it is like a mobile device and provide a screenshot. Save the code and provide the url to your new code.
10. For a mobile device, do you think column stacking is a user friendly option?
11. What is a Jumbotron? Refer to this link. Modify the code to include your name and write some text. Save your code and provide the URL.
12. Choose any Bootstrap Try It Yourself example from the W3schools tutorial that you might want to incorporate in your final project. Customize the code, save, and provide your url.