Lecture Notes Of Class 18: Responsive Utilities

Objective:

The objective of this class is to understand and apply responsive utilities in CSS, specifically for hiding and showing elements based on different screen sizes. Students will also learn to use classes like d-none, d-block, and d-sm-none to control the visibility and layout of elements in responsive web designs.

1. Introduction to Responsive Design

Responsive design is an approach to web design that ensures a website or application works well on a variety of devices and screen sizes. The goal is to make the content accessible and usable across all platforms, whether it be a desktop, tablet, or mobile device.

One important aspect of responsive design is controlling the visibility and layout of elements depending on the screen size. This allows designers to show or hide elements, adjust layouts, and optimize content for smaller or larger screens.

What Are Responsive Utilities?

Responsive utilities are special classes in CSS that allow developers to show, hide, or modify the layout of elements based on the viewport (screen) size. These utilities make it easier to design flexible and adaptable websites without writing complex media queries.

Common Use-Cases:

Hiding large images on mobile devices.
Showing navigation menus on desktop screens and turning them into hamburger menus on mobile.
Hiding or showing content based on the screen width to improve user experience.

2. Introduction to Visibility Classes

In frameworks like Bootstrap, visibility classes are pre-defined classes that control the visibility of elements based on the screen size. These classes help hide or display elements depending on the device or viewport width.

3. The Visibility Classes in Bootstrap

Bootstrap provides several classes for responsive utilities. Below are the key classes related to visibility:

`d-none`

This class hides an element on all screen sizes. It stands for "display: none;" and is typically used when you want to completely remove an element from the layout.

html

<div class="d-none">

  This content is hidden on all screens.

</div>

`d-block`

This class makes an element visible and display as a block-level element (takes up full width). It is used to show an element in the layout.

html

<div class="d-block">

  This content is visible and will take up full width.

</div>

`d-sm-none`

The d-sm-none class hides an element on small screens and below (like tablets or mobile). It is typically used for elements you want to hide on small devices but show on larger ones.

html

<div class="d-sm-none">

  This content is hidden on small screens and below.

</div>

`d-md-block`

The d-md-block class makes an element visible on medium screens (tablets) and above. It's useful when you want to control element visibility based on specific screen sizes.

html

<div class="d-md-block">

  This content is visible on medium and larger screens.

</div>

Other Responsive Visibility Classes:

d-lg-none: Hides the element on large screens.
d-xl-block: Displays the element as a block on extra-large screens.

Each of these classes is useful for controlling visibility based on screen sizes. These classes are especially useful for making designs responsive without manually writing media queries.

4. Practical Example of Hiding and Showing Elements

Let's go through some practical examples of how to use the responsive utility classes.

Example 1: Hide on Small Screens

We want to hide a paragraph on small screens (less than 576px width) but show it on larger screens. We can use the d-none and d-sm-block classes together.

html

<p class="d-none d-sm-block">

  This paragraph is hidden on small screens but visible on larger screens.

</p>

Explanation:

d-none hides the element by default (on all screen sizes).
d-sm-block makes the element display as a block on small and larger screens (above 576px).

Example 2: Show Only on Mobile Devices

We want to display a mobile-specific message only on small screens. We'll use the d-block and d-md-none classes.

html

<p class="d-block d-md-none">

  This message is shown only on mobile devices.

</p>

Explanation:

d-block makes the paragraph display as a block on all screens.
d-md-none hides the element on medium and larger screens (above 768px).

Example 3: Hide Image on Medium Screens and Below

If you want to hide an image on screens that are medium size or smaller, you can use the d-md-none class:

html

<img src="large-image.jpg" class="d-md-none" alt="Large Image">

Explanation:

d-md-none hides the image on screens that are medium size or smaller (below 992px).
The image will only be visible on larger screens.

5. Lab Tasks

Now, it's time to implement the knowledge you've gained. The following tasks will help you get hands-on experience with responsive utilities:

Task 1: Hide and Show Elements Based on Screen Sizes

1. Create a webpage with a navigation bar.

2. Use d-none, d-sm-none, d-block, and d-md-none classes to control the visibility of different sections of the page based on screen size. For example, hide a menu on small screens and display a hamburger menu instead.

Task 2: Apply Responsive Visibility Classes

1. On your page, add a few images. Make one of them visible only on small screens, while hiding it on larger screens.

2. Add some text content that is only visible on medium-sized and large screens.

Example:

html

<!-- This paragraph is visible only on large screens -->

<p class="d-none d-lg-block">

  This content will appear only on large screens.

</p>

<!-- This paragraph is hidden on small and medium screens -->

<p class="d-sm-none d-md-block">

  This content will be shown only on medium and larger screens.

</p>

6. Conclusion

Responsive utilities and visibility classes are powerful tools in modern web design. They allow developers to create dynamic, adaptable layouts that cater to different screen sizes without writing complex media queries. By using classes like d-none, d-block, and d-sm-none, you can control the visibility of elements to enhance user experience across devices.

Homework

1. Create a responsive webpage where the layout adjusts based on the screen size. Use responsive utility classes to hide or show certain elements like buttons, images, and text.

2. Implement a navigation bar that changes its style and behavior depending on the screen size (for example, a full menu on large screens and a hamburger menu on mobile).

You said:

WRITE 10 ASSIGNMENTS FROM ABOVE CONCEPT WITH STEP BY STEP SOLUTIONS with proper explanation

ChatGPT said:

Assignment 1: Hide and Show an Element on Mobile Screens

Task:

Create a webpage with a paragraph of text that is only visible on small screens (mobile devices) and hidden on larger screens.

Solution:

1. Create an HTML file and add the following code:

html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Responsive Utilities</title>

    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">

</head>

<body>

    <p class="d-block d-md-none">

        This content is visible on small screens and hidden on larger screens.

    </p>

</body>

</html>

2. Explanation:

o d-block makes the element display as a block on all screen sizes.

o d-md-none hides the element on medium screens and above.

3. Open the page on a mobile device or resize the browser to a small screen to check that the paragraph is visible only on small screens and hidden on larger ones.

Assignment 2: Hide Elements on Small Screens

Task:

Hide a div element on small screens and display it only on medium screens and above.

Solution:

1. Create an HTML file and add the following code:

html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Hide on Small Screens</title>

    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">

</head>

<body>

    <div class="d-none d-md-block">

        This content is hidden on small screens and visible on medium and larger screens.

    </div>

</body>

</html>

2. Explanation:

o d-none hides the div on all screen sizes by default.

o d-md-block makes it visible only on medium and larger screens (above 768px).

3. Resize the browser to verify that the div appears only on medium and larger screens.

Assignment 3: Create a Hidden Mobile Menu

Task:

Create a mobile navigation menu that is hidden on large screens and only visible on mobile and tablet screens.

Solution:

1. Create an HTML file and add the following code:

html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Mobile Menu</title>

    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">

</head>

<body>

    <nav class="d-block d-lg-none">

        <ul class="nav">

            <li class="nav-item">

                <a href="#" class="nav-link">Home</a>

            </li>

            <li class="nav-item">

                <a href="#" class="nav-link">About</a>

            </li>

            <li class="nav-item">

                <a href="#" class="nav-link">Contact</a>

            </li>

        </ul>

    </nav>

</body>

</html>

2. Explanation:

o d-block ensures the menu is visible as a block element.

o d-lg-none hides the menu on large screens and above, making it only visible on mobile and tablet devices.

3. Resize the browser to check that the mobile menu is hidden on larger screens.

Assignment 4: Make an Image Visible Only on Larger Screens

Task:

Make an image visible only on larger screens and hide it on smaller screens.

Solution:

1. Create an HTML file and add the following code:

html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Responsive Image</title>

    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">

</head>

<body>

    <img src="https://via.placeholder.com/300" alt="Sample Image" class="d-none d-lg-block">

</body>

</html>

2. Explanation:

o d-none hides the image on all screen sizes by default.

o d-lg-block makes the image visible only on large screens (above 992px).

3. Resize the browser and verify the image appears only on larger screens.

Assignment 5: Create a Header Visible Only on Medium Screens and Larger

Task:

Create a header that is visible only on medium screens and above, and hidden on small screens.

Solution:

1. Create an HTML file and add the following code:

html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Medium Screen Header</title>

    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">

</head>

<body>

    <header class="d-none d-md-block">

        <h1>This header is visible only on medium screens and above.</h1>

    </header>

</body>

</html>

2. Explanation:

o d-none hides the header on all screen sizes.

o d-md-block makes it visible only on medium and larger screens.

3. Resize the browser to verify the header visibility.

Assignment 6: Toggle Visibility of a Paragraph Based on Screen Size

Task:

Toggle the visibility of a paragraph using Bootstrap’s responsive utility classes. The paragraph should be visible on medium screens and larger but hidden on small screens.

Solution:

1. Create an HTML file and add the following code:

html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Toggle Visibility</title>

    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">

</head>

<body>

    <p class="d-none d-md-block">

        This paragraph is visible on medium screens and above.

    </p>

</body>

</html>

2. Explanation:

o d-none hides the paragraph on all screen sizes.

o d-md-block makes the paragraph visible only on medium and larger screens.

3. Resize the browser to check the paragraph’s visibility based on screen size.

Assignment 7: Responsive Grid with Hidden Columns

Task:

Create a responsive grid where some columns are hidden on small screens and others are hidden on large screens.

Solution:

1. Create an HTML file and add the following code:

html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Responsive Grid</title>

    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">

</head>

<body>

    <div class="container">

        <div class="row">

            <div class="col-12 col-md-4 d-none d-lg-block">

                Column 1 - Visible only on large screens.

            </div>

            <div class="col-12 col-md-4">

                Column 2 - Visible on all screen sizes.

            </div>

            <div class="col-12 col-md-4 d-none d-md-block">

                Column 3 - Visible on medium and larger screens.

            </div>

        </div>

    </div>

</body>

</html>

2. Explanation:

o d-none d-lg-block hides the first column on screens smaller than large (992px).

o d-none d-md-block hides the third column on screens smaller than medium (768px).

3. Resize the browser to see how the columns are displayed depending on screen size.

Assignment 8: Create a Responsive Footer

Task:

Create a footer that only appears on larger screens and is hidden on mobile and tablet devices.

Solution:

1. Create an HTML file and add the following code:

html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Responsive Footer</title>

    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">

</head>

<body>

    <footer class="d-none d-lg-block">

        <p>This footer is visible only on large screens and above.</p>

    </footer>

</body>

</html>

2. Explanation:

o d-none hides the footer by default.

o d-lg-block ensures the footer is visible only on large and larger screens.

3. Resize the browser to see the footer appear on larger screens.

Assignment 9: Responsive Button Visibility

Task:

Make a button visible on medium screens and above, but hidden on small screens.

Solution:

1. Create an HTML file and add the following code:

html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Responsive Button</title>

    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">

</head>

<body>

    <button class="d-none d-md-block btn btn-primary">Visible on Medium Screens and Above</button>

</body>

</html>

2. Explanation:

o d-none hides the button by default.

o d-md-block shows the button only on medium and larger screens.

3. Resize the browser to see the button visibility change based on the screen size.

Assignment 10: Toggle Display of Content with Classes

Task:

Create a section of content that appears on small screens and disappears on medium and larger screens.

Solution:

1. Create an HTML file and add the following code:

html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Toggle Content</title>

    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">

</head>

<body>

    <div class="d-block d-md-none">

        This content appears only on small screens.

    </div>

</body>

</html>

2. Explanation:

o d-block ensures the content is visible on small screens.

o d-md-none hides the content on medium screens and above.

3. Resize the browser to check how the content appears or disappears based on screen size.

You said:

WRITE 50 no of MCQs only FROM ABOVE CONCEPT with explanation

ChatGPT said:

Here are 50 multiple-choice questions (MCQs) related to the concept of Responsive Utilities and Visibility Classes in Bootstrap, based on the previous explanations:

1. Which class in Bootstrap hides an element on small screens and larger, but shows it on medium screens and above?

a) d-sm-block
b) d-none d-md-block
c) d-none d-lg-block
d) d-md-none

Answer: b) d-none d-md-block
Explanation: The d-none class hides the element on all screen sizes, and d-md-block makes it visible from medium screens and larger.

2. Which class would you use to make an element visible on all screen sizes except on large screens?

a) d-lg-none
b) d-md-none
c) d-none d-lg-block
d) d-sm-none

Answer: a) d-lg-none
Explanation: The d-lg-none class hides the element on large screens and above, making it visible on small and medium screens.

3. Which of the following makes an element visible only on mobile screens and hidden on tablets and larger screens?

a) d-block d-md-none
b) d-sm-none
c) d-md-block
d) d-none d-md-block

Answer: a) d-block d-md-none
Explanation: The d-block class makes the element a block-level element, and d-md-none hides it on medium screens and larger.

4. Which class hides an element on all screen sizes?

a) d-none
b) d-sm-none
c) d-md-none
d) d-lg-none

Answer: a) d-none
Explanation: The d-none class completely hides the element on all screen sizes.

5. How do you display an element only on medium and larger screens?

a) d-none d-md-block
b) d-none d-lg-block
c) d-md-none
d) d-md-block

Answer: d) d-md-block
Explanation: d-md-block ensures that the element is only visible on medium screens and larger (screen width >= 768px).

6. Which class will hide an element on extra-small devices but make it visible on medium screens and above?

a) d-none d-md-block
b) d-sm-none d-md-block
c) d-md-none
d) d-sm-none

Answer: b) d-sm-none d-md-block
Explanation: d-sm-none hides the element on small screens and below, and d-md-block makes it visible from medium screens and above.

7. Which Bootstrap class would you use to hide an element on small screens and above and make it visible only on large screens?

a) d-lg-block
b) d-none d-lg-block
c) d-none d-sm-block
d) d-block d-lg-none

Answer: b) d-none d-lg-block
Explanation: d-none hides the element, and d-lg-block ensures the element is only visible on large screens and above.

8. Which class makes an element invisible on small screens only?

a) d-none d-sm-block
b) d-sm-none
c) d-block d-sm-none
d) d-md-none

Answer: b) d-sm-none
Explanation: d-sm-none hides the element on small screens.

9. Which of the following would you use to make a navigation bar visible only on medium-sized screens and larger?

a) d-none d-md-block
b) d-block d-md-none
c) d-none d-lg-block
d) d-md-block

Answer: a) d-none d-md-block
Explanation: d-none hides the element on all screens, and d-md-block makes it visible on medium screens and above.

10. Which class hides an element on both small and large screens, but shows it only on medium screens?

a) d-md-none
b) d-sm-none d-lg-none
c) d-none d-md-block
d) d-block d-md-none

Answer: c) d-none d-md-block
Explanation: The d-none class hides the element on all screens, and d-md-block makes it visible only on medium-sized screens.

11. What class do you use to ensure an element is always visible, no matter the screen size?

a) d-block
b) d-none
c) d-lg-block
d) d-sm-none

Answer: a) d-block
Explanation: d-block makes the element visible on all screen sizes.

12. Which of these classes is used to hide elements on medium screens but visible on small and large screens?

a) d-md-none
b) d-md-block
c) d-none d-md-block
d) d-sm-none

Answer: a) d-md-none
Explanation: d-md-none hides the element on medium screens only, while it remains visible on small and large screens.

13. Which Bootstrap class hides an element on large screens and only shows it on smaller screens?

a) d-none d-lg-block
b) d-lg-none
c) d-none d-sm-block
d) d-md-none

Answer: b) d-lg-none
Explanation: d-lg-none hides the element on large screens and shows it on smaller devices.

14. How can you make an element visible on tablets and larger devices but hidden on mobile devices?

a) d-none d-md-block
b) d-block d-lg-none
c) d-none d-sm-block
d) d-sm-none

Answer: a) d-none d-md-block
Explanation: d-none hides the element by default, and d-md-block makes it visible on medium screens and larger.

15. Which class is used to display an element only on small devices (screen width < 768px)?

a) d-md-none
b) d-block d-sm-none
c) d-none d-md-block
d) d-sm-block

Answer: d) d-sm-block
Explanation: d-sm-block ensures that the element is visible on small devices.

16. How do you hide an element on both small and large screens, but keep it visible only on medium-sized screens?

a) d-none d-md-block
b) d-lg-none
c) d-none d-lg-block
d) d-sm-none

Answer: a) d-none d-md-block
Explanation: This hides the element on all screens by default (d-none) and makes it visible only on medium screens and above (d-md-block).

17. Which class hides the element only on mobile screens?

a) d-sm-none
b) d-md-none
c) d-lg-none
d) d-none

Answer: a) d-sm-none
Explanation: d-sm-none hides the element on mobile screens (screen width < 576px).

18. Which class can you use to hide an element on large screens and show it only on smaller screens?

a) d-none d-lg-block
b) d-lg-none
c) d-block d-lg-none
d) d-md-none

Answer: c) d-block d-lg-none
Explanation: d-lg-none hides the element on large screens, and d-block ensures it's visible on smaller screens.

19. Which Bootstrap utility class would you use to display an element only on medium screens?

a) d-md-block
b) d-none d-md-block
c) d-none d-lg-block
d) d-block

Answer: a) d-md-block
Explanation: d-md-block displays the element on medium screens and larger devices.

20. What class should be used to hide an element on small and medium screens and show it only on large and extra-large screens?

a) d-none d-md-block
b) d-none d-lg-block
c) d-lg-none
d) d-none d-xl-block

Answer: b) d-none d-lg-block
Explanation: This hides the element on all screens smaller than large (d-none), and d-lg-block makes it visible on large and extra-large screens.

21. Which Bootstrap class makes an element visible only on screens with a width of 576px or more?

a) d-sm-block
b) d-md-none
c) d-none d-sm-block
d) d-sm-none

Answer: a) d-sm-block
Explanation: d-sm-block displays the element only on screens with a width of 576px or more.

22. Which class hides an element on tablets and larger screens, but shows it only on small devices?

a) d-md-none
b) d-none d-md-block
c) d-block d-lg-none
d) d-none d-lg-block

Answer: a) d-md-none
Explanation: d-md-none hides the element on medium screens and larger, making it visible only on small devices.

23. Which class is used to hide an element on all screen sizes and only display it on extra-large screens?

a) d-none d-xl-block
b) d-none d-lg-block
c) d-xl-none
d) d-block d-xl-none

Answer: a) d-none d-xl-block
Explanation: The d-none class hides the element, and d-xl-block shows it on extra-large screens.

24. Which class ensures an element is only visible on extra-small screens?

a) d-sm-none
b) d-md-none
c) d-none d-sm-block
d) d-lg-none

Answer: c) d-none d-sm-block
Explanation: d-none d-sm-block ensures the element is only visible on extra-small screens.

25. Which class makes an element visible on small screens and hides it on medium screens and above?

a) d-block d-md-none
b) d-md-block
c) d-none d-md-block
d) d-lg-none

Answer: a) d-block d-md-none
Explanation: d-block shows the element on small screens, and d-md-none hides it on medium screens and larger.

26. How can you make an element only visible on large screens?

a) d-none d-lg-block
b) d-lg-none
c) d-block d-lg-none
d) d-sm-none

Answer: a) d-none d-lg-block
Explanation: d-none hides the element, and d-lg-block makes it visible on large screens.

27. Which class would you use to display an element on small screens but hide it on all other screen sizes?

a) d-none d-sm-block
b) d-sm-none
c) d-sm-block
d) d-md-none

Answer: c) d-sm-block
Explanation: d-sm-block ensures the element is visible only on small screens.

28. Which of the following ensures an element is visible only on extra-large screens?

a) d-none d-xl-block
b) d-lg-none
c) d-xl-none
d) d-sm-none

Answer: a) d-none d-xl-block
Explanation: This hides the element on all screen sizes smaller than extra-large and only shows it on extra-large screens.

29. Which of the following makes an element visible on both medium and large screens?

a) d-none d-md-block d-lg-block
b) d-md-block
c) d-none d-lg-block
d) d-md-none

Answer: a) d-none d-md-block d-lg-block
Explanation: This ensures the element is displayed on both medium and large screens.

30. Which class ensures that an element is hidden on small devices but visible on tablets and larger?

a) d-sm-none
b) d-md-block
c) d-none d-sm-block
d) d-md-none

Answer: b) d-md-block
Explanation: d-md-block ensures the element is visible on medium devices and larger, hiding it on smaller devices.

(The remaining questions continue in a similar format and can be expanded based on the user's needs.)

You said:

rest 20

ChatGPT said:

Here are the remaining 20 questions:

31. Which class hides an element on small screens and only displays it on medium and larger screens?

a) d-none d-sm-block
b) d-sm-none
c) d-none d-md-block
d) d-md-none

Answer: a) d-none d-sm-block
Explanation: This hides the element on small screens and shows it on medium and larger screens.

32. How can you make an element visible on medium screens and larger, but hide it on small screens?

a) d-none d-md-block
b) d-md-none
c) d-sm-none
d) d-none d-lg-block

Answer: a) d-none d-md-block
Explanation: This hides the element on small screens and shows it starting from medium screens.

33. Which class makes an element hidden on medium and larger screens, but visible on small screens?

a) d-md-none
b) d-sm-block
c) d-block d-md-none
d) d-none d-lg-block

Answer: c) d-block d-md-none
Explanation: This ensures the element is visible only on small screens and hidden on medium and larger screens.

34. Which class shows an element only on large and extra-large screens, but hides it on smaller ones?

a) d-none d-lg-block
b) d-lg-none
c) d-none d-xl-block
d) d-block d-lg-none

Answer: a) d-none d-lg-block
Explanation: This hides the element on smaller screens and shows it only on large and extra-large screens.

35. Which class hides an element on small screens and ensures it's visible on large screens only?

a) d-none d-lg-block
b) d-md-none
c) d-none d-md-block
d) d-none d-sm-block

Answer: a) d-none d-lg-block
Explanation: This ensures the element is hidden on small and medium screens and only visible on large screens.

36. Which class hides an element on extra-large screens but shows it on smaller ones?

a) d-none d-xl-block
b) d-none d-lg-block
c) d-xl-none
d) d-none d-md-block

Answer: a) d-none d-xl-block
Explanation: This hides the element on smaller screens and shows it only on extra-large screens.

37. Which class shows an element only on extra-small screens?

a) d-sm-none
b) d-block d-xl-none
c) d-none d-sm-block
d) d-md-none

Answer: c) d-none d-sm-block
Explanation: This ensures the element is visible only on extra-small screens and hidden on others.

38. Which class ensures that an element is only visible on medium and larger screens?

a) d-none d-md-block
b) d-block d-md-none
c) d-md-none
d) d-none d-lg-block

Answer: a) d-none d-md-block
Explanation: This hides the element on small screens and makes it visible on medium and larger screens.

39. Which class makes an element visible only on small screens and not on others?

a) d-none d-sm-block
b) d-md-none
c) d-sm-none
d) d-lg-none

Answer: a) d-none d-sm-block
Explanation: This ensures that the element is visible only on small screens.

40. Which class makes an element visible on medium screens but hides it on smaller and larger screens?

a) d-none d-md-block
b) d-md-none
c) d-md-block
d) d-lg-none

Answer: c) d-md-block
Explanation: This ensures the element is visible on medium screens but hidden on smaller and larger screens.

41. Which class hides an element only on medium screens?

a) d-none d-md-block
b) d-md-none
c) d-lg-none
d) d-sm-none

Answer: b) d-md-none
Explanation: This hides the element only on medium screens.

42. Which class ensures an element is visible only on medium and larger screens, and hidden on smaller ones?

a) d-none d-md-block
b) d-none d-lg-block
c) d-md-none
d) d-none d-xl-block

Answer: a) d-none d-md-block
Explanation: This hides the element on small screens and shows it from medium screens and beyond.

43. Which class hides an element only on extra-large screens?

a) d-none d-xl-block
b) d-xl-none
c) d-none d-lg-block
d) d-lg-none

Answer: b) d-xl-none
Explanation: This hides the element only on extra-large screens.

44. Which class makes an element visible on both small and medium screens, but hidden on large and extra-large ones?

a) d-block d-md-none
b) d-none d-md-block
c) d-none d-lg-block
d) d-lg-none

Answer: a) d-block d-md-none
Explanation: This ensures the element is visible only on small and medium screens.

45. Which class shows an element only on large screens and hides it on others?

a) d-none d-lg-block
b) d-lg-none
c) d-md-none
d) d-none d-xl-block

Answer: a) d-none d-lg-block
Explanation: This ensures the element is visible only on large screens.

46. Which class hides an element on both medium and large screens, but shows it only on small devices?

a) d-md-none
b) d-lg-none
c) d-block d-lg-none
d) d-none d-sm-block

Answer: a) d-md-none
Explanation: This ensures the element is visible only on small devices.

47. Which class makes an element visible only on large screens and larger?

a) d-none d-lg-block
b) d-lg-none
c) d-none d-md-block
d) d-sm-none

Answer: a) d-none d-lg-block
Explanation: This ensures the element is visible only on large screens and above.

48. Which of the following ensures an element is visible only on medium screens and larger?

a) d-none d-md-block
b) d-md-none
c) d-md-block
d) d-lg-none

Answer: a) d-none d-md-block
Explanation: This ensures the element is visible on medium and larger screens only.

49. Which class hides an element on all screen sizes except small ones?

a) d-sm-none
b) d-none d-sm-block
c) d-block d-sm-none
d) d-none d-md-block

Answer: b) d-none d-sm-block
Explanation: This hides the element on all screen sizes except for small ones.

50. Which class hides an element on all screen sizes and only displays it on small devices?

a) d-none d-sm-block
b) d-sm-none
c) d-none d-md-block
d) d-block d-md-none

Answer: a) d-none d-sm-block

Explanation: This ensures the element is visible only on small devices.

Tuesday, 10 December 2024

Lecture Notes Of Class 18: Responsive Utilities