0
0
Bootsrapmarkup~30 mins

Visibility utilities in Bootsrap - Mini Project: Build & Apply

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Bootstrap Visibility Utilities
📖 Scenario: You are building a simple webpage that shows different messages depending on the screen size. This helps users see the right content on phones, tablets, and desktops.
🎯 Goal: Create a webpage using Bootstrap visibility utilities to show or hide text blocks on different screen sizes.
📋 What You'll Learn
Use Bootstrap 5 visibility utility classes
Show a message only on small screens
Show a message only on medium screens
Show a message only on large screens
Use semantic HTML and include accessibility attributes
💡 Why This Matters
🌍 Real World
Websites often need to show or hide content depending on the device size to improve user experience and readability.
💼 Career
Understanding Bootstrap visibility utilities is useful for front-end developers to create responsive and accessible web pages quickly.
Progress0 / 4 steps
1
Create the HTML skeleton with Bootstrap link
Write the basic HTML5 structure with lang="en", meta charset="UTF-8", and viewport meta tag. Include the Bootstrap 5 CSS link from CDN inside the <head>. Add a <main> section with an empty <div> container with class container and id messages.
Bootsrap
Need a hint?

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

2
Add messages for small, medium, and large screens
Inside the <div id="messages" class="container">, add three <p> elements with these exact texts: "Visible only on small screens", "Visible only on medium screens", and "Visible only on large screens". Do not add any classes yet.
Bootsrap
Need a hint?

Make sure the texts match exactly and are inside separate <p> tags.

3
Add Bootstrap visibility utility classes to paragraphs
Add the Bootstrap classes to each <p> to control visibility: add d-block d-sm-none to the small screen message, d-none d-sm-block d-md-none to the medium screen message, and d-none d-md-block d-lg-none to the large screen message.
Bootsrap
Need a hint?

Use the Bootstrap display utility classes exactly as shown to control visibility by screen size.

4
Add accessibility and finalize the page
Add aria-live="polite" to the <div id="messages"> container to announce changes to screen readers. Also add a <header> with a <h1> titled "Responsive Visibility Example" above the <main>. Ensure the page is complete and valid.
Bootsrap
Need a hint?

Adding aria-live="polite" helps screen readers announce changes politely. The header gives a clear page title.