Why isn't the 'mask' class working in my Bootstrap 5 project?-CodePudding

The latest Bootstrap 5 is giving a tough time in adding to my background image. It doesn't even work at all.

<head>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X R7YkIZDRvuzKMRqM OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
</head>

<body>
  <div >
    <img src="https://images.unsplash.com/photo-1489987707025-afc232f7ea0f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80"  />
    <div  style="background-color:rgba(0, 0, 0, 0.6) ;">
      <div >
        <hi >
          product details
        </hi>
      </div>
    </div>
  </div>
</body>

CodePudding user response：

Mask is a part of Material Design for Bootstrap (mdbootstrap), so you need to include its CSS CDN too

<link
  href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/4.2.0/mdb.min.css"
  rel="stylesheet"
/>

<head>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X R7YkIZDRvuzKMRqM OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<link
  href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/4.2.0/mdb.min.css"
  rel="stylesheet"
/>
</head>
<body>

<div >
        <img src="https://images.unsplash.com/photo-1489987707025-afc232f7ea0f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80"  />
        <div  style="background-color:rgba(0, 0, 0, 0.6) ;">
            <div >
                <h1 >
                    product details
                </h1>
            </div>
        </div>
    </div>

</body>

CodePudding user response：

<link rel="stylesheet" href="https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/docs-app/css/dist/mdb5/standard/core.min.css">
<div >
  <img
    src="https://images.unsplash.com/photo-1489987707025-afc232f7ea0f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80"
    
    alt="Louvre Museum"
  />
  <div  style="background-color: rgba(0, 0, 0, 0.6)">
    <div >
      <p >product details</p>
    </div>
  </div>
</div>

Fixed the Bootstrap link, and added useful classes to rightly position the text div on the image.