The latest Bootstrap 5 is giving a tough time in adding class="mask" to my background image. It doesn't even work at all.
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
</head>
<body>
<div class="d-flex justify-content-center align-items-center bg-image">
<img src="https://images.unsplash.com/photo-1489987707025-afc232f7ea0f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80" class="w-100" />
<div class="mask " style="background-color:rgba(0, 0, 0, 0.6) ;">
<div class=" justify-content-center align-items-center b-100 ">
<hi class="text-white">
product details
</hi>
</div>
</div>
</div>
</body>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/bootstrap@5.2.0-beta1/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 class="d-flex justify-content-center align-items-center bg-image">
<img src="https://images.unsplash.com/photo-1489987707025-afc232f7ea0f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80" class="w-100" />
<div class="mask" style="background-color:rgba(0, 0, 0, 0.6) ;">
<div class="d-flex justify-content-center align-items-center h-100">
<h1 class="text-white">
product details
</h1>
</div>
</div>
</div>
</body><link rel="stylesheet" href="https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/docs-app/css/dist/mdb5/standard/core.min.css">
<div class="bg-image">
<img
src="https://images.unsplash.com/photo-1489987707025-afc232f7ea0f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80"
class="w-100"
alt="Louvre Museum"
/>
<div class="mask" style="background-color: rgba(0, 0, 0, 0.6)">
<div class="d-flex justify-content-center align-items-center h-100">
<p class="text-white mb-0">product details</p>
</div>
</div>
</div>Fixed the Bootstrap link, and added useful classes to rightly position the text div on the image.