Skip to di men tin dɛn we de insay Skip to doks nevigishɔn
in English

Imej dɛn

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

Na dis pej

Imej dɛn we de ansa

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

Placeholder Responsive image 
<img src="..." class="img-fluid" alt="...">

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="..." class="img-thumbnail" alt="...">

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-start" alt="...">
<img src="..." class="rounded float-end" 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>

Sass we bin de

Di tin dɛn we kin chenj

Variables de fɔ pikchɔ thumbnail dɛn.

$thumbnail-padding:                 .25rem;
$thumbnail-bg:                      $body-bg;
$thumbnail-border-width:            $border-width;
$thumbnail-border-color:            $gray-300;
$thumbnail-border-radius:           $border-radius;
$thumbnail-box-shadow:              $box-shadow-sm;