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:https://www.tutorialspoint.com/bootstrap/examples/shadows_add.php
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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/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>
Leave a Reply