Source

Imej dɛn

Dokumɛnt ɛn ɛgzampul fɔ pik pikchɔ dɛn to rispɔnsiv bihayvya (so dɛn nɔ go ɛva bi big pas dɛn mama ɛn papa ɛlimɛnt dɛn) ɛn ad layt stayl dɛn to dɛn—ɔl dis bay klas dɛn.

Imej dɛn we de ansa

Imej dɛn na Bootstrap dɛn mek dɛn ansa wit .img-fluid. max-width: 100%;ɛn height: auto;dɛn kin aplay pan di pikchɔ so dat i go skel wit di mama ɛn papa ɛlimɛnt.

Placeholder Responsive image 
<img src="..." class="img-fluid" alt="Responsive image">
SVG imej ɛn IE 10

Insay Intanɛt Ɛksplɔrɔ 10, SVG pikchɔ dɛn wit .img-fluidna disproportionately saiz. Fɔ fiks dis, ad width: 100% \9;usay nid de. Dis fiks nɔ de saiz ɔda imej fɔmat dɛn fayn fayn wan, so Bootstrap nɔ de yuz am ɔtomɛtik wan.

Imej dɛn we gɛt smɔl pikchɔ dɛn

Apat frɔm wi border-radius utilities , yu kin yuz .img-thumbnailfɔ gi wan pikchɔ wan rawnd 1px bɔda apinɛns.

A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera 200x200 
<img src="..." alt="..." class="img-thumbnail">

Fɔ alaynɛt di pikchɔ dɛn

Align imej dɛn wit di ɛlda flot klas dɛn ɔ tɛks alaynɛshɔn klas dɛn . block-lɛvel imej dɛn kin sɛntrɛd yuz di .mx-automargin yutiliti klas .

Placeholder 200x200 Placeholder 200x200 
<img src="..." class="rounded float-left" alt="...">
<img src="..." class="rounded float-right" alt="...">
Placeholder 200x200 
<img src="..." class="rounded mx-auto d-block" alt="...">
Placeholder 200x200 
<div class="text-center">
  <img src="..." class="rounded" alt="...">
</div>

Pikchɔ

If yu de yuz di <picture>ɛlimɛnt fɔ spɛsifa bɔku <source>ɛlimɛnt dɛn fɔ wan patikyula <img>, mek shɔ se yu ad di .img-*klas dɛn to di <img>ɛn nɔto to di <picture>tɛg.

<picture>
  <source srcset="..." type="image/svg+xml">
  <img src="..." class="img-fluid img-thumbnail" alt="...">
</picture>