Page 226 - Computer Software Application TP - Volume 1
P. 226
COMPUTER SOFTWARE APPLICATION - CITS
TASK 9: Shadow and Visibility in bootstrap v5
1 Open the text editor
2 Write the following codes
<html lang=”en”>
<head>
<meta charset=”UTF-8”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0”>
<title>Bootstrap v5 Shadow and Visibility Example</title>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.0alpha1/dist/css/bootstrap.min.css” rel=”stylesheet”>
</head>
<body>
<div class=”container mt-5”>
<h2>Shadow Example</h2>
<div class=”row”>
<div class=”col-md-4”>
<div class=”p-3 mb-3 bg-white shadow-none”>No Shadow</div>
</div>
<div class=”col-md-4”>
<div class=”p-3 mb-3 bg-white shadow-sm”>Small Shadow</div>
</div>
<div class=”col-md-4”>
<div class=”p-3 mb-3 bg-white shadow”>Default Shadow</div>
</div>
<div class=”col-md-4”>
<div class=”p-3 mb-3 bg-white shadow-lg”>Large Shadow</div>
</div>
<div class=”col-md-4”>
<div class=”p-3 mb-3 bg-white shadow-2xl”>Extra Large Shadow</div>
</div>
211
CITS : IT & ITES - Computer Software Application - Exercise 49
