Project adhoc-bootstrap Help Step 18

Projects
1

Hello, I need help about step 18 (see above) of the project(Link Project : https://www.codecademy.com/courses/learn-bootstrap/projects/adhoc-bootstrap)

is my code good? more precisely adding this?

<p class="bg-dark rounded-pill text-center font-weight-bold mb-0 p-0">

Step 18.

With the slides set up, we can add some captions to each slide.

Style the captions so that it has a black background, no vertical padding, and a rounded-pill border.

Inside the captions, add the appropriate text and style it according to the design spec.

My code ==>

<div class="row bg-dark rounded-bottom">
  <div class="col">
    <!-- Carousel Component -->
    <div id="carouselExampleControls" class="carousel slide w-50 p-3" data-ride="carousel">
      <div class="carousel-inner">
        <div class="carousel-item active">
          <img src="https://s3.amazonaws.com/codecademy-content/courses/learn-bootstrap-4/adhoc/brian.png" class="d-block w-100" alt="picture of Brian M. the CEO">
          <div class= "carousel-caption">
            <p class="bg-dark rounded-pill text-center font-weight-bold mb-0 p-0">CEO: <span class="font-weight-light">Brian</span></p>
          </div>
        </div>
        <div class="carousel-item">
          <img src="https://s3.amazonaws.com/codecademy-content/courses/learn-bootstrap-4/adhoc/andy.png" class="d-block w-100" alt="picture of Andy C. the CFO">
          <div class= "carousel-caption">
            <p class="bg-dark rounded-pill text-center font-weight-bold mb-0 p-0">CFO: <span class="font-weight-light">Andy C.</span></p>
          </div>
        </div>
        <div class="carousel-item">
          <img src="https://s3.amazonaws.com/codecademy-content/courses/learn-bootstrap-4/adhoc/angela.png" class="d-block w-100" alt="picture of Angela W. the COO">
          <div class= "carousel-caption">
            <p class="bg-dark rounded-pill text-center font-weight-bold mb-0 p-0">COO: <span class="font-weight-light">Angela W.</span></p>
          </div>
        </div>
        <div class="carousel-item">
          <img src="https://s3.amazonaws.com/codecademy-content/courses/learn-bootstrap-4/adhoc/amie.png" class="d-block w-100" alt="picture of Amie S. the CTO">
          <div class= "carousel-caption">
            <p class="bg-dark rounded-pill text-center font-weight-bold mb-0 p-0">CTO: <span class="font-weight-light">Amie S.</span></p>
          </div>
        </div>
      </div>
      <a class="carousel-control-prev" href="#carouselExampleControls" 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="#carouselExampleControls" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
  </div>
</div>

Thank you in advance for your help, because no correction to see if what I did is good…