Text alignment utilities in Bootsrap - Mini Project: Build & Apply

Text alignment utilities with Bootstrap

📖 Scenario: You are creating a simple webpage that shows three paragraphs of text. Each paragraph needs to have a different text alignment to demonstrate how Bootstrap's text alignment utilities work.

🎯 Goal: Build a webpage with three paragraphs. The first paragraph's text should be aligned to the left, the second paragraph's text should be centered, and the third paragraph's text should be aligned to the right using Bootstrap text alignment classes.

📋 What You'll Learn

Use Bootstrap 5 CSS via CDN in the <head> section

Create three paragraphs inside the <main> element

Apply Bootstrap text alignment utility classes text-start, text-center, and text-end to the paragraphs respectively

Use semantic HTML5 structure with <main> and <p> tags

Ensure the page is responsive and accessible

💡 Why This Matters

🌍 Real World

Text alignment is a common need in webpages to improve readability and design. Bootstrap's utility classes make it easy to align text without writing custom CSS.

💼 Career

Knowing how to use Bootstrap utilities for text alignment helps you quickly build professional and responsive layouts, a valuable skill for frontend web development jobs.

1

Create the basic HTML structure with Bootstrap CSS

Create a basic HTML5 page with lang="en" in the <html> tag. Inside the <head>, add the charset UTF-8 meta tag, the viewport meta tag for responsiveness, and link the Bootstrap 5 CSS CDN: https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css. Add an empty <main> element inside the <body>.

Bootsrap

Hint

Remember to add the lang attribute to the <html> tag and include the Bootstrap CSS link inside the <head>.

2

Add three paragraphs inside <main>

Inside the existing <main> element, add three paragraphs with the exact texts: "This text is aligned left.", "This text is centered.", and "This text is aligned right." in that order.

Bootsrap

    
    
    
    Text Alignment Utilities


    
        
    

Hint

Make sure the paragraphs have exactly the texts given, in the correct order.

3

Add Bootstrap text alignment classes to paragraphs

Add the Bootstrap class text-start to the first paragraph, text-center to the second paragraph, and text-end to the third paragraph to align their text left, center, and right respectively.

Bootsrap

    
    
    
    Text Alignment Utilities


    
        This text is aligned left. 
        This text is centered. 
        This text is aligned right. 
    

Hint

Use the Bootstrap classes exactly as text-start, text-center, and text-end on the paragraphs.

4

Add a page title and accessibility improvements

Add a <title> tag with the text Text Alignment Utilities inside the <head>. Also, add an aria-label="Main content" attribute to the <main> element for accessibility.

Bootsrap

    
    
    
    


    
        
        This text is aligned left.
        This text is centered.
        This text is aligned right.
    

Hint

The <title> tag goes inside the <head>. The aria-label attribute goes inside the <main> tag.

Practice

1. Which Bootstrap class aligns text to the right side of its container?

easy

A. text-start

B. text-center

C. text-right

D. text-end

Solution

1. Step 1: Understand Bootstrap text alignment classes

   Bootstrap uses text-start for left, text-center for center, and text-end for right alignment.

2. Step 2: Identify the class for right alignment

   The class text-end aligns text to the right side of the container.

3. Final Answer:

   text-end -> Option D

4. Quick Check:

   Right aligned text = text-end [OK]

Hint: Right alignment uses text-end class in Bootstrap [OK]

Common Mistakes:

• Using text-right which is not a Bootstrap 5 class
• Confusing text-start with right alignment
• Choosing text-center instead of right alignment

2. Which of the following is the correct syntax to center text on small screens and larger using Bootstrap?

easy

A. text-sm-center

B. text-center-sm

C. text-center-sm-up

D. text-center-sm-down

Solution

1. Step 1: Recall Bootstrap responsive text alignment classes

   Bootstrap uses the format text-{breakpoint}-{alignment} for responsive text alignment.

2. Step 2: Match the correct syntax for small screens and up

   The correct class to center text on small screens and larger is text-sm-center.

3. Final Answer:

   text-sm-center -> Option A

4. Quick Check:

   Responsive center text = text-sm-center [OK]

Hint: Responsive classes use text-{breakpoint}-{alignment} format [OK]

Common Mistakes:

• Placing breakpoint after alignment like text-center-sm
• Adding extra suffixes like -up or -down which don't exist
• Using incorrect order of class parts

3. What will be the alignment of the text inside this <p> tag on a medium screen?

<p class="text-md-end">Hello Bootstrap!</p>

medium

A. Text aligned to the left

B. Text aligned to the center

C. Text aligned to the right

D. Text alignment unchanged (default left)

Solution

1. Step 1: Understand the class text-md-end

   This class aligns text to the right starting at medium screen sizes and larger.

2. Step 2: Determine alignment on medium screen

   On medium screens, the text will be aligned to the right because of text-md-end.

3. Final Answer:

   Text aligned to the right -> Option C

4. Quick Check:

   Medium screen text alignment = right [OK]

Hint: md-end means right alignment on medium screens and up [OK]

Common Mistakes:

• Assuming text is centered instead of right aligned
• Thinking alignment applies only on small screens
• Ignoring responsive breakpoint effect

4. You want to align text to the center on all screen sizes but accidentally use text-center-sm. What is the problem with this class?

medium

A. It centers text only on small screens and larger, not on extra small screens

B. It causes a syntax error and text won't display

C. It aligns text to the left instead of center

D. It centers text only on extra small screens

Solution

1. Step 1: Understand text-center-sm meaning

   This class centers text starting from small screens and larger, but not on extra small screens.

2. Step 2: Identify the problem for extra small screens

   On extra small screens, text will not be centered but use default alignment (usually left).

3. Final Answer:

   It centers text only on small screens and larger, not on extra small screens -> Option A

4. Quick Check:

   text-center-sm skips extra small screens [OK]

Hint: Responsive classes start applying at their breakpoint, not before [OK]

Common Mistakes:

• Thinking it centers text on all screen sizes
• Assuming it causes syntax errors
• Confusing small screens with extra small screens

5. You want text to be left aligned on extra small screens, centered on medium screens, and right aligned on large screens. Which class combination achieves this?

hard

A. text-start text-center-md text-end-lg

B. text-start text-md-center text-lg-end

C. text-left text-center text-right

D. text-start-md text-center-lg text-end

Solution

1. Step 1: Identify classes for each breakpoint

   Left aligned on extra small screens uses text-start (applies by default). Center on medium screens uses text-md-center. Right on large screens uses text-lg-end.

2. Step 2: Check the class combination syntax

   text-start text-md-center text-lg-end correctly uses text-start, text-md-center, and text-lg-end in proper order and syntax.

3. Final Answer:

   text-start text-md-center text-lg-end -> Option B

4. Quick Check:

   Left, center, right at xs, md, lg = text-start text-md-center text-lg-end [OK]

Hint: Use text-start, text-md-center, text-lg-end for progressive alignment [OK]

Common Mistakes:

• Using incorrect class order or syntax
• Using deprecated classes like text-left
• Mixing breakpoint and alignment order incorrectly