This time, we are going to learn how to modify the opacity of the modal in Boostrap. The modal is a fully responsive pop-up that makes the background darker to give the pop-up more attention.
Table of Contents
What is Boostrap? What is a modal?
Bootstrap It is a framework that gives you the basic structure to be able to develop responsive web pages. It includes many functionalities, such as modal, as well as predefined templates through CSS.
The modal it is a pop-up, which darkens the rest of the background to give greater contrast. What happens is that many times we want to modify the opacity. This must be done through CSS, as indicated below.
Modify the opacity of the modal with CSS
The CSS property that we are going to use is opacity. This varies from 0 to 1, or in the case of the property filter from 0 to 100. The higher the number, the more opaque it is, and the lower the number, the more transparent it is.
In the current version of Bootstrap 4, we can modify the opacity with the following CSS code. The element that we modify is .modal-backdrop.show.
.modal-backdrop.show { opacity: .8; filter: alpha(opacity=80); /* Para versiones anteriores de IE */ }
In the case of the previous version: Bootstrap 3, we must modify the element .modal-backdrop.in, in this way:
.modal-backdrop.in { opacity: .8; filter: alpha(opacity=80); /* Para versiones anteriores de IE */ }
In the case that we want there to be no background color, we must put 0. On the other hand, if we want the background to be totally black, then we put 1 (or 100 for filter).
If you have any questions, please do not hesitate to leave us a comment. So we can help you and anyone who has the same question.