I am trying to select some text and bold it for when the slider advances to the next slide. I have the "**Showing 1** out of 3" but when you cycle through it is not bold on the cycle. I would like to make sure the "showing #" is always bold. Here is my current code.

```
<div id="carousel-index" style="text-align: left;"><b>Showing 1</b> out of 3</div>

<script>

$('.Leadership').on('slid.bs.carousel', function () {

  var carouselData = $(this).data('bs.carousel');

  var currentIndex = carouselData.getItemIndex(carouselData.$element.find('.item.active'));
  var total = carouselData.$items.length;

  var text = " Showing " + (currentIndex + 1) + " out of " + total;

  $('#carousel-index').text(text);
});

</script>

```