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.
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/[email protected]/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:
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/[email protected]/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>
Output
Similar Reads
How to add Borders and Shadows to Elements in CSS ? Apply box shadows to elements to create a 3D effect, whereas adding borders to containers or boxes can enhance the structural clarity of a layout. In this article, we will learn how to add borders and shadows to the elements in CSS. We will explore two different approaches to adding borders and shad
2 min read
How to add border to an element on mouse hover using CSS ? Adding a border to an element on mouse hover using CSS involves changing the element's border style when the mouse pointer is over it. This effect enhances user interaction by visually highlighting the element, achieved using the :hover pseudo-class to modify border properties.ApproachHTML Structure
1 min read
How to add a box-shadow on one side of an element using CSS? The box-shadow property is used to set the box shadow on one side of element. Syntax: box-shadow: h-offset v-offset blur spread color; box-shadows values: h-offset: It is required and used to set the position of the shadow horizontally. The positive value is used to set the shadow on right side of t
2 min read
How to Add a Border to a Container in Bootstrap ? Borders in Bootstrap are a styling element used to enhance the visual appearance of containers, buttons, and other elements. They can be customized with various colors, thicknesses, and styles to create distinct visual effects. Below are the approaches to add a border to a container in Bootstrap: Ta
3 min read
How to apply no shadow in an element using CSS ? In this article, we are going to learn How to apply no shadow in an element using CSS, To remove the box shadow from an element in CSS, you can use the box-shadow property with a value of none, like this: box-shadow: none, This will effectively remove any existing shadow or prevent a shadow from bei
1 min read