Skip to main content
Version: WIP

✏️ 1.1.4.10 Practice: Grid System, Custom Styles, and More

Goal: Continue exploring Bootstrap by expanding your HTML page that integrates multiple Bootstrap elements into its styles.

Warm Up​

  • Where must Bootstrap grid columns reside?
  • How many columns can fit in each grid row?
  • What is the difference between the classes col-md-4 and col-xs-4?

AI Support: Stuck on grid layout or custom styles for your vacation site? You can ask AI to explain Bootstrap grid classes or stylesheet order in plain language. Use AI to understand class names and layout concepts—not to generate your vacation page or complete this exercise for you.

Example prompts:

  • Weak: "Build my vacation grid."
  • Strong: "I need three equal columns on medium screens using Bootstrap 4.5. Can you explain which col-md-* classes I'd use and why—without writing my HTML 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 col-md-4 and col-xs-4 in Bootstrap's grid?"

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

Code​

Vacation Site​

Continue working on your webpage about a place you'd like to go on vacation by adding the following Bootstrap components:

  • Include a list of vacation packages available to visit this area. Each package should include a cost, the date or range of dates its available, and the activities included in the package. Organize this information in a grid.

  • In addition to Bootstrap styles, add your own stylesheet to further customize the appearance of the site.

Checkpoint​

Before moving on, you should be able to:

  • Organize vacation packages in a Bootstrap grid
  • Link a custom stylesheet after Bootstrap and override at least one style
  • Explain what each grid class you used does

If you're unsure, re-read the Grid System and Customizing Styles lessons or ask AI: "Can you explain how to combine a Bootstrap grid with a custom stylesheet—without building my page for me?"