Essential Bootstrap 5: A Guided Tutorial Using Hangman Stage 1

This page introduces the essential Bootstrap 5 features used in our Hangman Stage 1 project. You'll learn what Bootstrap is, why we use it, and how to use its classes and components to build responsive, attractive web apps quickly and effectively.

1. What is Bootstrap 5?

Bootstrap 5 is a popular open-source CSS framework that helps you build modern, responsive websites quickly. It provides ready-to-use classes for layout, typography, buttons, forms, and more—so you can focus on your content and logic.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">

2. Why Use Bootstrap?

• Responsive Design: Looks great on all devices (phones, tablets, desktops).
• Consistent Styling: Professional look with minimal effort.
• Easy Layouts: Powerful grid and utility classes for spacing and alignment.
• Prebuilt Components: Buttons, navbars, alerts, and more—ready to use.

3. Major Bootstrap Features Used in Hangman Stage 1

• Containers: .container centers and pads your content.
• Typography: .display-4, .text-center, .fw-bold, .mb-4 for headings, alignment, and spacing.
• Buttons: .btn, .btn-primary, .btn-outline-secondary for interactive elements.
• Flexbox Utilities: .d-flex, .flex-wrap, .justify-content-center for flexible layouts.
• Spacing Utilities: .mb-3, .py-5, .mt-4 for margin and padding.
• Alerts: .alert, .alert-info for informational messages.
• Navbar: .navbar, .navbar-brand, .bg-primary for navigation.

<div class="container py-5">...</div>
<h1 class="text-center mb-4">Hangman Game - Stage 1</h1>
<button class="btn btn-primary">Restart Game</button>
<a class="btn btn-outline-secondary" href="hangmanChatlogStg1.html">View AI Chatlog</a>
<div class="d-flex flex-wrap justify-content-center mb-3">...</div>

4. How to Use Bootstrap Classes

• Layout: Use .container for centered, padded content. Use .d-flex and .flex-wrap for flexible layouts.
• Typography: Use .display-4 for large headings, .fw-bold for bold text, .text-center for centered text.
• Buttons: Use .btn plus a color class (.btn-primary, .btn-outline-secondary) for styled buttons. Outline buttons fill with color on hover.
• Spacing: Use .mb-3 (margin-bottom), .py-5 (padding-y), etc., for spacing between elements.
• Alerts: Use .alert and .alert-info for info boxes.
• Navbar: Use .navbar, .navbar-brand, .bg-primary for a responsive navigation bar.

5. Example: Button Variations

<button class="btn btn-primary">Primary Button</button>
<button class="btn btn-outline-secondary">Outline Button</button>
<button class="btn btn-success">Success Button</button>

Try changing the color class (btn-primary, btn-success, etc.) to see different styles. Outline buttons are great for secondary actions and fill with color on hover.

6. Making Your Site Responsive

• Bootstrap’s grid and utility classes automatically adjust layouts for different screen sizes.
• Use .container and .row/.col for more complex layouts.
• Test your site on different devices or resize your browser window to see Bootstrap in action.

7. Tips for Using Bootstrap Effectively

• Use Bootstrap classes for quick, consistent styling—no need to write custom CSS for everything.
• Combine Bootstrap with your own CSS for unique designs.
• Read the Bootstrap documentation for more components and utilities.
• Use btn-outline-* classes for buttons that fill on hover.
• Use spacing utilities (mb-3, py-5, etc.) to keep your layout clean and readable.

8. See Bootstrap in Action

Explore the game, AI chatlog, HTML guide, and CSS guide to see how Bootstrap 5 brings everything together!