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.

🤖 Looking for the LLM-optimized version?View llm.md

Other frameworks

CoreUI components are available as native Angular, React, and Vue components. To learn more please visit the following pages.

• Angular Image
• React Image
• Vue Image

Responsive images

Images in CoreUI for Bootstrap are made responsive with.img-fluid. This appliesmax-width: 100%; andheight: auto; to the image so that it scales with the parent element.

<imgsrc="..."class="img-fluid"alt="...">

Image thumbnails

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

<imgsrc="..."class="img-thumbnail"alt="...">

Aligning images

Align images with thehelper float classes ortext alignment classes.block-level images can be centered usingthe.mx-auto margin utility class.

<imgsrc="..."class="rounded float-start"alt="..."><imgsrc="..."class="rounded float-end"alt="...">

<imgsrc="..."class="rounded mx-auto d-block"alt="...">

<divclass="text-center"><imgsrc="..."class="rounded"alt="..."></div>

Picture

If you are using the<picture> element to specify multiple<source> elements for a specific<img>, make sure to add the.img-* classes to the<img> and not to the<picture> tag.

<picture><sourcesrcset="..."type="image/svg+xml"><imgsrc="..."class="img-fluid img-thumbnail"alt="..."></picture>

Customization

SASS variables

Variables are available for image thumbnails.

$thumbnail-padding:.25rem;$thumbnail-bg:var(--#{$prefix}body-bg);$thumbnail-border-width:var(--#{$prefix}border-width);$thumbnail-border-color:var(--#{$prefix}border-color);$thumbnail-border-radius:var(--#{$prefix}border-radius);$thumbnail-box-shadow:var(--#{$prefix}box-shadow-sm);