Border utilities in Bootsrap - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

What does the class border-top-0 do in Bootstrap?

In Bootstrap, what visual effect does applying the class border-top-0 to an element have?

A Adds a dotted top border to the element.

B Adds a thick top border to the element.

C Removes the top border of the element.

D Removes all borders except the top border.

💡 Hint

Think about what the suffix -0 means in Bootstrap border utility classes.

The class border-top-0 removes the top border of the element by setting its width to zero. It does not affect other borders.

📝 Syntax

intermediate

Which class adds a border only on the left side in Bootstrap?

You want to add a visible border only on the left side of a div using Bootstrap border utilities. Which class should you use?

A border-left

B border-start

C border-left-0

D border-left-side

💡 Hint

Bootstrap 4 uses physical direction classes like border-left.

Bootstrap 5 uses border-start for logical properties supporting different text directions. border-left is used in Bootstrap 4.

❓ rendering

advanced

What is the visual result of applying border border-primary rounded classes?

If you apply the classes border border-primary rounded to a button, what will you see?

Bootsrap

<button class="border border-primary rounded">Click me</button>

A A button with a blue border and rounded corners.

B A button with no border and sharp corners.

C A button with a red border and square corners.

D A button with a thick black border and rounded corners.

💡 Hint

The border-primary class applies the primary theme color to the border.

The border class adds a border, border-primary colors it blue (default primary color), and rounded gives the corners a smooth curve.

❓ selector

advanced

Which class removes all borders from an element in Bootstrap?

You want to remove all borders from a div using Bootstrap classes. Which class should you use?

A border-0

B no-border

C border-none

D border-remove

💡 Hint

Bootstrap uses numeric suffixes to control border width.

The class border-0 sets the border width to zero on all sides, effectively removing all borders.

❓ accessibility

expert

How to ensure border color changes remain accessible for users with color blindness?

You use border-success and border-danger classes to indicate status. What should you do to keep these borders accessible for users with color blindness?

A Remove borders and use background colors instead.

B Only rely on border color changes without any additional indicators.

C Use very light border colors so they are less distracting.

D Add text labels or icons alongside the border color to convey meaning.

💡 Hint

Think about how people who cannot distinguish colors can still understand status.

Color alone can be hard to distinguish for some users. Adding text or icons ensures everyone understands the meaning regardless of color perception.