Source

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.

100% x250 
<img src="..." class="img-fluid" alt="Responsive image">
SVG Biller an IE 10

Am Internet Explorer 10 sinn SVG Biller mat .img-fluidonproportional Gréisst. Fir dëst ze fixéieren, addéiere width: 100% \9;wou 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.

200x200 
<img src="..." alt="..." class="img-thumbnail">

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 .

200x200 200x200 
<img src="..." class="rounded float-left" alt="...">
<img src="..." class="rounded float-right" alt="...">
200x200 
<img src="..." class="rounded mx-auto d-block" alt="...">
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>