Bootsrapmarkup~30 mins

Input groups in Bootsrap - Mini Project: Build & Apply

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Create a Bootstrap Input Group for Email Subscription

📖 Scenario: You are building a simple newsletter subscription form for a website. The form should have an input field for the user's email and a button to submit the subscription.

🎯 Goal: Build a Bootstrap input group that combines an email input field and a subscribe button in one line, styled properly using Bootstrap classes.

📋 What You'll Learn

Use Bootstrap 5 input group components

Create an input field with placeholder text 'Enter your email'

Add a button labeled 'Subscribe' next to the input field

Ensure the input and button are visually connected as one group

Use semantic HTML and accessible attributes

💡 Why This Matters

🌍 Real World

Input groups are common in forms on websites for collecting user data like emails, search queries, or passwords. They improve user experience by grouping related controls.

💼 Career

Knowing how to use Bootstrap input groups is useful for front-end developers to quickly build clean, accessible, and responsive forms in professional web projects.

Progress0 / 4 steps

Create the basic HTML structure with Bootstrap CSS link

Write the basic HTML5 skeleton including doctype, html with lang="en", head with meta charset="UTF-8", meta viewport, and link to Bootstrap 5 CSS from CDN. Also add an empty body tag.

Bootsrap

Need a hint?

Remember to include the Bootstrap CSS link inside the <head> section for styling.

Add a container and a form element inside the body

Inside the body, add a <div> with class container mt-5 to center content with margin top. Inside this container, add a <form> element with aria-label="Subscribe to newsletter" for accessibility.

Bootsrap




    
    
    
    Email Subscription

Need a hint?

Use a div with class container mt-5 and inside it add a form with an aria-label describing its purpose.

Add a Bootstrap input group with email input and subscribe button

Inside the form, add a div with class input-group. Inside this div, add an input element with type="email", class form-control, placeholder Enter your email, and aria-label="Email address". Next to it, add a button with class btn btn-primary, type submit, and text Subscribe.

Bootsrap




    
    
    
    Email Subscription

Need a hint?

Use a div with class input-group to wrap the input and button. The input should have type email and the button should have type submit.

Add Bootstrap JavaScript bundle before closing body tag

Before the closing </body> tag, add a script tag to load Bootstrap 5 JavaScript bundle from CDN for interactive components.

Bootsrap




    
    
    
    Email Subscription


    
        
            
                
                Subscribe

Need a hint?

Include the Bootstrap JavaScript bundle before the closing </body> tag to enable interactive features.