0
0
Bootsrapmarkup~30 mins

Display utilities in Bootsrap - Mini Project: Build & Apply

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Bootstrap Display Utilities Practice
📖 Scenario: You are creating a simple webpage that uses Bootstrap's display utilities to show and hide content responsively.
🎯 Goal: Build a webpage with three text blocks. Use Bootstrap display utility classes to control their visibility on different screen sizes.
📋 What You'll Learn
Use Bootstrap 5 CDN for styles
Create three <div> elements with text content
Apply d-none and d-block classes with responsive breakpoints
Ensure the first block is always visible
Make the second block visible only on medium and larger screens
Make the third block visible only on large and larger screens
💡 Why This Matters
🌍 Real World
Web developers often need to show or hide content based on screen size to improve user experience on different devices.
💼 Career
Knowing how to use Bootstrap display utilities helps developers quickly build responsive layouts without writing custom CSS.
Progress0 / 4 steps
1
Set up the basic HTML structure with Bootstrap
Create a basic HTML5 document with lang="en", include the meta charset="UTF-8" and meta name="viewport" content="width=device-width, initial-scale=1" tags. Add the Bootstrap 5 CSS CDN link inside the <head>. Inside the <body>, add a <main> element with a container <div class="container">.
Bootsrap
Need a hint?

Remember to include the Bootstrap CSS link inside the <head> and set up the container inside <main>.

2
Add three text blocks inside the container
Inside the <div class="container">, add three <div> elements with the exact texts: "Always visible block", "Visible on medium and larger screens", and "Visible on large and larger screens" respectively.
Bootsrap
Need a hint?

Make sure to add exactly three <div> elements with the given text inside the container.

3
Apply Bootstrap display utilities to control visibility
Add the class d-block to the first <div> so it is always visible. Add d-none d-md-block classes to the second <div> so it is hidden on small screens and visible on medium and larger screens. Add d-none d-lg-block classes to the third <div> so it is hidden on small and medium screens and visible on large and larger screens.
Bootsrap
Need a hint?

Use d-block for always visible, d-none d-md-block for medium and up, and d-none d-lg-block for large and up.

4
Add a heading and footer for completeness
Add a <header> with an <h1> that says "Bootstrap Display Utilities Demo" above the container. Add a <footer> below the container with the text "© 2024 WebDev Practice". Both should be inside the <main>.
Bootsrap
Need a hint?

Place the header with the <h1> above the container and the footer below it inside <main>.