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.