BootstrapVue Carousel Center Text Vertically

March 12, 2020
<template>
  <div>
    <b-carousel
      class="carousel-center"
      :interval="4000"
      controls
      indicators
      background="#ababab"
      img-width="1024"
      img-height="480"
      >

      <b-carousel-slide img-blank>
        <div class="d-flex h-100 align-items-center justify-content-center">
          <div>
            <h1>What is Lorem Ipsum?</h1>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
          </div>
        </div>
      </b-carousel-slide>

      <b-carousel-slide img-blank>
        <div class="d-flex h-100 align-items-center justify-content-center">
          <div>
            <h1>Where does it come from?</h1>
            <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source.</p>
          </div>
        </div>
      </b-carousel-slide>

    </b-carousel>
  </div>
</template>


<style lang="scss">
.carousel-center {
  .carousel-caption {
    top: 20px;
  }
}
</style>

<!--
<style scoped>
.carousel-center {

}

.carousel-center >>> .carousel-caption {
    top: 20px;
}
</style>

<style lang="scss" scoped>
::v-deep .carousel-center {

  .carousel-caption {
    top: 20px;
  }
}
</style>
 -->
This work is licensed under a
Creative Commons Attribution-NonCommercial 4.0 International License.