Checkboxes and radios in Bootsrap - Mini Project: Build & Apply

Creating a Bootstrap Form with Checkboxes and Radios

📖 Scenario: You are building a simple survey form for a website using Bootstrap. The form will ask users to select their favorite fruits using checkboxes and choose their preferred contact method using radio buttons.

🎯 Goal: Create a Bootstrap form that includes a group of checkboxes for fruits and a group of radio buttons for contact methods. The form should be accessible and visually clear.

📋 What You'll Learn

Use Bootstrap 5 classes for styling checkboxes and radio buttons

Include at least three checkboxes with labels: 'Apple', 'Banana', 'Cherry'

Include at least two radio buttons with labels: 'Email', 'Phone'

Use proper for attributes in labels and matching id in inputs

Wrap the form controls in semantic HTML elements

Ensure the form is responsive and accessible

💡 Why This Matters

🌍 Real World

Forms with checkboxes and radio buttons are common in surveys, registrations, and preferences settings on websites.

💼 Career

Understanding how to build accessible, styled forms with Bootstrap is a key skill for front-end web developers and UI designers.

1

Create the basic HTML form structure

Create a <form> element with a class of p-3 inside a <main> element. Inside the form, add a <fieldset> with a <legend> that says Favorite Fruits.

Bootsrap

Need a hint?

Use <form> with class p-3 for padding. Use <fieldset> and <legend> to group related inputs.

2

Add checkboxes for fruits

Inside the <fieldset>, add three Bootstrap styled checkboxes with labels: Apple, Banana, and Cherry. Use class="form-check" on a <div> wrapper for each checkbox. Each <input> should have type="checkbox", a unique id, and class="form-check-input". Each <label> should have class="form-check-label" and a for attribute matching the input's id.

Bootsrap

  
    
      Favorite Fruits
      
    
  

Need a hint?

Wrap each checkbox input and label in a div with class form-check. Use matching id and for attributes for accessibility.

3

Add radio buttons for contact method

Below the <fieldset> for fruits, add another <fieldset> with a <legend> that says Preferred Contact Method. Inside it, add two Bootstrap styled radio buttons with labels: Email and Phone. Use class="form-check" on wrappers, type="radio" on inputs, class="form-check-input" on inputs, and class="form-check-label" on labels. Both radio inputs should share the same name="contactMethod" attribute. Use unique id values contactEmail and contactPhone.

Bootsrap

  
    
      Favorite Fruits
      
        
        Apple
      
      
        
        Banana
      
      
        
        Cherry
      
    
    
  

Need a hint?

Use a new fieldset with a legend for the radio buttons. Make sure both radios share the same name attribute for grouping.

4

Add a submit button and finalize the form

Below the last <fieldset>, add a Bootstrap styled submit button with the text Submit. Use a <button> element with type="submit" and class="btn btn-primary mt-3".

Bootsrap

  
    
      Favorite Fruits
      
        
        Apple
      
      
        
        Banana
      
      
        
        Cherry
      
    
    
      Preferred Contact Method
      
        
        Email
      
      
        
        Phone
      
    
    
  

Need a hint?

Add a <button> with type="submit" and Bootstrap classes btn btn-primary mt-3 for styling and spacing.