Bootstrap for Beginners

Bootstrap is a CSS framework that makes building responsive websites easy. Follow these steps to set it up and use it—no teacher needed!

1. Getting Started with Bootstrap

Add Bootstrap to your HTML using a CDN (Content Delivery Network).

Steps:

  1. Create a new HTML file (e.g., index.html).
  2. Copy the CSS link into the .
  3. Copy the JS script before the closing .
VS Code Tip: Type link or script and press Tab (Mac: Tab, Windows: Tab) to auto-generate these tags.

2. Basic Bootstrap Template

Start with this simple template to ensure Bootstrap works.

My Bootstrap Site

Hello, Bootstrap!

VS Code Tip: Type ! and press Tab (Mac: Tab, Windows: Tab) to generate a basic HTML structure, then add Bootstrap links.

3. Containers

Use .container or .container-fluid to center and pad your content.

This is centered with padding.

This spans the full width.

Try it: Click to toggle a container!

Demo Content
VS Code Tip: Press Cmd + D (Mac) or Ctrl + D (Windows) to select and edit multiple instances of "container" at once.

4. Grid System

Bootstrap’s 12-column grid uses .row and .col classes.

Half width
Half width
VS Code Tip: Use Cmd + Shift + L (Mac) or Ctrl + Shift + L (Windows) to select all occurrences of "col" for quick edits.

5. Buttons

Bootstrap offers various button styles using .btn with different classes for colors and purposes.

Try them: Here are all Bootstrap button types in action!

When to Use:

  • btn-primary: Main actions (e.g., "Submit")
  • btn-secondary: Secondary actions (e.g., "Cancel")
  • btn-success: Positive actions (e.g., "Save")
  • btn-danger: Destructive actions (e.g., "Delete")
  • btn-warning: Caution actions (e.g., "Proceed with Care")
  • btn-info: Informational actions (e.g., "Learn More")
  • btn-light: Minimal style (e.g., light backgrounds)
  • btn-dark: High contrast (e.g., dark backgrounds)
  • btn-link: Looks like a link but behaves like a button
VS Code Tip: Press Cmd + / (Mac) or Ctrl + / (Windows) to comment out a button style you’re testing.

6. Navbar

Create a responsive navigation bar (like this site’s!) with .navbar.

VS Code Tip: Use Option + Up/Down (Mac) or Alt + Up/Down (Windows) to move lines of code (e.g., reorder nav items).

7. Troubleshooting

Common issues and fixes when setting up Bootstrap:

  • Not Working? Check if the CDN links are correct and in the right place.
  • JS Features Fail? Ensure the script is before , not in .
  • Styles Missing? Clear your browser cache (Cmd + Shift + R on Mac, Ctrl + F5 on Windows).
  • Need Help? Visit Bootstrap Docs.
VS Code Tip: Press Cmd + T (Mac) or Ctrl + T (Windows) to search for Bootstrap classes or files in your project.