Images & figures

Render responsive images, thumbnails, rounded images, alignment helpers, and figure captions.

Responsive images

Set fluid to apply Bootstrap's responsive image sizing, which constrains the image to the parent width while keeping its height automatic. Use HTML width and height attributes when intrinsic dimensions are useful for layout stability.

Responsive example
aspnet 

<bs-img src="/images/XmlLogGen.png" alt="Responsive example" fluid="true" rounded="true" width="640" height="360" loading="lazy" />

Image thumbnails

Set thumbnail for Bootstrap's bordered thumbnail treatment. Thumbnail and rounded image attributes compose normally with declarative float, margin, and sizing attributes.

Thumbnail example

Use image helper attributes for float, margin, and sizing behavior.

aspnet 

<bs-div clearfix="true">
    <bs-img src="/images/Icon-Generator.png" alt="Thumbnail example" thumbnail="true" float="Start" end-margin="Default3" bs-width="Relative25" />
    <bs-p>Use image helper attributes for float, margin, and sizing behavior.</bs-p>
</bs-div>

Aligning images

Use float, margin, and display attributes for Bootstrap's documented alignment patterns. Keep the alt text meaningful unless the image is purely decorative.

Left aligned example Right aligned example

Floated images use declarative utility attributes, while the image helper owns the image element and common image attributes.

aspnet 

<bs-div clearfix="true">
    <bs-img src="/images/Icon-Generator.png" alt="Left aligned example" rounded="true" float="Start" end-margin="Default3" bs-width="Relative25" />
    <bs-img src="/images/Icon-Generator.png" alt="Right aligned example" rounded="true" float="End" start-margin="Default3" bs-width="Relative25" />
    <bs-p>Floated images use declarative utility attributes, while the image helper owns the image element and common image attributes.</bs-p>
</bs-div>

Centered image

Use display and margin attributes for the centered image pattern from Bootstrap's image docs.

Centered example
aspnet 

<bs-img src="/images/Icon-Generator.png" alt="Centered example" rounded="true" display="Block" x-margin="AutoOrDefault" bs-width="Relative25" />

Figures

Use bs-figure and bs-figure-caption for the semantic figure pattern.

Example figure
A local image rendered through bs-img.
aspnet 

<bs-figure>
    <bs-img src="/images/XmlLogGen.png" alt="Example figure" fluid="true" rounded="true" figure-image="true" />
    <bs-figure-caption>A local image rendered through <code>bs-img</code>.</bs-figure-caption>
</bs-figure>

Picture

Use bs-picture with bs-source for art direction or multiple image sources, and keep bs-img for the fallback image required by the browser.

Picture fallback example
aspnet 

<bs-picture>
    <bs-source srcset="/images/XmlLogGen.png" media="(min-width: 768px)" type="image/png" />
    <bs-img src="/images/Icon-Generator.png" alt="Picture fallback example" fluid="true" rounded="true" loading="lazy" />
</bs-picture>