How to Add a Border or Shadow to Elements using Bootstrap 5 Classes ?

Last Updated : 26 Feb, 2024

To add a border in Bootstrap 5, we can use classes like ‘border' for a full border or border-top, border-end, border-bottom, border-start for specific sides.

For shadows, apply classes like ‘shadow' for a default shadow, shadow-sm for a small shadow, or shadow-lg for a large shadow.

Table of Content

Shadow classes
Border Classes

Shadow classes

Bootstrap 5 Shadows utilities are used to add or remove shadows to bootstrap components or any HTML element in general. There are a total of four shadow utility classes, three for adding the shadows and one for removing any pre-applied shadow from the element.

Shadow Classes	Description
shadow	Applies the default box shadow to the element.
shadow-none	Removes any box shadow from the element.
shadow-sm	Adds a small box shadow to the element.
shadow-lg	Adds a large box shadow to the element.

Example: Implementation to add shadow to elements using shadow classes.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>Adding shadow to elements</title>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" />
</head>
 
<body>
    <div class="text-center">
        <h1 class="text-success">GeeksforGeeks</h1>
        <h3>Adding shadow to elements using Bootstrap5 Classes</h3>
        <button type="button" class="btn btn-warning shadow-lg">
              With Shadow
          </button>
        <button type="button" class="btn btn-warning">
              Without Shadow
          </button>
    </div>
</body>
 
</html>

Output:

20240207_110745

Border Classes

Bootstrap 5 Border utilities allow adding or removing borders from elements. The classes include ‘border’, ‘border-0’, ‘border-top’, ‘border-bottom’, ‘border-left’, and ‘border-right’.

Shadow Classes	Description
border	Adds a border to all sides of the element.
border-top	Adds a border only to the top of the element.
border-end	Adds a border only to the end side of the element.
border-bottom	Adds a border only to the bottom of the element.
border-start	Adds a border only to the start side of the element.

Example: Implementation to add border to elements using border classes.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>Adding border to elements</title>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" />
</head>
 
<body>
    <div class="text-center">
        <h1 class="text-success">GeeksforGeeks</h1>
        <h3>
              Adding border to elements using Bootstrap5 Classes
          </h3>
        <div class="container d-flex">
            <div class="border-0 w-25">1</div>
            <div class="border border-3 w-25">2</div>
            <div class="border border-success border-2 w-25">3</div>
        </div>
    </div>
</body>
 
</html>