My carousel Headings are all ontop of the images, I’d like for them to be below the images but still within the carousel so that they move as one.
The carousel works so its a styling issue not broken code 🙂
I’m very new at JavaScript so it could be as simple as the JavaScript places the Headers where they are but I can’t figure out how to reposition them:/

This is my HTML for the Carousel, It works perfectly i solely have issue with the heading placement.

<div id="carousel-2" class="carousel slide carousel-fade" data-ride="carousel" data-interval="6000">
        <ol class="carousel-indicators">
            <li data-target="#carousel-2" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-2" data-slide-to="1"></li>
            <li data-target="#carousel-2" data-slide-to="2"></li>
            <li data-target="#carousel-2" data-slide-to="3"></li>
            <li data-target="#carousel-2" data-slide-to="4"></li>
        </ol>
        <div class="carousel-inner" role="listbox">
         <div class="carousel-item active">
          <img src="pics/tags.png" alt="responsive image" class="d-block img-fluid">
           <div class="carousel-caption justify-content-center align-items-center">
            <div>
             <h2 style="color: #20317f">Plastic Valve Tags</h2>
              <a href="contact.html"><button type="button" class="btn btn-primary">Contact to Order</button></a>
            </div>
           </div>
          </div>
          <div class="carousel-item">
           <img src="pics/logic.png" alt="responsive image" class="d-block img-fluid">
            <div class="carousel-caption justify-content-center align-items-center">
             <div>
              <h2 style="color: #20317f">Plastic Panel Labels</h2><br>
               <a href="contact.html"><button type="button" class="btn btn-primary">Contact to Order</button></a>
             </div>
            </div>
          </div>
          <div class="carousel-item">
           <img src="pics/skate.png" alt="responsive image" class="d-block img-fluid">
            <div class="carousel-caption justify-content-center align-items-center">
             <div>
              <h2 style="color: #20317f">Plastic Control Panel Facing</h2>
               <a href="contact.html"><button type="button" class="btn btn-primary">Contact to Order</button></a>
              </div>
             </div>
           </div>
           <div class="carousel-item">
            <img src="pics/warn.png" alt="responsive image" class="d-block img-fluid">
             <div class="carousel-caption justify-content-center align-items-center">
              <div>
               <h2>Plastic Warning Labels</h2>
                <a href="contact.html"><button type="button" class="btn btn-primary">Contact to Order</button></a>
              </div>
             </div>
            </div>
             <div class="carousel-item">
            <img src="pics/more.png" alt="responsive image" class="d-block img-fluid">
             <div class="carousel-caption justify-content-center align-items-center">
              <div>
               <h2>And More</h2>
                <a href="contact.html"><button type="button" class="btn btn-primary">Contact to Order</button></a>
              </div>
             </div>
            </div>
           </div>
           <a class="carousel-control-prev" href="#carousel-2" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
           </a>
           <a class="carousel-control-next" href="#carousel-2" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
           </a>
          </div>

This is the CSS

.carousel {background:#444;}
.carousel-item .img-fluid {width:100%; max-height: 70vh;}
.carousel-item a {display: block; width:100%;}
header p{color: #20317f; background: white; padding: 1em; border: thin #828280; border-radius: 40px;}
header h1, h2, h3{color: #20317f; background: white; padding: .1em 0em; border: thin #828280; border-radius: 40px;}

Note: I had to add a white background to the headings for them to be legible in their current position, but this obviously means all headings on the entire site have a white box :/
And here is the JavaScript

var $item = $('.carousel .item'); 
var $wHeight = $(window).height();
$item.eq(0).addClass('active');
$item.height($wHeight); 
$item.addClass('full-screen');

$(window).on('resize', function (){
  $wHeight = $(window).height();
  $item.height($wHeight);
});

$('.carousel img').each(function() {
  var $src = $(this).attr('src');
  var $color = $(this).attr('data-color');
  $(this).parent().css({
    'background-image' : 'url(' + $src + ')',
    'background-color' : $color
  });
  $(this).remove();
});

//Pause/play buttons

 $(document).ready(function(){
  //$("#mycarousel").carousel( { interval: 2000 } );
  $("#carousel-pause").click(function(){
    $("#mycarousel").carousel('pause');
  });
   
  $("#carousel-play").click(function(){
    $("#mycarousel").carousel('cycle');
  });
});