Log in from a computer to take this course

You'll need to log in from a computer to start How to Make a Website with NameCheap. But you can practice or keep up your coding streak with the Codecademy Go app. Download the app to get started.

apple storegoogle store

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.



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.


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!

Take this course for free

Mini Info Outline Icon
By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Or sign up using:

Already have an account?