1. Tutorials
  2. Vue.js

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>
 -->
❤️ Is this article helpful?
Buy me a coffee☕ or support my work to keep this space 🖖 and ad-free.
If you can't, do send some 💖 to @d_luaz or help to share this article.
👶 Apps I built
Travelopy - discover travel places in Malaysia, Singapore, Taiwan, Japan.
Pixtory App (Alpha) - easily organize photos on your phone into a blog.
暖心芽 (WIP) 🌞❤️🌱 - reminder of hope, warmth, thoughts and feelings (or just quotes).
LuaPass - offline password manager
By Desmond Lua
A dream boy who enjoys making apps, travelling and gardening. Follow me on @d_luaz.
This work is licensed under a
Creative Commons Attribution-NonCommercial 4.0 International License.