Skip to main content
Version: WIP

✏️ 1.1.4.7 Practice: Installing and Implementing Bootstrap

Goal: Begin exploring Bootstrap by creating an HTML page that integrates multiple Bootstrap elements into its styles.

Warm Up​

  • What setup needs to occur in order to use Bootstrap elements in a project?
  • How do we add a Bootstrap component into our own project?

AI Support: Stuck on which Bootstrap class to use or how to structure a component? You can ask AI to explain a class name or help you navigate Bootstrap's docs. Use AI to understand Bootstrap components—not to generate your vacation site or complete this exercise for you.

Example prompts:

  • Weak: "Make my vacation page."
  • Strong: "I want a Bootstrap jumbotron at the top of my page. Can you explain what HTML structure and classes I need—without writing the full page for me?"

Before asking, check: Do I have the license for this? See Using AI Responsibly at Fidgetech and How to Ask for Help.

Try asking AI: "Can you explain the difference between Bootstrap's container and jumbotron classes?"

After reading AI's response, explain the concept back in your own words before you start coding.

Code​

Vacation Site​

Make a new webpage about a place you'd like to go on vacation using Bootstrap.

  • Include a container to pad all content.
  • Use a Jumbotron to hold a title and an introductory sentence or slogan.
  • Include a section with blockquotes to contain what previous visitors to this area have said.
  • Use additional built-in classes to add color that emphasizes certain areas of the page.

We'll keep building this project for the next few lessons. Also, don't forget to create a Git repository, make commits regularly and push those commits to a remote repository on GitHub.

Checkpoint​

Before moving on, you should be able to:

  • Link Bootstrap to an HTML project (download or CDN)
  • Add a container, jumbotron, blockquote, and at least one color utility class
  • Explain what each Bootstrap class you used does

If you're unsure, re-read the Bootstrap Basic Elements lesson or ask AI: "Can you explain what Bootstrap classes I need for a simple landing page with a title and quote section—without writing my HTML for me?"