Page 214 - Computer Software Application TP - Volume 1

COMPUTER SOFTWARE APPLICATION - CITS

<div class=”container”>
<!-- Component with default styling -->
<div class=”custom-component”>
Default Component Styling
</div>
<!-- Component with styling for extra small screens -->
<div class=”custom-component bg-warning d-block d-sm-none”>
Extra Small Screen Component Styling
</div>
<!-- Component with styling for small screens -->
<div class=”custom-component bg-danger d-none d-sm-block d-md-none”>
Small Screen Component Styling
</div>
<!-- Component with styling for medium screens -->
<div class=”custom-component bg-success d-none d-md-block d-lg-none”>
Medium Screen Component Styling
</div>
<!-- Component with styling for large screens -->
<div class=”custom-component bg-info d-none d-lg-block d-xl-none”>
Large Screen Component Styling
</div>
<!-- Component with styling for extra large screens -->
<div class=”custom-component bg-secondary d-none d-xl-block”>
Extra Large Screen Component Styling
</div>
</div>
</body>
</html>
3 Save the program as a .html file
4 Open the html file with a web browser
5 Change the screen size and Verify the output.

199

CITS : IT & ITES - Computer Software Application - Exercise 49