Bootsrapmarkup~15 mins

Heading classes in Bootsrap - Mini Project: Build & Apply

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Styling Headings with Bootstrap Classes

📖 Scenario: You are creating a simple webpage for a local bakery. The bakery wants clear and attractive headings to highlight different sections like the bakery name, menu, and contact information.

🎯 Goal: Build a webpage using Bootstrap heading classes to style the main title and section headings with different sizes.

📋 What You'll Learn

Use Bootstrap heading classes h1, h3, and h5 to style headings

Create a main heading with class h1 for the bakery name

Create a subheading with class h3 for the menu section

Create a smaller heading with class h5 for the contact section

Use semantic HTML5 elements for structure

💡 Why This Matters

🌍 Real World

Websites often need clear headings to organize content and make it easy to read. Using Bootstrap heading classes helps maintain consistent styling across pages.

💼 Career

Knowing how to use Bootstrap classes for typography is a common skill for front-end web developers and designers working on real websites.

Progress0 / 4 steps

Create the HTML skeleton with Bootstrap link

Create a basic HTML5 page with lang="en" and charset="UTF-8". Add the Bootstrap CSS link inside the <head>. Include a <main> element where you will add headings later.

Bootsrap




    
    
    Bakery

Need a hint?

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

Add the main heading with Bootstrap h1 class

Inside the <main> element, add a heading with the text Sweet Treats Bakery and give it the Bootstrap class h1.

Bootsrap




    
    
    Bakery

Need a hint?

Use the h1 tag with class h1 inside <main>.

Add a subheading with Bootstrap h3 class for the menu

Below the main heading, add a heading with the text Our Menu and give it the Bootstrap class h3.

Bootsrap




    
    
    Bakery
    


    
        Sweet Treats Bakery

Need a hint?

Use the h3 tag with class h3 below the main heading.

Add a smaller heading with Bootstrap h5 class for contact info

Below the menu heading, add a heading with the text Contact Us and give it the Bootstrap class h5.

Bootsrap




    
    
    Bakery
    


    
        Sweet Treats Bakery
        Our Menu

Need a hint?

Use the h5 tag with class h5 below the menu heading.