Form layout (inline, horizontal) in Bootsrap - Mini Project: Build & Apply

Bootstrap Form Layout: Inline and Horizontal

📖 Scenario: You are building a simple contact form for a website. The form should look neat and easy to use on both desktop and mobile devices.

🎯 Goal: Create a Bootstrap form with two different layouts: an inline form and a horizontal form. The inline form places inputs side by side on larger screens, and the horizontal form aligns labels and inputs in rows.

📋 What You'll Learn

Use Bootstrap 5 classes for styling and layout

Create an inline form with a text input and a submit button on the same line

Create a horizontal form with labels on the left and inputs on the right

Ensure the forms are responsive and accessible with proper labels

Include the Bootstrap CSS link in the HTML head

💡 Why This Matters

🌍 Real World

Forms are everywhere on websites for collecting user information. Knowing how to layout forms nicely with Bootstrap helps create professional and user-friendly interfaces.

💼 Career

Web developers often need to build accessible and responsive forms. Mastering Bootstrap form layouts is a valuable skill for front-end development jobs.

1

Set up the basic HTML structure with Bootstrap CSS

Create a basic HTML5 document with lang="en", meta charset="UTF-8", and meta viewport tags. Add the Bootstrap 5 CSS link inside the <head>. Inside the <body>, add a <main> element with a container <div class="container mt-4"> to hold the forms.

Bootsrap

    ">
    
    


    
        
            
        
    

Hint

Remember to include the Bootstrap CSS link from a CDN inside the <head> section.

2

Add an inline form with a text input and submit button

Inside the container <div class="container mt-4">, add a <form> with the class row row-cols-lg-auto g-3 align-items-center to create an inline form. Inside the form, add a text input with id="inlineInput" and label with for="inlineInput". Also add a submit button with the class btn btn-primary. The input and button should appear side by side on large screens.

Bootsrap

    
    
    
    Bootstrap Form Layout


    
        
            
                
                
                
            
        
    

Hint

Use visually-hidden class on the label to keep it accessible but hidden in the inline form.

3

Add a horizontal form with labels and inputs aligned in rows

Below the inline form, add a <form> with the class row g-3. For each form group, use a <div> with class col-md-3 for the label and col-md-9 for the input. Add two fields: one text input with id="horizontalName" and label for="horizontalName" with text "Name", and one email input with id="horizontalEmail" and label for="horizontalEmail" with text "Email". Add a submit button below aligned to the left with class btn btn-success.

Bootsrap

    
    
    
    Bootstrap Form Layout


    
        
            
                
                    Name
                    
                
                
                    Submit
                
            
            
                
                
                
                
            
        
    

Hint

Use col-md-3 for labels and col-md-9 for inputs to align them horizontally on medium and larger screens.

4

Make the forms accessible and add final touches

Add aria-label="Name input" to the inline form text input and aria-label="Submit button" to its submit button for accessibility. Also, add aria-label="Name input" and aria-label="Email input" to the horizontal form inputs. Finally, add a <header> with a heading <h1> above the forms with the text "Contact Us".

Bootsrap

    
    
    
    Bootstrap Form Layout


    
        
            
            
            
        
    

Hint

Use aria-label attributes on inputs and buttons to improve accessibility. Add a header with a clear page title.

Practice

1. What is the main purpose of using an inline form layout in Bootstrap?

easy

A. To hide form labels and only show inputs

B. To stack form controls vertically with labels on top

C. To place form controls and buttons in a single horizontal row for compactness

D. To create a multi-step form wizard

Solution

1. Step 1: Understand inline form layout

   Inline forms arrange inputs and buttons side by side in one row to save space.

2. Step 2: Compare with other layouts

   Unlike vertical or horizontal forms, inline forms keep everything compact horizontally.

3. Final Answer:

   To place form controls and buttons in a single horizontal row for compactness -> Option C

4. Quick Check:

   Inline form = compact horizontal layout [OK]

Hint: Inline forms put inputs and buttons in one row [OK]

Common Mistakes:

• Confusing inline with vertical stacking
• Thinking inline hides labels
• Assuming inline creates multi-step forms

2. Which Bootstrap class is used to create a horizontal form layout?

easy

A. .form-horizontal

B. .form-control

C. .form-row

D. .form-inline

Solution

1. Step 1: Identify horizontal form class

   Bootstrap uses .form-horizontal to align labels and inputs side by side.

2. Step 2: Differentiate from other classes

   .form-inline is for inline forms; .form-control styles inputs; .form-row is for grid rows.

3. Final Answer:

   .form-horizontal -> Option A

4. Quick Check:

   Horizontal form = .form-horizontal [OK]

Hint: Horizontal forms use .form-horizontal class [OK]

Common Mistakes:

• Using .form-inline for horizontal layout
• Confusing .form-control with layout classes
• Thinking .form-row alone creates horizontal forms

3. What will be the visual result of this Bootstrap form snippet?

<form class="form-inline">
  <label for="email" class="mr-2">Email</label>
  <input type="email" class="form-control mr-2" id="email" placeholder="Enter email">
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

medium

A. Form controls are stacked but labels are missing

B. Label appears above input, button below input vertically

C. Only the button is visible, label and input are hidden

D. Label, input, and button appear side by side in one horizontal row

Solution

1. Step 1: Analyze form class

   The form uses form-inline, which arranges controls horizontally.

2. Step 2: Check elements and spacing

   Label, input, and button have margin classes to separate them horizontally in one row.

3. Final Answer:

   Label, input, and button appear side by side in one horizontal row -> Option D

4. Quick Check:

   form-inline = horizontal row layout [OK]

Hint: form-inline means all controls in one row [OK]

Common Mistakes:

• Expecting vertical stacking with form-inline
• Ignoring margin classes causing cramped layout
• Thinking labels are hidden in inline forms

4. Identify the error in this horizontal form snippet:

<form class="form-horizontal">
  <label class="col-sm-2 control-label" for="name">Name</label>
  <input type="text" class="form-control col-sm-10" id="name" placeholder="Name">
</form>

medium

A. Label should not have control-label class

B. Input should be wrapped inside a <div class="col-sm-10"> for proper grid layout

C. Form must use form-inline instead of form-horizontal

D. Input is missing the form-group class

Solution

1. Step 1: Understand horizontal form grid

   In Bootstrap horizontal forms, inputs must be inside grid columns wrapped in a div for alignment.

2. Step 2: Check snippet structure

   The input has the column class but is not wrapped in a div, breaking the grid layout.

3. Final Answer:

   Input should be wrapped inside a <div class="col-sm-10"> for proper grid layout -> Option B

4. Quick Check:

   Horizontal form inputs need column div wrappers [OK]

Hint: Wrap inputs in column divs for horizontal forms [OK]

Common Mistakes:

• Adding column classes directly to inputs without wrapper
• Removing control-label class from labels
• Confusing form-inline with form-horizontal

5. You want a responsive horizontal form where labels take 3 columns and inputs take 9 columns on medium screens and above, but stack vertically on small screens. Which Bootstrap classes should you use?

hard

A. Use col-md-3 on labels and col-md-9 wrapped in div on inputs inside a form-horizontal

B. Use col-sm-3 on labels and col-sm-9 on inputs without wrappers

C. Use form-inline with col-3 on labels and col-9 on inputs

D. Use form-horizontal with fixed pixel widths on labels and inputs

Solution

1. Step 1: Choose breakpoint classes for responsiveness

   Using col-md-3 and col-md-9 applies columns on medium screens and larger, stacking on smaller.

2. Step 2: Wrap inputs in a div with column class inside form-horizontal

   This ensures proper horizontal alignment and responsive stacking.

3. Final Answer:

   Use col-md-3 on labels and col-md-9 wrapped in div on inputs inside a form-horizontal -> Option A

4. Quick Check:

   Responsive horizontal form = col-md-* + wrappers + form-horizontal [OK]

Hint: Use col-md-* classes with wrappers for responsive horizontal forms [OK]

Common Mistakes:

• Using col-sm-* classes causing stacking too early
• Not wrapping inputs in divs with column classes
• Using form-inline for horizontal responsive layout