in English

Biller

Dokumentatioun an Beispiller fir Biller a reaktiounsfäeger Verhalen ze wielen (sou datt se ni méi grouss ginn wéi hir Elterendeeler) a liichte Stiler derbäi ginn - alles iwwer Klassen.

Reaktiounsfäeger Biller

Biller am Bootstrap gi reaktiounsfäeger mat .img-fluid. max-width: 100%;a height: auto;ginn op d'Bild applizéiert sou datt et mam Elterendeel skaléiert.

Placeholder Responsive image 
<img src="..." class="img-fluid" alt="...">
SVG Biller an Internet Explorer

Am Internet Explorer 10 an 11 sinn SVG Biller mat .img-fluidonproportional Gréisst. Fir dëst ze fixéieren, addéieren width: 100%;oder .w-100wou néideg. Dëse Fix mécht aner Bildformater falsch, sou datt Bootstrap se net automatesch applizéiert.

Bild Miniaturbiller

Zousätzlech zu eise Grenzradius-Utilities , kënnt Dir benotze .img-thumbnailfir e Bild e gerundeten 1px Grenzoptrëtt ze ginn.

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="...">

Ausriichten Biller

Alignéiert Biller mat den Helper Float Klassen oder Text Ausrichtung Klassen . block-Niveau Biller kënne mat der .mx-autoMargin Utility Klass zentréiert ginn .

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>

Bild

Wann Dir d' <picture>Element benotzt fir e puer <source>Elementer fir e spezifescht ze spezifizéieren <img>, gitt sécher datt d' .img-*Klassen un d' Tag addéieren <img>an net .<picture>

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