Input groups in Bootsrap - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is an input group in Bootstrap?

An input group in Bootstrap is a way to combine inputs and add-ons like text, buttons, or icons together in one line to make forms easier to use and look neat.

beginner

How do you add text before an input field using Bootstrap input groups?

You wrap the input and the text inside a <div class='input-group'>. Then add a <span class='input-group-text'> with the text before the <input> element.

intermediate

Which Bootstrap class is used to group buttons with inputs?

The class input-group is used to group buttons and inputs together. Buttons inside input groups usually have the class btn and are placed inside input-group-text containers.

intermediate

How can you add a button inside an input group on the right side?

Place the button inside a <button class='btn btn-primary'> directly inside the input-group container, after the <input> element.

beginner

Why are input groups useful in forms?

Input groups help users understand the input's purpose by adding context like units, currency symbols, or action buttons. They also keep the form clean and aligned, improving user experience.

Which Bootstrap class wraps an input and its add-ons to create an input group?

A input-group

B form-control

C input-addon

D form-group

The input-group class is used to wrap inputs and add-ons together in Bootstrap.

How do you add static text before an input field in Bootstrap input groups?

A Use <code>&lt;span class='input-group-text'&gt;</code> before the input inside <code>input-group</code>

B Add <code>placeholder</code> attribute to input

C Wrap input in <code>form-text</code>

D Use <code>&lt;label&gt;</code> inside input group

Static text is added with input-group-text inside the input-group container before the input.

Which element is commonly used to add a button inside an input group?

A <code>&lt;span class='btn'&gt;</code>

B <code>&lt;input type='button'&gt;</code>

C <code>&lt;div class='btn'&gt;</code>

D <code>&lt;button class='btn'&gt;</code>

Buttons inside input groups use the <button> element with Bootstrap's btn class.

What is the purpose of input groups in forms?

A To create dropdown menus

B To combine inputs with related text or buttons for clarity

C To validate inputs automatically

D To add animations to inputs

Input groups combine inputs with text or buttons to make forms clearer and easier to use.

In Bootstrap, which class is used to style the text or button inside an input group?

A input-text

B form-control

C input-group-text

D btn-group

The input-group-text class styles text or buttons inside input groups.

Explain how to create an input group with a dollar sign before a text input using Bootstrap.

Think about wrapping the input and the dollar sign text inside a special container.

Describe why input groups improve user experience in web forms.

Consider how adding symbols or buttons next to inputs helps users.