Bird
Raised Fist0
Bootsrapmarkup~30 mins

Display utilities in Bootsrap - Mini Project: Build & Apply

Choose your learning style10 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
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
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
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
Hint

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

Practice

(1/5)
1. What does the Bootstrap class d-none do to an element?
easy
A. It hides the element on all screen sizes.
B. It makes the element visible only on small screens.
C. It changes the element's color to none.
D. It disables the element's interaction.

Solution

  1. Step 1: Understand the d-none class purpose

    The d-none class in Bootstrap sets the CSS property display: none; which hides the element completely.

  2. Step 2: Confirm effect on all screen sizes

    Since no breakpoint is specified, d-none applies to all screen sizes, hiding the element everywhere.

  3. Final Answer:

    It hides the element on all screen sizes. -> Option A

  4. Quick Check:

    d-none = hide element always [OK]
Hint: Remember: d-none means display none everywhere [OK]
Common Mistakes:
  • Thinking d-none only hides on small screens
  • Confusing d-none with color or interaction changes
  • Assuming it disables the element
2. Which of the following is the correct Bootstrap class to make an element visible only on medium and larger screens?
easy
A. d-none d-md-block
B. d-md-none
C. d-block d-md-none
D. d-sm-block d-md-none

Solution

  1. Step 1: Understand breakpoint classes for visibility

    d-none hides the element on all screens, and d-md-block shows it as block starting from medium screens and up.

  2. Step 2: Combine classes to show only on medium and larger

    Using d-none d-md-block hides the element on small and extra small screens, then shows it on medium and larger.

  3. Final Answer:

    d-none d-md-block -> Option A

  4. Quick Check:

    Hide all + show md+ = d-none d-md-block [OK]
Hint: Use d-none to hide, then d-md-block to show from md up [OK]
Common Mistakes:
  • Using d-md-none which hides on medium screens
  • Confusing d-block and d-none order
  • Using wrong breakpoints like d-sm-block d-md-none
3. What will be the visible behavior of this element?
<div class="d-none d-lg-block">Hello</div>
medium
A. Visible on all screen sizes
B. Hidden on large screens and above
C. Visible only on large screens and above
D. Hidden on all screen sizes

Solution

  1. Step 1: Analyze the classes d-none and d-lg-block

    d-none hides the element on all screen sizes by default. d-lg-block overrides this to show the element as block starting at large screens (lg) and above.

  2. Step 2: Determine visibility on screen sizes

    From extra small to medium screens, the element is hidden. From large screens and up, it becomes visible as a block element.

  3. Final Answer:

    Visible only on large screens and above -> Option C

  4. Quick Check:

    d-none + d-lg-block = show lg+ only [OK]
Hint: d-none hides all, d-lg-block shows from large screens [OK]
Common Mistakes:
  • Thinking it is visible on all screens
  • Confusing d-lg-block as hiding on large screens
  • Ignoring the effect of d-none
4. You want to hide an element only on small screens but it remains visible everywhere. Which Bootstrap class usage is incorrect?
medium
A. d-sm-none d-md-block
B. d-block d-sm-none
C. d-none d-md-block
D. d-none d-sm-block

Solution

  1. Step 1: Understand the goal and class effects

    To hide only on small screens, the element should be visible by default and hidden on small screens only.

  2. Step 2: Analyze each option's effect

    d-none d-sm-block hides the element on all screens by default, then shows it from small screens and up. This means it is hidden only on extra small screens, not small screens.

  3. Final Answer:

    d-none d-sm-block -> Option D

  4. Quick Check:

    Hide all then show sm+ hides xs only, not sm [OK]
Hint: Check which breakpoint hides vs shows carefully [OK]
Common Mistakes:
  • Mixing up small (sm) and extra small (xs) breakpoints
  • Using d-none without proper show class
  • Assuming d-sm-block hides on small screens
5. You want a paragraph to be hidden on extra small and small screens, visible as block on medium and large screens, and inline on extra large screens. Which class set achieves this?
hard
A. d-none d-md-inline d-xl-block
B. d-none d-md-block d-xl-inline
C. d-none d-sm-block d-lg-inline
D. d-sm-none d-md-block d-lg-inline

Solution

  1. Step 1: Break down the requirements by screen size

    Extra small (xs) and small (sm): hidden
    Medium (md) and large (lg): visible as block
    Extra large (xl): visible as inline

  2. Step 2: Match classes to requirements

    d-none hides on all by default (xs and sm included). d-md-block shows block from medium and up (md, lg, xl). d-xl-inline overrides to inline only on extra large screens.

  3. Step 3: Verify other options

    Other options either hide wrong breakpoints or use incorrect display types at breakpoints.

  4. Final Answer:

    d-none d-md-block d-xl-inline -> Option B

  5. Quick Check:

    Hide all, show block md+, inline xl = d-none d-md-block d-xl-inline [OK]
Hint: Use d-none to hide, then override with d-md-block and d-xl-inline [OK]
Common Mistakes:
  • Using d-sm-none hides only small, not extra small
  • Mixing inline and block classes at wrong breakpoints
  • Forgetting to hide on extra small screens
Recommended

Ready to prove it?

Pass the test and this pattern moves unknown strong while earning +1 Grip toward your certificate.

10 questions~5 mineasy hard