Vue Bootstrap Masks

Vue Masks - Bootstrap 4 & Material Design

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5

Bootstrap masks alter the visibility of an element by either partially or fully hiding it. Masks are used to make content more visible in the picture.

Pattern

pattern = 8

Show code

template
script

        
            
            <template>
              <mdb-view src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/8-col/img (132).webp" alt="Image of ballons flying over canyons with mask pattern one">
                <mdb-mask pattern="8" text="pattern = 8" />
              </mdb-view>
            </template>

        
            
            <script>
              import { mdbView, mdbMask } from "mdbvue";
              export default {
                name: "MaskPage",
                components: {
                  mdbView,
                  mdbMask
                }
              }
            </script>

Overlay

strong overlay

Show code

template
script

        
            
            <template>
              <mdb-view src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/8-col/img (132).webp" alt="Sample image">
                <mdb-mask overlay="green-strong" text="strong overlay" />
              </mdb-view>
            </template>

        
            
            <script>
              import { mdbView, mdbMask } from "mdbvue";
              export default {
                name: "MaskPage",
                components: {
                  mdbView,
                  mdbMask
                }
              }
            </script>

Patterns

no mask

pattern = 1

pattern = 2

pattern = 3

pattern = 4

pattern = 5

pattern = 6

pattern = 7

pattern = 8

pattern = 9

Usage

Step 1: Create a wrapper containing component mdb-view.

Show code

template
script

        
            
        <template>
          <mdb-view>
            [...]
          </mdb-view>
        </template>

        
            
        <script>
          import { mdbView } from "mdbvue";
          export default {
            name: "MaskPage",
            components: {
              mdbView
            }
          }
        </script>

Step 2: Set a path to the image.

Show code

template
script

        
            
        <template>
          <mdb-view src="https://mdbootstrap.com/img/Photos/Others/nature-sm.webp" alt="">
            [...]
          </mdb-view>
        </template>

        
            
        <script>
          import { mdbView } from "mdbvue";
          export default {
            name: "MaskPage",
            components: {
              mdbView
            }
          }
        </script>

Step 3: Add a component mdb-mask to cover the image with the pattern.

Show code

template
script

        
            
        <template>
          <mdb-view src="https://mdbootstrap.com/img/Photos/Others/nature-sm.webp" alt="">
            <mdb-mask />
          </mdb-view>
        </template>

        
            
        <script>
          import { mdbView, mdbMask } from "mdbvue";
          export default {
            name: "MaskPage",
            components: {
              mdbView,
              mdbMask
            }
          }
        </script>

Step 4: Choose a pattern prop from the examples above.

Show code

template
script

        
            
        <template>
          <mdb-view src="https://mdbootstrap.com/img/Photos/Others/nature-sm.webp" alt="">
            <mdb-mask pattern="1" />
          </mdb-view>
        </template>

        
            
        <script>
          import { mdbView, mdbMask } from "mdbvue";
          export default {
            name: "MaskPage",
            components: {
              mdbView,
              mdbMask
            }
          }
        </script>

Step 5: If you want to add some text, you can use a prop flex-center to center it.

Show code

template
script

        
            
        <template>
          <mdb-view src="https://mdbootstrap.com/img/Photos/Others/nature-sm.webp" alt="">
            <mdb-mask pattern="1" flex-center text="pattern=1" />
          </mdb-view>
        </template>

        
            
        <script>
          import { mdbView, mdbMask } from "mdbvue";
          export default {
            name: "MaskPage",
            components: {
              mdbView,
              mdbMask
            }
          }
        </script>

Overlays

slight overlay

light overlay

strong overlay

Usage

Instruction and markup are the same as for the patterns. It means you add an overlay prop (black-strong in the example below) to the mdb-mask.

See the full list of the overlay colors and intensity

Show code

template
script

        
            
        <template>
          <mdb-view src="https://mdbootstrap.com/img/Photos/Others/nature-sm.webp" alt="">
            <mdb-mask flex-center overlay="black-strong" text="strong overlay" />
          </mdb-view>
        </template>

        
            
        <script>
          import { mdbView, mdbMask } from "mdbvue";
          export default {
            name: "MaskPage",
            components: {
              mdbView,
              mdbMask
            }
          }
        </script>

Overlay colors and intensity

Choose one of the overlay props from the list below to set a desired intensity and color of your mask.

blue-light

red-light

pink-light

purple-light

indigo-light

cyan-light

teal-light

green-light

lime-light

yellow-light

orange-light

brown-light

grey-light

blue-grey-light

black-light

stylish-light

white-light

blue-strong

red-strong

pink-strong

purple-strong

indigo-strong

cyan-strong

teal-strong

green-strong

lime-strong

yellow-strong

orange-strong

brown-strong

grey-strong

blue-grey-strong

black-strong

stylish-strong

white-strong

blue-slight

red-slight

pink-slight

purple-slight

indigo-slight

cyan-slight

teal-slight

green-slight

lime-slight

yellow-slight

orange-slight

brown-slight

grey-slight

blue-grey-slight

black-slight

stylish-slight

white-slight