Mask
React Bootstrap 5 Mask
React Bootstrap 5 Masks conceal an element's visibility by partially or entirely hiding it. Masks are used to increase the visibility of material in a photograph.
Importing the React Bootstrap 5 Mask Component
You begin by importing CDBMask
and CDBView
into your project to use the Contrast React Bootstrap 5 Mask component. The stuff that we are attempting to conceal or partially conceal remains in the CDBView
component. Then there's the CDBMask
, which is an overlay or pattern over the content.
import { CDBMask, CDBView } from 'cdbreact';
Mask Patterns
The React Bootstrap 5 Mask component, the CDBMask
, enables you to use a pattern over your content by passing a pattern parameter (range from pattern1 to pattern4) into the 'pattern' prop.
import React from 'react';import { CDBMask, CDBView, CDBContainer } from 'cdbreact';
export const Mask = () => { return ( <CDBContainer> <CDBView> <img src="img/food.jpg" className="img-fluid" alt="" style={{ width: '100%' }} /> <CDBMask pattern="pattern1" className="flex-center" /> </CDBView> <CDBView> <img src="img/food.jpg" className="img-fluid" alt="" style={{ width: '100%' }} /> <CDBMask pattern="pattern2" className="flex-center" /> </CDBView> <CDBView> <img src="img/food.jpg" className="img-fluid" alt="" style={{ width: '100%' }} /> <CDBMask pattern="pattern3" className="flex-center" /> </CDBView> <CDBView> <img src="img/food.jpg" className="img-fluid" alt="" style={{ width: '100%' }} /> <CDBMask pattern="pattern4" className="flex-center" /> </CDBView> </CDBContainer> );};
Mask Light Overlay
Use the 'overlay' prop to use a light background color as your overlay over your content. Set the value to the preferred color, inserting the word Light at the end. For example overlay= "blueLight"
.
import React from 'react';import { CDBMask, CDBView, CDBContainer } from 'cdbreact';
export const Mask = () => { return ( <CDBContainer> <CDBView> <img src="img/food.jpg" className="img-fluid" alt="" style={{ width: '100%' }} /> <CDBMask overlay="blueLight" className="flex-center" /> </CDBView> <CDBView> <img src="img/food.jpg" className="img-fluid" alt="" style={{ width: '100%' }} /> <CDBMask overlay="redLight" className="flex-center" /> </CDBView> </CDBContainer> );};
Mask Strong Overlay
Use the overlay
component to create an overlay of a thick background color over your content.. Set the value to the color you would like, appending the word Strong at the end. For example overlay= "blueStrong"
.
import React from 'react';import { CDBMask, CDBView, CDBContainer } from 'cdbreact';
export const Mask = () => { return ( <CDBContainer> <CDBView> <img src="img/food.jpg" className="img-fluid" alt="" style={{ width: '100%' }} /> <CDBMask overlay="blueStrong" className="flex-center" /> </CDBView> <CDBView> <img src="img/food.jpg" className="img-fluid" alt="" style={{ width: '100%' }} /> <CDBMask overlay="redStrong" className="flex-center" /> </CDBView> </CDBContainer> );};
Contrast React Bootstrap 5 Mask Props
This section will expand on your knowledge of the props available with the Contrast React Bootstrap 5 Mask component. You'll learn what these props do, what their default values are, and how to use them in your code.
Other prop options for the CDBMask
component are listed in the table below
Name | Type | Default | Description | Example |
---|---|---|---|---|
className | String | Adds custom classes | <CDBMask className="myClass" ... /> | |
tag | String | div | Changes default html tag | <CDBMask tag="div" ... /> |
overlay | String | Creates overlay in passed color | <CDBMask overlay="grey-light" .../> | |
pattern | String or Number | Creates pattern with chosen style | <CDBMask pattern="1" .../> |
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

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