Text alignment utilities in Bootsrap - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to align the text to the center using Bootstrap classes.

Bootsrap

<p class="text-[1]">This text is centered.</p>

Drag options to blanks, or click blank then click option'

Aleft

Bright

Ccenter

Djustify

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'text-left' or 'text-right' instead of 'text-center'.

Forgetting to add the class attribute.

The Bootstrap class text-center aligns text to the center.

2fill in blank

medium

Complete the code to align the text to the right on large screens only.

Bootsrap

<p class="text-lg-[1]">This text is right aligned on large screens.</p>

Drag options to blanks, or click blank then click option'

Aleft

Bright

Ccenter

Djustify

Attempts:

3 left

💡 Hint

Common Mistakes

Using text-right without the breakpoint prefix.

Using text-lg-center instead of right.

The class text-lg-right aligns text to the right on large screens in Bootstrap.

3fill in blank

hard

Fix the error in the code to justify the text using Bootstrap classes.

Bootsrap

<div class="text-[1]">This text should be justified.</div>

Drag options to blanks, or click blank then click option'

Ajustify

Bcenter

Cright

Dleft

Attempts:

3 left

💡 Hint

Common Mistakes

Using text-center or text-right instead of text-justify.

Misspelling the class name.

The correct Bootstrap class to justify text is text-justify.

4fill in blank

hard

Fill both blanks to align text left on small screens and center on medium screens.

Bootsrap

<p class="text-[1] text-md-[2]">Responsive text alignment.</p>

Drag options to blanks, or click blank then click option'

Aleft

Bcenter

Cright

Djustify

Attempts:

3 left

💡 Hint

Common Mistakes

Using the same alignment for both blanks.

Mixing up breakpoint prefixes.

The class text-left aligns text left by default, and text-md-center centers text on medium screens and up.

5fill in blank

hard

Fill all three blanks to align text right on extra small screens, justify on small screens, and left on large screens.

Bootsrap

<div class="text-[1] text-sm-[2] text-lg-[3]">Multi-breakpoint text alignment.</div>

Drag options to blanks, or click blank then click option'

Aright

Bjustify

Cleft

Dcenter

Attempts:

3 left

💡 Hint

Common Mistakes

Using the wrong breakpoint prefix for the alignment.

Confusing justify with center or left.

Use text-right for extra small screens, text-sm-justify for small screens, and text-lg-left for large screens.