[Vuejs]-How to align image to the right using Bootstrap Vue

by

1👍

✅

You can use Bootstrap 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-row with align-h="between" aligns the elements horizontally with space between them. The <h4> and the image is placed inside the 1st and 2nd column and cols="auto" in b-col adjusts the width automatically.

👤Byte Ninja

Leave a comment