Bootstrap 5 Shadows Last Updated : 04 Apr, 2024 Comments Improve Suggest changes Like Article Like Report Bootstrap 5 Shadows utility comprises four classes: shadow-none, shadow-sm, shadow, and shadow-lg. They add or remove shadows from components, with `shadow-none` removing any existing shadow and others adding varying shadow sizes. Bootstrap 5 Shadows: Sass: It is a collection of variables and utilities to tweak the values of the shadow by changing the variables in Bootstrap's source code.Bootstrap 5 Shadows Classes: ClassDescriptionshadowApply default box shadow to the element.shadow-noneRemove any box shadow from the element.shadow-smApply small box shadow to the element.shadow-lgAdd a large box shadow to the element. Examples of Bootstrap 5 ShadowsExample 1: In this example, we used the shadow-none and the shadow-lg classes to remove and add shadows to the card component. HTML <!DOCTYPE html> <html lang="en"> <head> <link href= "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity= "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" /> <script src= "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity= "sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous" ></script> </head> <body> <div class="container"> <div class="mt-4"> <strong >Bootstrap 5 Shadows</strong > </div> <div class="card shadow-none w-25 my-5" > <div class="card-header"> <h5>Card 1</h5> <div class="card-body shadow-none" > This is a card with no shadow. </div> </div> </div> <div class="card shadow-lg w-25 bg-primary" > <div class="card-header"> <h5>Card 2</h5> <div class="card-body"> This is a card with large shadow. </div> </div> </div> </div> </body> </html> Output: Bootstrap 5 Shadows Example Output Example 2: In this example, we used the shadow-sm and shadow classes to add the shadows to the cards. HTML <!DOCTYPE html> <html lang="en"> <head> <link href= "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity= "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <script src= "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity= "sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"> </script> </head> <body> <div class="container"> <div class="mt-4"> <h1 class="text-success">GeeksforGeeks</h1> <strong>Bootstrap 5 Shadows</strong> </div> <div class="card shadow-sm w-25 my-5"> <div class="card-header"> <h5>Card 1</h5> </div> <div class="card-body"> This is a card with small shadow. </div> </div> <div class="card shadow w-25"> <div class="card-header"> <h5>Card 2</h5> </div> <div class="card-body"> This is a card with default shadow. </div> </div> </div> </body> </html> Output: Reference: https://getbootstrap.com/docs/5.2/utilities/shadows/ Comment More infoAdvertise with us Next Article Bootstrap 5 Shadows W writer01 Follow Improve Article Tags : Technical Scripter Web Technologies Bootstrap Technical Scripter 2022 Bootstrap-5 +1 More Similar Reads What is Bootstrap 5? Bootstrap is a popular open-source front-end framework designed for developing responsive, mobile-first websites and web applications. It provides a collection of HTML, CSS, and JavaScript components that simplify the process of creating modern and responsive designs, making it easier for developers 8 min read Bootstrap 5 Colors Bootstrap 5 Colors utility is used to set the text colors, into green as a success, and blue as a primary. There are lots of other informative colors that we need like danger, warning, and so on. In this article, we will know about all the text colors that can be used through Bootstrap 5. iframe { w 3 min read Bootstrap 5 Tables Bootstrap 5 provides a series of classes that can be used to apply various styling to the tables such as changing the heading appearance, making the rows striped, adding or removing borders, making rows hoverable, etc. Bootstrap also provides classes for making tables responsive. Bootstrap 5 Tables: 2 min read Bootstrap 5 Borders Bootstrap 5 Borders offer predefined border styles to elements. Classes like .border, .border-0, .border-top, .border-bottom, .border-left, and .border-right provide easy customization for borders, including color, width, and radius, enhancing UI design. iframe { width: 100%; height: 450px;} @media 2 min read Bootstrap 5 Table head Bootstrap 5 Table head class is used to set the thead elements' background color. Sometimes we need a table with a dark header for a better-suited situation. We can use these classes to change the background color of the thead section of a table. Bootstrap 5 Table head Classes: table-light: This cla 2 min read Like