This chapter discusses about the opacity of elements. The opacity property in CSS determines the transparency of an element.
Bootstrap provides a set of predefined opacity classes for convenience, allowing you to easily apply different levels of transparency to elements. These classes are named opacity-{value}, where {value} can be a number from 0 to 100.
Let us see an example:https://www.tutorialspoint.com/bootstrap/examples/opacity_add.php
Example
You can edit and try running this code using the Edit & Run option.
<!DOCTYPE html><html><head><title>Bootstrap - Opacity</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="container text-center m-3 p-3"><h3>Opacity</h3><div class="opacity-0 pb-3 bg-primary border border-dark"><p class="text-center text-dark display-6">5</p></div><p>opacity-0 will not display the text</p><div class="opacity-25 pb-3 bg-primary border border-dark"><p class="text-center text-dark display-6">25</p></div><div class="opacity-50 pb-3 bg-primary border border-dark"><p class="text-center text-dark display-6">50</p></div><div class="opacity-75 pb-3 bg-primary border border-dark"><p class="text-center text-dark display-6">75</p></div><div class="opacity-100 pb-3 bg-primary border border-dark"><p class="text-center text-dark display-6">100</p></div></div></body></html>
Leave a Reply