How to right-align images using Bootstrap Vue

Question

I'm new to Bootstrap Vue and trying to align an image to the right using the b-card header. I tried using <span> or <div>. The template's title size was perfect until I added the image, which also showed up a little to the right, but also a little below. Here is my codepen link. Any help you can provide would be greatly appreciated.

https://codepen.io/tone373/pen/JjeYazG

<b-card header-tag="header">
  
  <template #header>
    <h4>b-img</h4>
    <b-img right src="https://picsum.photos/125/125/?image=58" alt="Right image"></b-img>
  </template>

</b-card>

Answer 1

You can use Bootstrap’s grid system:

<b-card header-tag="header">
  <template #header>
    <b-row align-h="between" class="align-items-center">
      <h4 class="mb-0">b-img</h4>
      <b-col cols="auto">
        <b-img right src="https://picsum.photos/125/125/?image=58" alt="Right image"></b-img>
      </b-col>
    </b-row>
  </template>
</b-card>

b-rowUse align-h="between" to align elements horizontally and leave space between them. <h4> and pictures are placed in columns 1 and 2, cols="auto" in b-col will automatically adjust the width .