Masks

Bootstrap masks

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

Image of ballons flying over canyons with mask pattern one.

.pattern-8

Edit in sandbox 
        
            

            <div class="view">
                <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/8-col/img (132).webp" class="img-fluid" alt="Image of ballons flying over canyons with mask pattern one.">
                <div class="mask pattern-8 flex-center">
                    <p class="white-text">.pattern-8</p>
                </div>
            </div>

Overlay

sample image

strong overlay

Edit in sandbox 
        
            

            <div class="view">
                <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/8-col/img (121).webp" class="img-fluid" alt="sample image">
                <div class="mask flex-center rgba-green-strong">
                    <p class="white-text">strong overlay</p>
                </div>
            </div>

Patterns

sample image

no mask

Image of balloons flying over canyons with mask pattern one.

.pattern-1

sample image

.pattern-2

Image of ballons flying over canyons with mask pattern one.

.pattern-3

sample image

.pattern-4

Image of ballons flying over canyons with mask pattern one.

.pattern-5

sample image

.pattern-6

Image of ballons flying over canyons with mask pattern one.

.pattern-7

sample image

.pattern-8

Image of ballons flying over canyons with mask pattern one.

.pattern-9

Usage

Step 1: Create a wrapper containing the class .view.

Edit in sandbox 
        
            

        <div class="view">
            [...]
        </div>

Step 2: Set a path to the image. If you want to make your image responsive, remember to add the class .img-fluid.

Edit in sandbox 
        
            

        <div class="view">
            <img src="https://mdbootstrap.com/img/Photos/Others/nature-sm.webp" class="img-fluid" alt="">
        </div>

Step 3: Add the class .mask to cover the image with the pattern.

Edit in sandbox 
        
            

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

            </div>
        </div>

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

Edit in sandbox 
        
            

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

            </div>
        </div>

Step 5: If you want to add some text, you can use the class .flex-center to center it, and .white-text to give your text a stronger contrast and make it more visible.

Edit in sandbox 
        
            

        <div class="view">
            <img src="https://mdbootstrap.com/img/Photos/Others/nature-sm.webp" class="img-fluid" alt="">
            <div class="mask pattern-1 flex-center">
                <p class="white-text">.pattern-1</p>
            </div>
        </div>

Overlays

sample image

slight overlay

sample image

light overlay

sample image

strong overlay

sample image

peach gradient overlay

sample image

blue gradient overlay

Usage

Instructions and markup are the same as for the patterns. It means that you add an overlay class (.rgba-black-strong in the example below) to the .mask.

See the full list of the overlay colors and intensity below

Edit in sandbox 
        
            

        <div class="view">
            <img src="https://mdbootstrap.com/img/Photos/Others/nature-sm.webp" class="img-fluid" alt="">
            <div class="mask flex-center rgba-black-strong">
                <p class="white-text">strong overlay</p>
            </div>
        </div>

Overlay colors and intensity

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

.rgba-blue-light

.rgba-red-light

.rgba-pink-light

.rgba-purple-light

.rgba-indigo-light

.rgba-cyan-light

.rgba-teal-light

.rgba-green-light

.rgba-lime-light

.rgba-yellow-light

.rgba-orange-light

.rgba-brown-light

.rgba-grey-light

.rgba-blue-grey-light

.rgba-black-light

.rgba-stylish-light

.rgba-white-light

.rgba-blue-strong

.rgba-red-strong

.rgba-pink-strong

.rgba-purple-strong

.rgba-indigo-strong

.rgba-cyan-strong

.rgba-teal-strong

.rgba-green-strong

.rgba-lime-strong

.rgba-yellow-strong

.rgba-orange-strong

.rgba-brown-strong

.rgba-grey-strong

.rgba-blue-grey-strong

.rgba-black-strong

.rgba-stylish-strong

.rgba-white-strong

.rgba-blue-slight

.rgba-red-slight

.rgba-pink-slight

.rgba-purple-slight

.rgba-indigo-slight

.rgba-cyan-slight

.rgba-teal-slight

.rgba-green-slight

.rgba-lime-slight

.rgba-yellow-slight

.rgba-orange-slight

.rgba-brown-slight

.rgba-grey-slight

.rgba-blue-grey-slight

.rgba-black-slight

.rgba-stylish-slight

.rgba-white-slight