Button sizes in Bootsrap - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ rendering

intermediate

What size will this Bootstrap button render?

Given the following button code, what size will the button appear in the browser?

Bootsrap

<button type="button" class="btn btn-primary btn-lg">Click me</button>

A A medium (default) sized button

B A very small button

C A large button

D A button with extra padding but default font size

💡 Hint

Look at the class that controls size: btn-lg means large.

The class btn-lg in Bootstrap makes the button large. Without it, buttons are medium sized by default.

🧠 Conceptual

intermediate

Which class sets a small Bootstrap button?

Which Bootstrap class should you add to a button to make it smaller than the default size?

A btn-sm

B btn-xs

C btn-small

D btn-mini

💡 Hint

Bootstrap uses btn-sm for small buttons, not btn-xs or others.

The correct class for a small button in Bootstrap is btn-sm. Other classes like btn-xs or btn-mini are not valid in Bootstrap 5.

📝 Syntax

advanced

What error occurs with this button size class?

What happens if you use this button code in Bootstrap 5?

<button class="btn btn-primary btn-xs">Click</button>

Bootsrap

<button class="btn btn-primary btn-xs">Click</button>

A Button is hidden

B The button renders with default size because btn-xs is not recognized

C Button renders extra large

D Syntax error in HTML

💡 Hint

Bootstrap 5 does not have btn-xs class.

The class btn-xs is not defined in Bootstrap 5. The button will ignore it and render with default size.

❓ selector

advanced

Which CSS selector targets all large Bootstrap buttons?

Which CSS selector will select all buttons with the large size class in Bootstrap?

A .btn .btn-lg

B .btn-lg button

C button .btn-lg

D button.btn-lg

💡 Hint

Look for buttons that have both btn and btn-lg classes.

The selector button.btn-lg selects all <button> elements with the class btn-lg. Other options select descendants or are invalid.

❓ accessibility

expert

How to make a large Bootstrap button accessible?

You have a large button with class btn-lg. What should you add to improve accessibility for screen readers?

Bootsrap

<button class="btn btn-primary btn-lg">Submit</button>

A Add aria-label="Submit form" to describe the button action

B Add tabindex="-1" to prevent keyboard focus

C Add role="presentation" to hide it from screen readers

D Add style="font-size: 2rem;" inline for better visibility

💡 Hint

Screen readers need clear descriptions of button actions.

Adding aria-label gives screen readers a clear description of what the button does. tabindex="-1" removes keyboard focus which harms accessibility. role="presentation" hides the button from assistive tech, which is wrong. Inline styles do not improve accessibility.