Images

Documentation and examples for opting images into responsive behavior (so they never become wider than their parent) and add lightweight styles to them—all via classes.

Image Shapes

To give an image 1px border appearance use thumbnail props. And you can control which corners are rounded by setting the rounded prop to one of the following values:

true (or prop present with no value): round all corners
false (or prop not present): no explicit rounding or corners (default)
'top': round the top corners
'end': round the right corners
'bottom': round the bottom corners
'start': round the left corners
'circle': make a circle (if square image) or oval (if not square) border
'0': explicitly turn off rounding of corners

							
                                
<template>
    <BContainer class="py-3">
        <BRow>
            <BCol sm="6" md="3">
                <!-- BImg is a component that imported from bootstrap-vue-next, but no need to import -->
                <BImg fluid src="./img_src/thumb.jpg" alt="thum_img" />
            </BCol>
            <BCol sm="6" md="3">
                <BImg fluid rounded src="./img_src/thumb.jpg" alt="thum_img" />
            </BCol>
            <BCol sm="6" md="3">
                <BImg fluid rounded="circle" src="./img_src/thumb.jpg" alt="thum_img" />
            </BCol>
            <BCol sm="6" md="3">
                <BImg fluid thumbnail src="./img_src/thumb.jpg" alt="thum_img" />
            </BCol>
        </BRow>
    </BContainer>
</template>

Aligning images

Align images with the placement props start (floats left), end (floats right), and center.

Align Center

							
                                
<template>
    <div class="w-100 bg-light clearfix">
        <!-- BImg is a component that imported from bootstrap-vue-next, but no need to import -->
        <BImg fluid placement="start" :src="thumbImg" alt="img" />
        <BImg fluid placement="end" :src="thumbImg" alt="img" />
    </div>
    <h6 class="my-5">Align Center</h6>
    <div class="w-100 bg-light">
        <BImg fluid placement="center" :src="thumbImg" alt="img" />
    </div>
</template>

<script setup>
import imgThumb from '@/img_src/img-thumb.jpg'
</script>

Figures

Anytime you need to display a piece of content—like an image with an optional caption, consider using a figure. Aligning the figure’s caption is easy with text utilities.

							
                                
<template>
    <figure class="figure">
        <BImg
            :src="thumbImg"
            fluid
            rounded
            class="figure-img w-200p me-4"
            alt="A generic square placeholder image with rounded corners in a figure."
        />
        <figcaption class="figure-caption">Left Aligned Caption</figcaption>
    </figure>
    <figure class="figure">
        <BImg
            :src="thumbImg"
            fluid
            rounded
            class="figure-img w-200p"
            alt="A generic square placeholder image with rounded corners in a figure."
        />
        <figcaption class="figure-caption text-end">Right Aligned Caption</figcaption>
    </figure>
</template>

<script setup>
import imgThumb from '@/img_src/img-thumb.jpg'
</script>

Image Shapes
Aligning images
Figures