CSS Bootstrap: How to remove box shadow from modal
CSS Bootstrap: How to Remove Box Shadows from Modal Boxes
In this article, we’ll cover how to remove box shadows from a CSS Bootstrap modal box.
Read more: CSS Tutorial
CSS Bootstrap Modal
CSS Bootstrap is a popular CSS framework for rapidly developing responsive web pages. It provides many predefined CSS styles and components, including modals. A modal is a floating window that appears over the page to display temporary content.
By default, CSS Bootstrap modals feature a light gray box shadow effect, which visually makes them stand out. However, sometimes we need to remove this box shadow to fit a specific interface style.
Steps to Remove a Box Shadow
To remove the box shadow from a CSS Bootstrap modal, follow these steps:
- Open your CSS file (or within the
<style>tags in HTML). - Find the CSS classes for your modal in the file. By default, the modal’s primary class is
modal. - Use the CSS
box-shadowproperty to set the box shadow tonone. Add the following CSS code to the modal’s class selector:
.modal {
box-shadow: none;
}
The above code will remove the box shadow effect from the modal. Make sure this code comes after your custom styles to ensure it overrides the default styles.
Example Description
The following example shows how to remove the box shadow from a CSS Bootstrap modal.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Modal</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<style>
.modal {
box-shadow: none;
}
</style>
</head>
<body>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Open Modal
</button>
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Modal Title</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<p>This is the modal content.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
In the above example, we embed CSS styles directly into the head of the HTML file. We add a box-shadow: none; property to the modal’s class selector to remove the box shadow effect. Try running this code in your own project and see if the modal no longer displays the box shadow.
Summary
In this article, we’ve shown how to remove the box shadow from a CSS Bootstrap modal. By simply modifying the CSS stylesheet, we can customize the modal’s appearance to suit our design needs. We hope this article has helped you understand how to customize CSS Bootstrap modals!