Form layout (inline, horizontal) in Bootsrap - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to make the form inline using Bootstrap classes.

Bootsrap

<form class="[1]">
  <input type="text" class="form-control" placeholder="Name">
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

Drag options to blanks, or click blank then click option'

Aform-inline

Bform-horizontal

Cform-group

Dform-control

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'form-horizontal' instead of 'form-inline' for inline layout.

Forgetting to add any form layout class.

Use form-inline class to make the form display inline in Bootstrap.

2fill in blank

medium

Complete the code to create a horizontal form group with label and input side by side.

Bootsrap

<div class="form-group row">
  <label for="email" class="col-sm-2 col-form-label">Email</label>
  <div class="[1]">
    <input type="email" class="form-control" id="email" placeholder="Email">
  </div>
</div>

Drag options to blanks, or click blank then click option'

Acol-sm-10

Bform-inline

Cform-control

Dcol-form-label

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'form-inline' class inside the input container.

Not using Bootstrap grid classes for horizontal layout.

Use col-sm-10 to make the input take the remaining horizontal space next to the label in a horizontal form.

3fill in blank

hard

Fix the error in the horizontal form code by completing the missing class for the label.

Bootsrap

<div class="form-group row">
  <label for="password" class="[1]">Password</label>
  <div class="col-sm-10">
    <input type="password" class="form-control" id="password" placeholder="Password">
  </div>
</div>

Drag options to blanks, or click blank then click option'

Aform-group

Bcol-sm-2 col-form-label

Cform-inline

Dform-control

Attempts:

3 left

💡 Hint

Common Mistakes

Using only 'col-sm-2' without 'col-form-label'.

Using 'form-control' class on label.

The label in a horizontal form needs both col-sm-2 for width and col-form-label for proper alignment.

4fill in blank

hard

Fill both blanks to create an inline form with a text input and a submit button aligned horizontally.

Bootsrap

<form class="[1]">
  <input type="text" class="[2]" placeholder="Username">
  <button type="submit" class="btn btn-primary">Login</button>
</form>

Drag options to blanks, or click blank then click option'

Aform-inline

Bform-control

Cform-group

Dform-horizontal

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'form-group' instead of 'form-control' on input.

Missing 'form-inline' on the form tag.

Use form-inline on the form to make it inline, and form-control on the input for proper styling.

5fill in blank

hard

Fill all three blanks to create a horizontal form group with label, input, and help text below the input.

Bootsrap

<div class="form-group row">
  <label for="phone" class="[1]">Phone</label>
  <div class="[2]">
    <input type="tel" class="form-control" id="phone" placeholder="Phone number">
    <small class="form-text text-muted">[3]</small>
  </div>
</div>

Drag options to blanks, or click blank then click option'

Acol-sm-2 col-form-label

Bcol-sm-10

CEnter your phone number including area code

Dform-inline

Attempts:

3 left

💡 Hint

Common Mistakes

Not using grid classes on label and input container.

Forgetting to add help text or using wrong classes.

The label uses col-sm-2 col-form-label for horizontal layout, the input container uses col-sm-10, and the help text provides user guidance.