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.

React Bootstrap 5 Mask

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

Footer

Iframe