codex-lv3-may-2025

Level Navigation: 1

Level 5: Bootstrap Styling

User Story: As a user, I want the form to look attractive and easy to use so that I enjoy filling it out.

What You’ll Do

Add Bootstrap CSS to style your form and make it look professional.

Instructions

Link Bootstrap CSS via CDN in your HTML head
Add Bootstrap classes to your form elements
Style the form inputs and button

💡 Code Hints

Need help with Bootstrap? Check out these snippets:

Bootstrap CDN: Use https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css
Form styling: Use form-control class for inputs
Button styling: Use btn btn-primary classes

Show Me: Bootstrap CDN link in HTML head

<head>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <title>Mad Libs Form</title>
</head>

Show Me: Bootstrap form styling

<div class="container mt-5">
    <form method="GET" action="/create-mad-libs" class="row g-3">
        <div class="col-md-6">
            <label class="form-label">Name:</label>
            <input type="text" class="form-control" name="name">
        </div>
        <button type="submit" class="btn btn-primary">Submit</button>
    </form>
</div>

✅ Check

Open your webpage in a browser
Your form should look styled and professional
Inputs should have clean borders and padding
Button should have Bootstrap button styling
If styling doesn’t appear, check your Bootstrap CDN link