Vue Bootstrap Image Component

Image with Bootstrap Styling

Bootstrap 5 components designed for Vue.js

This component is part of the CoreUI for Vue.js UI components library, which offers all Bootstrap components designed to work seamlessly with Vue.js.

If you want to use Bootstrap 5 in a Vue.js environment while also needing advanced components that Bootstrap does not offer and dedicated developer support, then this library is the best solution for you.

Learn how to use CoreUI’s Vue Image component with Bootstrap styles for flexible, framework-consistent UI.

On this page

Responsive images

Images in CoreUI for Vue.js are made responsive with fluid property. This applies max-width: 100%; and height: auto; to the image so that it scales with the parent element.

vue

<template>
  <CImage fluid src="/assets/img/vue.jpg" />
</template>

<script setup>
import { CImage } from '@coreui/vue'
</script>

Image thumbnails

In addition to our border-radius utilities, you can use propthumbnail to give an image a rounded 1px border appearance.

vue

<template>
  <CImage rounded thumbnail src="/assets/img/vue400.jpg" width="200" height="200" />
</template>

<script setup>
import { CImage } from '@coreui/vue'
</script>

Aligning images

Align images with the align property.

vue

<template>
  <div class="clearfix">
    <CImage align="start" rounded src="/assets/img/vue400.jpg" width="200" height="200" />
    <CImage align="end" rounded src="/assets/img/vue400.jpg" width="200" height="200" />
  </div>
</template>

<script setup>
import { CImage } from '@coreui/vue'
</script>

vue

<template>
  <div class="clearfix">
    <CImage align="center" rounded src="/assets/img/vue400.jpg" width="200" height="200" />
  </div>
</template>

<script setup>
import { CImage } from '@coreui/vue'
</script>

vue

<template>
  <div class="text-center">
    <CImage rounded src="/assets/img/vue400.jpg" width="200" height="200" />
  </div>
</template>

<script setup>
import { CImage } from '@coreui/vue'
</script>