React responsive title over a carousel slide

Hello all, I\'m having trouble placing a title over the first carousel slide, and having it be responsive like the rest of the page. Can someone help? This is what I came up with. Or can someone point me to the example code for the full page image carousel? There doesn\'t seem to be one.....This is the code I have right now.

Start your code here

<Carousel activeItem={this.state.activeItem} next={this.next} className=\"z-depth-1 mt-0\"> <CarouselInner> <CarouselItemitemId=\"1\"> <View> <imgclassName=\"d-block w-100\"src=\"https://res.cloudinary.com/twenty20/private_images/t_watermark-criss-cross-10/v1461053857000/photosp/b7825630-1df6-4660-96aa-03a544893ce1/stock-photo-emergency-new-york-medical-ambulance-paramedic-b7825630-1df6-4660-96aa-03a544893ce1.jpg\"alt=\"First slide\"/> <Maskoverlay=\"black-light\"> <divclassName=\"row mt-5\"id=\"title\"> <divclassName=\"col-md-12 white-text text-center\"> <h1className=\"display-3 mb-0 pt-md-5 pt-5 white-text font-weight-bold wow fadeInDown\"data-wow-delay=\"0.3s\">NATALIE <aclassName=\"indigo-text font-weight-bold\">SMITH</a> </h1> <h5className=\"text-uppercase pt-md-5 pt-sm-2 pt-5 pb-md-5 pb-sm-3 pb-5 white-text font-weight-bold wow fadeInDown\"data-wow-delay=\"0.3s\">Web developer & graphic designer</h5> <divclassName=\"wow fadeInDown\"data-wow-delay=\"0.3s\"> <aclassName=\"btn btn-light-blue btn-lg\">portfolio</a> <aclassName=\"btn btn-indigo btn-lg\">About me</a> </div> </div> </div> </Mask> </View> <CarouselCaption> <h3className=\"h3-responsive\">Light mask</h3> <p>First text</p> </CarouselCaption> </CarouselItem> <CarouselItemitemId=\"2\"> <View> <imgclassName=\"d-block w-100\"src=\"https://mdbootstrap.com/img/Photos/Slides/img%20(99).jpg\"alt=\"Second slide\"/> <Maskoverlay=\"black-strong\"></Mask> </View> <CarouselCaption> <h3className=\"h3-responsive\">Strong mask</h3> <p>Second text</p> </CarouselCaption> </CarouselItem> <CarouselItemitemId=\"3\"> <View> <imgclassName=\"d-block w-100\"src=\"https://mdbootstrap.com/img/Photos/Slides/img%20(17).jpg\"alt=\"Third slide\"/> <Maskoverlay=\"black-slight\"></Mask> </View> <CarouselCaption> <h3className=\"h3-responsive\">Slight mask</h3> <p>Third text</p> </CarouselCaption> </CarouselItem> <CarouselItemitemId=\"4\"> <View> <imgclassName=\"d-block w-100\"src=\"https://mdbcdn.b-cdn.net/img/Photos/Slides/img%20%28143%29.jpg\"alt=\"Mattonit\'s item\"/> <Maskoverlay=\"black-light\"></Mask> </View> <CarouselCaption> <h3className=\"h3-responsive\">Sopot Beach</h3> <p>Taken june 21th by @mattonit</p> </CarouselCaption> </CarouselItem> </CarouselInner> <CarouselControldirection=\"prev\"role=\"button\"onClick={() => { this.prev(); }}/> <CarouselControldirection=\"next\"role=\"button\"onClick={() => { this.next(); }}/> <CarouselIndicators> <CarouselIndicatoractive={activeItem === 1 ? true : false}onClick={() => { this.goToIndex(1); }}></CarouselIndicator> <CarouselIndicatoractive={activeItem === 2 ? true : false}onClick={() => { this.goToIndex(2); }}></CarouselIndicator> <CarouselIndicatoractive={activeItem === 3 ? true : false}onClick={() => { this.goToIndex(3); }}></CarouselIndicator> <CarouselIndicatoractive={activeItem === 4 ? true : false}onClick={() => { this.goToIndex(4); }}></CarouselIndicator> </CarouselIndicators> </Carousel>

---