Button styles and variants in Bootsrap - Practice Problems & Coding Challenges

Challenge - 5 Problems

📝 Syntax

intermediate

What is the output of this Bootstrap button code?

Consider the following HTML snippet using Bootstrap classes:

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

What will the button look like when rendered in a browser?

Bootsrap

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

A A green button with black text and shadow

B A red button with white text and sharp corners

C A transparent button with blue text and underline

D A blue button with white text and rounded corners

💡 Hint

Bootstrap's btn-primary class gives a blue background with white text.

The class 'btn-primary' in Bootstrap styles the button with a blue background and white text, along with rounded corners by default.

🧠 Conceptual

intermediate

Which Bootstrap class creates a button with no background and blue text?

You want a button that looks like a link: no background color but blue text. Which Bootstrap class should you use?

A btn-link

B btn-primary

C btn-outline-primary

D btn-secondary

💡 Hint

Think about which class makes buttons look like links.

The 'btn-link' class styles buttons to look like links with no background and blue text by default.

❓ selector

advanced

Which CSS selector targets all Bootstrap buttons with outline style?

Bootstrap uses classes like 'btn-outline-primary' for outline buttons. Which CSS selector matches all buttons with any outline style?

A [class^="btn-outline-"]

B .btn-outline-primary, .btn-outline-secondary, .btn-outline-success

C .btn[class*="outline"]

D .btn-outline

💡 Hint

Look for attribute selectors that match class names starting with a pattern.

The selector [class^="btn-outline-"] matches elements whose class attribute starts with 'btn-outline-', covering all outline button variants.

❓ layout

advanced

How to create a group of buttons that share the same width in Bootstrap?

You want three buttons side by side, each exactly the same width, filling the container evenly. Which Bootstrap approach achieves this?

A Use 'btn-group w-100' and add 'w-100' to each button

B Wrap buttons in 'btn-group' and add 'flex-fill' to each button

C Use 'btn-group' only, no extra classes

D Wrap buttons in 'btn-toolbar' and add 'flex-fill' to each button

💡 Hint

Bootstrap flex utilities help buttons fill space evenly.

Using 'btn-group' with 'flex-fill' on each button makes them share equal width inside the group.

❓ accessibility

expert

Which attribute improves accessibility for icon-only Bootstrap buttons?

You have a Bootstrap button that only shows an icon (no text). Which attribute should you add to make it accessible for screen readers?

Bootsrap

<button class="btn btn-primary"><i class="bi bi-star"></i></button>

A title="Star button"

B role="button"

C aria-label="Star button"

D alt="Star icon"

💡 Hint

Screen readers need descriptive text for buttons without visible text.

The 'aria-label' attribute provides an accessible name for screen readers when the button has no visible text.