Bootsrapmarkup~15 mins

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

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

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.

Progress0 / 4 steps

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

Need a hint?

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

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

Need a hint?

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

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.

Need a hint?

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

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.

Need a hint?

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