Text alignment utilities in Bootsrap - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

What does the class text-center do in Bootstrap?

In Bootstrap, what is the visual effect of applying the class text-center to a paragraph?

A It aligns the text to the right side of the container.

B It aligns the text to the left side of the container.

C It justifies the text so that both edges align with the container edges.

D It aligns the text to the center horizontally within its container.

💡 Hint

Think about how text alignment works in CSS and what 'center' means.

The text-center class in Bootstrap applies text-align: center; CSS style, which centers the text horizontally inside its container.

📝 Syntax

intermediate

Which Bootstrap class aligns text to the right?

You want to align a heading's text to the right side using Bootstrap classes. Which class should you use?

A text-end

B text-right

C text-justify

D text-left

💡 Hint

Bootstrap 5 uses logical properties for alignment.

Bootstrap 5 uses text-start and text-end for left and right alignment respectively, to support different writing directions. text-right is deprecated.

❓ rendering

advanced

What is the visual output of this HTML snippet with Bootstrap classes?

Given the following HTML code, what will be the horizontal alignment of the text inside the <div> when viewed in a browser?

<div class="text-sm-start text-md-center text-lg-end">Responsive Text</div>

A Text is left-aligned on small screens, centered on medium screens, and right-aligned on large screens.

B Text is always centered regardless of screen size.

C Text is right-aligned on small screens, left-aligned on medium screens, and centered on large screens.

D Text is left-aligned on all screen sizes.

💡 Hint

Bootstrap uses responsive classes that apply at different screen widths.

The classes text-sm-start, text-md-center, and text-lg-end apply text alignment starting at small, medium, and large breakpoints respectively. So the text aligns left on small screens, center on medium, and right on large screens.

❓ selector

advanced

Which CSS property does Bootstrap's text-justify class apply?

Bootstrap has a class called text-justify. Which CSS property and value does it apply to the element?

A text-align: center;

B text-align: justify;

C text-align: right;

D text-align: start;

💡 Hint

Justify means text edges align on both left and right sides.

The text-justify class applies text-align: justify; which spreads out the text so both left and right edges align with the container edges.

❓ accessibility

expert

How does text alignment affect accessibility and readability?

Which statement best explains the accessibility impact of using text-center for large blocks of text in Bootstrap?

A Text alignment has no impact on accessibility or readability.

B Center alignment improves readability for all users by creating balanced text edges.

C Center-aligned large text blocks can reduce readability for users with dyslexia or cognitive disabilities.

D Center alignment is recommended for all paragraphs to enhance screen reader performance.

💡 Hint

Think about how eyes track lines of text and how alignment affects that.

Center-aligned large blocks of text can make it harder for some users, especially those with dyslexia or cognitive disabilities, to follow lines because the starting point of each line changes. Left-aligned text is generally easier to read.