CODEWITHSUNDEEP
htmlvue.jsbootstrap-4bootstrap-vue
rich.e
rich.e

Reputation: 3750

How to align card title when using Boostrap-Vue

I'm using boostrap-vue's <b-card> and hitting an issue where I can't seem to center align the title prop. Anyone know a good way to do this? Below is the contents of my card, which has a dynamic title, img-src and also sub-text (which is actually center-aligned, unlike the title):

    <b-card
      :title="obj.name"
      :img-src="mainImage()"
      img-alt="project info"
      img-top
      tag="article"
      style="max-width:30rem"
      bg-variant="dark"
      text-variant="white"
      class="mb-3 text-center"
    >
    <a class="subtext card-block stretched-link text-decoration-none" :href="endpoint()">
       {{ obj.subtext }}
    </a> 
    </b-card>

Upvotes: 0

Views: 995

Answers (1)

wangdev87
wangdev87

Reputation: 8751

Use b-card-title inside b-card.

<b-card-title class="text-center">{{obj.name}}</b-card-title>

Upvotes: 1

Related Questions