🤩
Windframe Import update is finally here!

Mask

Mask

Bootstrap 5 Masks change an element's visibility by hiding it completely or partially. Contrast Design Masks are used to increase the visibility of material in a photo.

Mask Patterns

The material that we are attempting to hide or partially hide, usually an image, remains in the div with the class view. This content is positioned above the mask div. The overlay or pattern over the content is the div with the class mask. Patterns are used in the code below, and there are plenty to pick from, ranging from pattern-1 to pattern-4.

Bootstrap Mask Patterns Bootstrap Mask Patterns Bootstrap Mask Patterns Bootstrap Mask Patterns

html
html
<div class="view">
<img src="../img/food.jpg" />
<div class="mask pattern-1"></div>
</div>
<div class="view">
<img src="../img/food.jpg" />
<div class="mask pattern-2"></div>
</div>
<div class="view">
<img src="../img/food.jpg" />
<div class="mask pattern-3"></div>
</div>
<div class="view">
<img src="../img/food.jpg" />
<div class="mask pattern-4"></div>
</div>

Mask Light Overlay

To use a light mask overlay instead of a mask, give your mask div the class rgba, then the color you want your overlay to be, and finally the word light (to select the thickness of our overlay

Bootstrap Mask Light Overlay Bootstrap Mask Light Overlay

html
html
<div class="view">
<img src="../img/food.jpg" />
<div class="mask rgba-blue3-light"></div>
</div>

Mask Strong Overlay

If you'd prefer a more robust Overlay background, append strong to the class instead.

Bootstrap Mask Strong Overlay Bootstrap Mask Strong Overlay

html
html
<div class="view">
<img src="../img/food.jpg" />
<div class="mask rgba-blue-strong"></div>
</div>

Trying to build out all user interfaces and components for your website or web app from scratch can become a very tedious task. A huge reason why we created Contrast Bootstrap to help reduce the amount of time we spend doing that, so we can focus on building some other aspects of the project. Contrast Bootstrap PRO consists of a UI Kit featuring over 10000+ component variants. Together with a template of 5 admin dashboards and 23+ additional multipurpose pages template for building almost any type of website or web app. You can view a demo and learn more about Contrast by clicking here.Download the free react template

ad-banner

Contrast Bootstrap PRO was built using the most popular CSS framework Bootstrap to help build your next landing, admin SAAS, prelaunch etc project with a clean, prebuilt and well documented template and UI components.Learn more about Contrast