Hoppa till huvudinnehållet Hoppa till dokumentnavigering
Check
in English

Bilder

Dokumentation och exempel för att välja bilder till responsivt beteende (så att de aldrig blir bredare än sin förälder) och lägga till lätta stilar till dem – allt via klasser.

På den här sidan

Responsiva bilder

Bilder i Bootstrap görs responsiva med .img-fluid. Detta gäller max-width: 100%;och height: auto;för bilden så att den skalas med föräldrabredden.

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

Bildminiatyrer

Förutom våra border-radius-verktyg kan du använda .img-thumbnailför att ge en bild ett avrundat 1px-utseende.

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

Justera bilder

Justera bilder med hjälparflot-klasserna eller textjusteringsklasserna . block-nivåbilder kan centreras med hjälp av .mx-automarginalverktygsklassen .

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

Bild

Om du använder <picture>elementet för att specificera flera <source>element för en specifik <img>, se till att lägga till .img-*klasserna till <img>och inte till <picture>taggen.

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

Sass

Variabler

Variabler är tillgängliga för bildminiatyrer.

$thumbnail-padding:                 .25rem;
$thumbnail-bg:                      $body-bg;
$thumbnail-border-width:            $border-width;
$thumbnail-border-color:            var(--#{$prefix}border-color);
$thumbnail-border-radius:           $border-radius;
$thumbnail-box-shadow:              $box-shadow-sm;