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> 
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
You can use Bootstrap’s
gridsystem:<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-rowUsealign-h="between"to align elements horizontally and leave space between them.<h4>and pictures are placed in columns 1 and 2,cols="auto"inb-colwill automatically adjust the width .