Learn
Building with Bootstrap
Connecting to Bootstrap

Before Bootstrap can work for us, we need to link to it.

In earlier lessons, we linked only to main.css. Now, in addition to main.css, we will link to a URL that hosts Bootstrap.

The HTML link element makes Bootstrap available to us. Remember that the link element is typically contained within HTML head tags.

<head> ... <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/> ... </head>

Above, the href attribute is set to the URL https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css.

Let’s explore what Bootstrap can do for us.

Instructions

1.

Notice the “Skillfair” webpage to the right and locate the diagonal arrows in the top right corner of the web browser (near https://localhost/). Click the arrows to toggle the web browser between narrow and full-width views, and observe the following:

  1. Navbar items do not change position as you toggle the webpage width.

  2. The “Homemade Goods” text appears on the far left side of the webpage.

  3. Photographs increase in size when the web browser is toggled to full-width.

  4. Social media icons at the bottom of the webpage appear disorganized.

Run your code after you have observed these points.

2.

Now we will connect to Bootstrap and see changes to the webpage layout.

In index.html, locate the head element. Inside head, create a link element to link to Bootstrap:

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

Click Run.

Toggle the web browser’s width again to notice the following changes:

  1. Navbar items change position based on the webpage’s width.

  2. The “Homemade Goods” text is now centered.

  3. “Kitchen”, “woodwork”, “antique” and “gifts” photographs are arranged two per row when the webpage is full-width.

  4. Social media icons appear organized and change position at full and narrow widths.

Bootstrap’s grid is responsible for this screen-width responsiveness. Click Next to learn more!

Folder Icon

Take this course for free

Already have an account?