”;
This chapter discusses about the box-shadow utilities. Bootstrap provides a set of CSS classes that allows you to apply different types of box shadows to elements.
The predefined classes available are as follows:
| Class | Description |
|---|---|
| .shadow-none | No shadow effect. |
| .shadow-sm | Adds a small and subtle shadow effect. |
| .shadow | Applies a medium strength shadow effect. |
| .shadow-lg | Applies a large and prominent shadow effect. |
Let us see an example:
Example
You can edit and try running this code using the Edit & Run option.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap - Shadows</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h4>Shadow effect</h4>
<div><button class="btn shadow-none">Button with no shadow</button></div>
<div><button class="btn shadow">Button with a subtle shadow</button></div>
<div><button class="btn shadow-sm">Button with a regular shadow</button></div>
<div><button class="btn shadow-lg">Button with a larger shadow</button></div>
</div>
</body>
</html>
Advertisements
”;