<div class="container-fluid bg-light p-4">
  <h1>Add Featured Tag Above Image</h1>

  <figure class="figure tag tag-featured">
    <img src="https://dummyimage.com/600x400/000/fff.jpg" alt="featured image" class="figure-img">
    <figcaption class="figure-caption">A short caption for the image</figcaption>
  </figure>

  <figure class="figure tag tag-sale">
    <img src="https://dummyimage.com/600x400/000/fff.jpg" alt="featured image" class="figure-img">
    <figcaption class="figure-caption">A short caption for the image</figcaption>
  </figure>

  <figure class="figure tag tag-out">
    <img src="https://dummyimage.com/600x400/000/fff.jpg" alt="featured image" class="figure-img">
    <figcaption class="figure-caption">A short caption for the image</figcaption>
  </figure>

</div>
<!-- /.container -->
/* Make the tag position relative to the figure */
.figure.tag {
  position: relative;
}
/* set the base styles all tags should use */
.figure.tag::before {
  position: absolute;
  top: 10%;
  display: block;
  color: white;
  padding: 0.5rem 1rem;
  font-weight: bold;
}
/* Specific variations for different tags */
.figure.tag-featured::before {
  content: "Featured";
  background: orange;
}
.figure.tag-sale::before {
  content: "Sale";
  background: red;
}

.figure.tag-out::before {
  content: "Out of Stock";
  background: #e2e2e2;
  border: #ccc;
  color: #444;
  top: 42%;
  right: 0;
  left: 0;
  width: 30%;
  margin: 0 auto;
  text-align: center;
}

External CSS

  1. https://jacoblett.github.io/bootstrap4-latest/bootstrap-4-latest.min.css

External JavaScript

  1. https://code.jquery.com/jquery-3.2.1.slim.min.js
  2. https://jacoblett.github.io/bootstrap4-latest/bootstrap-4-latest.min.js