Skip to main content Skip ad navigationem soUicitudo
Check
in English

Imagines

Documenta et exempla pro imaginibus beneplacitis in mores dociles (ita numquam latior fiunt quam parente) ac levia genera illis addunt - omnia per classes.

Responsivum imagines

Imagines in Bootstrap fiunt responsivae cum .img-fluid. Hoc max-width: 100%;et height: auto;ad imaginem pertinet, ut cum latitudine parentis librat.

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

Image ailnthubms

Praeter ad utilitates nostrae radiophonicae , uti potes .img-thumbnailimaginem dare 1px rotundi speciem.

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

Imagines aligning

Conlineare imagines cum adiutorio float classes or text alignment classes . block-level imagines sitas esse potest utens in .mx-automargine utilitate classis .

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>

Picture

Si <picture>elementum uteris ad multa <source>elementa specifica pro specifica <img>, fac .img-*classibus addere <img>et non <picture>tag.

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

Sass

Variabilium

Variabiles praesto sunt pro image ailnthubms.

$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;