Form layout (inline, horizontal) in Bootsrap - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ rendering

intermediate

Identify the inline form layout

Which option correctly renders a Bootstrap inline form where inputs and labels appear side by side on the same line?

A

<form>
  <div class="form-group">
    <label for="email">Email:</label>
    <input type="email" class="form-control" id="email" placeholder="Enter email">
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

B

<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>

C

<form>
  <div class="form-group row">
    <label for="email" class="col-sm-2 col-form-label">Email:</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="email" placeholder="Enter email">
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

D

<form class="form-horizontal">
  <div class="form-group">
    <label for="email" class="control-label col-sm-2">Email:</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="email" placeholder="Enter email">
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

💡 Hint

Look for the class that makes form elements appear side by side in Bootstrap.

Bootstrap's form-inline class arranges form controls and labels horizontally on the same line, making the form inline.

Other options use form-group and grid classes for vertical or horizontal layouts but not inline.

❓ selector

intermediate

Bootstrap class for horizontal form labels

In a Bootstrap horizontal form, which class is used to align labels to the right side of their grid column?

A text-right

B text-left

C text-center

D text-justify

💡 Hint

Think about how to align text to the right in Bootstrap.

The text-right class aligns text to the right side of its container, commonly used for labels in horizontal forms.

Other options align text differently or justify it.

🧠 Conceptual

advanced

Accessibility in inline forms

Which practice improves accessibility for screen readers in a Bootstrap inline form?

A Use <code>aria-label</code> on inputs without visible labels

B Remove labels to save space since inputs have placeholders

C Use only placeholders as labels for inputs

D Use <code>aria-hidden="true"</code> on all labels

💡 Hint

Screen readers need clear labels even if not visible.

Using aria-label on inputs without visible labels provides descriptive text for screen readers, improving accessibility.

Placeholders are not sufficient labels, and hiding labels or removing them harms accessibility.

📝 Syntax

advanced

Correct Bootstrap horizontal form structure

Which option correctly uses Bootstrap classes to create a horizontal form group with label and input aligned side by side?

A

<div class="form-group">
  <label for="name" class="col-sm-3">Name</label>
  <input type="text" class="form-control col-sm-9" id="name" placeholder="Enter name">
</div>

B

<div class="row form-group">
  <label for="name" class="col-form-label col-sm-3">Name</label>
  <input type="text" class="form-control col-sm-9" id="name" placeholder="Enter name">
</div>

C

<div class="form-group row">
  <label for="name" class="col-sm-3 col-form-label">Name</label>
  <div class="col-sm-9">
    <input type="text" class="form-control" id="name" placeholder="Enter name">
  </div>
</div>

D

<div class="form-group row">
  <label for="name" class="col-sm-3 control-label">Name</label>
  <input type="text" class="form-control col-sm-9" id="name" placeholder="Enter name">
</div>

💡 Hint

Bootstrap horizontal forms use a row container with label and input in separate columns.

Option C correctly uses form-group row with label having col-sm-3 col-form-label and input inside a col-sm-9 div.

Other options misuse grid classes or omit wrapping divs, breaking layout.

❓ layout

expert

Responsive behavior of Bootstrap inline forms

What happens to a Bootstrap inline form on very small screens (e.g., mobile) if no responsive classes are added?

A Form controls remain inline and may overflow horizontally causing scroll

B Form controls automatically resize to fit horizontally without overflow

C Form controls disappear due to lack of responsive classes

D Form controls stack vertically because inline forms collapse on small screens

💡 Hint

Consider how inline elements behave on narrow viewports without special classes.

Bootstrap's form-inline class stacks form controls vertically on small screens (viewports narrower than 576px).

This responsive behavior prevents horizontal overflow.

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