The latest articles on DEV Community by Dudu (@eduardoromeu). https://dev.to/eduardoromeu https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F808379%2Fbcb56db0-12c0-4ded-9150-f0e4c0d68804.png https://dev.to/eduardoromeu en Dudu Wed, 02 Nov 2022 22:41:07 +0000 https://dev.to/eduardoromeu/how-to-invert-color-with-bootstrap-52-a78 https://dev.to/eduardoromeu/how-to-invert-color-with-bootstrap-52-a78 <p>Just use the <code>.btn-close-white</code> class in the component that you want to invert the color.</p> <p>Bootstrap's docs says that "This class uses the filter property to invert the background-image".</p> <p>Note that it also adds two more filters, grayscale and brightness, so it may be not suitable in all cases.</p> <h5> SASS </h5> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>$btn-close-white-filter: invert(1) grayscale(100%) brightness(200%); </code></pre> </div> <p>Source: <a href="https://getbootstrap.com/docs/5.2/components/close-button/#white-variant">https://getbootstrap.com/docs/5.2/components/close-button/#white-variant</a></p> tutorial html bootstrap webdev