Form layout (inline, horizontal) in Bootsrap - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is an inline form layout in Bootstrap?

An inline form layout arranges form controls side-by-side in a single horizontal line, making the form compact and suitable for short forms or search bars.

beginner

How does a horizontal form layout differ from an inline form layout in Bootstrap?

A horizontal form layout aligns labels and controls side-by-side but stacks multiple form groups vertically, providing clear label-control pairs with consistent spacing.

intermediate

Which Bootstrap class is used to create an inline form?

The class .row row-cols-lg-auto g-3 align-items-center combined with form-control on inputs helps create inline forms. Also, .form-inline was used in older versions but is replaced by utility classes in Bootstrap 5.

intermediate

What Bootstrap classes help create a horizontal form layout?

Use .row to create a grid row, .col-sm-2 for labels, and .col-sm-10 for inputs to align labels and controls side-by-side horizontally.

beginner

Why is accessibility important in form layouts?

Accessibility ensures all users, including those using screen readers or keyboard navigation, can understand and use the form easily. Proper labels, focus order, and contrast are key.

Which Bootstrap class is best for aligning labels and inputs side-by-side in a horizontal form?

A .row with .col-sm-* classes

B .form-inline

C .container-fluid

D .d-inline-block

Using .row with .col-sm-* classes creates a grid layout that aligns labels and inputs side-by-side in horizontal forms.

What is the main visual difference between inline and horizontal forms?

A No difference

B Inline forms stack vertically, horizontal forms are side-by-side

C Inline forms use tables, horizontal forms use divs

D Inline forms place controls side-by-side in one line, horizontal forms stack groups vertically with side-by-side label-control pairs

Inline forms put all controls in one line, while horizontal forms stack form groups vertically but align label and control side-by-side.

Which Bootstrap utility class helps vertically center form controls in inline forms?

A justify-content-start

B align-items-center

C text-center

D float-left

The class align-items-center vertically centers items in a flex container, useful for inline form controls.

In Bootstrap 5, which class replaced the older .form-inline for inline forms?

A .d-inline-flex with gap utilities

B .form-horizontal

C .form-group-inline

D .form-row

Bootstrap 5 uses flexbox utilities like .d-inline-flex and gap classes to create inline forms instead of .form-inline.

Why should labels be associated with inputs in forms?

A To disable inputs

B To make the form look colorful

C To improve accessibility and allow clicking the label to focus input

D To reduce form size

Associating labels with inputs improves accessibility and usability by linking the label text to the input control.

Explain how to create an inline form layout using Bootstrap 5 classes.

Think about flexbox and spacing utilities.

Describe the structure and classes needed for a horizontal form layout in Bootstrap.

Focus on grid columns for label and input alignment.