Bootsrapmarkup~30 mins

Display headings in Bootsrap - Mini Project: Build & Apply

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Display Headings with Bootstrap

📖 Scenario: You are creating a simple webpage that shows different heading styles using Bootstrap. This will help you understand how to use Bootstrap's heading classes to style text.

🎯 Goal: Build a webpage that displays six headings from h1 to h6 using Bootstrap classes display-1 to display-6.

📋 What You'll Learn

Use Bootstrap 5 CSS from CDN

Create headings with classes display-1 to display-6

Use semantic HTML5 structure

Make sure the page is responsive and accessible

💡 Why This Matters

🌍 Real World

Websites often use headings to organize content clearly and Bootstrap helps style them easily and consistently.

💼 Career

Knowing how to use Bootstrap for headings is useful for front-end developers to create visually appealing and accessible webpages quickly.

Progress0 / 4 steps

Create the basic HTML structure with Bootstrap link

Create a basic HTML5 page with lang="en" and charset="UTF-8". Add the Bootstrap 5 CSS CDN link inside the <head>. Include a <main> section with a container <div class="container"> inside the <body>.

Bootsrap




    
    
    Bootstrap Headings

Need a hint?

Remember to include the Bootstrap CSS link inside the <head> section.

Add the first heading with class display-1

Inside the <div class="container">, add an <h1> heading with the text Display Heading 1 and the Bootstrap class display-1.

Bootsrap




    
    
    Bootstrap Headings

Need a hint?

Use an <h1> tag with class display-1 and the exact text Display Heading 1.

Add headings from display-2 to display-6

Below the <h1> heading, add five more headings: <h2> with class display-2 and text Display Heading 2, <h3> with class display-3 and text Display Heading 3, <h4> with class display-4 and text Display Heading 4, <h5> with class display-5 and text Display Heading 5, and <h6> with class display-6 and text Display Heading 6.

Bootsrap




    
    
    Bootstrap Headings
    


    
        
            Display Heading 1

Need a hint?

Use the correct heading tags <h2> to <h6> with matching Bootstrap classes and text.

Add a page header with <header> and accessibility

Wrap all the headings inside a <header> element inside the container. Add an aria-label="Page headings" attribute to the <header> for accessibility.

Bootsrap




    
    
    Bootstrap Headings
    


    
        
             with aria-label="Page headings" -->
            Display Heading 1
            Display Heading 2
            Display Heading 3
            Display Heading 4
            Display Heading 5
            Display Heading 6

Need a hint?

Use a <header> tag with aria-label="Page headings" wrapping all the heading tags.