brandv1.0
Utilities
Data Display
Data Entry

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

Change the shape of an image using .rounded or .circle modifier classes. In addition use .img-thumbnail to give an image 1px border appearance.

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

<template>
    <div class="col-sm-6 col-md-3">
        <img :src="imgThumb" class="img-fluid" alt="img">
    </div>
    <div class="col-sm-6 col-md-3">
        <img :src="imgThumb" class="img-fluid rounded" alt="img">
    </div>
    <div class="col-sm-6 col-md-3">
        <img :src="imgThumb" class="img-fluid circle" alt="img">
    </div>
    <div class="col-sm-6 col-md-3">
        <img :src="imgThumb" class="img-fluid img-thumbnail" alt="img">
    </div>
</template>
Class Values
class="img-fluid [value]" rounded / circle / warning / img-thumbnail
Aligning images

Align images with the helper float classes or text alignment classes.

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

<template>
    <div class="w-100 bg-light clearfix">
        <img :src="imgThumg" class="img-fluid float-start" alt="img">
        <img :src="imgThumg" class="img-fluid float-end" alt="img">
    </div>
    <h6 class="my-5">Align Center</h6>
    <div class="w-100 bg-light">
        <img :src="imgThumg" class="img-fluid mx-auto d-block" alt="img">
    </div>
</template>
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.

A generic square placeholder image with rounded corners in a figure.
Left Aligned Caption
A generic square placeholder image with rounded corners in a figure.
Right Aligned Caption 
							
                                
<script setup>
import imgThumb from '@/img_src/img-thumb.jpg'
</script>

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