HTML CSS：轮播幻灯片放映-添加标题页眉

Question

如何将“轮播标题”标题添加到轮播？我知道Bootstrap具有卡片标题标题属性https://getbootstrap.com/docs/4.0/components/card/。
只是看看库中的轮播中是否存在一个。如果没有，如何在上方添加标题？当前代码段如下。

.imgcarousel {
    width:100%;
}


.carouselleftarrow {
    font-family: Material Icons;
    position: absolute;
    bottom: 5px;
    content: "\e408";
}

.carouselrightarrow {
    font-family: Material Icons;
    position: absolute;
    bottom: 5px;
    content: "\e409";
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
   rel="stylesheet">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

<div class="carousel slide" data-ride="carousel" id="Carouselid0efe5f93f1734c5a967cf4ff7c47775a" style="  width: 500px;
   height: 500px;">
   <ol class="carousel-indicators">
      <li data-slide-to="0" data-target="#Carouselid0efe5f93f1734c5a967cf4ff7c47775a" class=""></li>
      <li data-slide-to="1" data-target="#Carouselid0efe5f93f1734c5a967cf4ff7c47775a" class=""></li>
      <li data-slide-to="2" data-target="#Carouselid0efe5f93f1734c5a967cf4ff7c47775a" class="active"></li>
   </ol>
   <div class="carousel-inner">
      <div class="item"><img class="imgcarousel mCS_img_loaded" src="https://www.woodlandtrust.org.uk/media/100078482/Sycamore01.jpg?cb=-11897985&amp;preset=gallery-tab-main-image"></div>
      <div class="item"><img class="imgcarousel mCS_img_loaded" src="https://statesymbolsusa.org/sites/statesymbolsusa.org/files/styles/symbol_thumbnail__medium/public/primary-images/Applesfreshpicked.jpg?itok=YmYkBfY7"></div>
      <div class="item active"><img class="imgcarousel mCS_img_loaded" src="https://www.mcpl.us/sites/default/files/styles/large/public/bookstack.jpg?itok=pHICdzg9"></div>
   </div>
   <a class="left carousel-control" data-slide="prev" href="#Carouselid0efe5f93f1734c5a967cf4ff7c47775a"><span class="carouselleftarrow">navigate_before</span></a><a class="right carousel-control" data-slide="next" href="#Carouselid0efe5f93f1734c5a967cf4ff7c47775a"><span class="carouselrightarrow">navigate_next</span></a>
</div>

Answer 1

在所有图像标签的下方添加汽车标题div块

<div class="carousel-header">
    Featured
</div>


<img class="imgcarousel mCS_img_loaded" src="https://www.mcpl.us/sites/default/files/styles/large/public/bookstack.jpg?itok=pHICdzg9">

.carousel-header {
  background:#000;
  color:#fff;
  text-align:center;
  padding:1em 0;
}

Codepen演示：https://codepen.io/aystarz52/pen/OerEZg?editors=1100