Main content ah kal rawh Docs navigation ah kal rawh
Check
in English

Hmanlai thil hlui te

Documentation leh entirnan images chu responsive behavior-a thlan dan tur (chuvangin an nu leh pa aia zau zawk an nih ngai loh nan) leh an chungah style lightweight te dah belh tur—class kaltlangin zawng zawng.

Responsive thlalak te

Bootstrap a images te chu responsive taka siam a ni a .img-fluid. Hei hian a hman max-width: 100%;a height: auto;, image chu parent width nen a scale theih nan a hmang a ni.

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

Hmanlai thil hlui te

Kan border-radius utilities.img-thumbnail bakah hian image pakhat chu rounded 1px border appearance pe turin i hmang thei bawk.

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

Hmanlai thlalakte alignment

Image te chu helper float class emaw text alignment class emaw nen align rawh . block-level images chu .mx-automargin utility class hmangin centered theih a ni .

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

Milem

Element chu specific -a element <picture>tam tak tarlanna atana i hman a nih chuan , class-te chu tag-ah dah la, tag -ah dah lovin dah ngei ngei tur a ni.<source><img>.img-*<img><picture>

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

Sass a ni

Variables te pawh a awm

Image thumbnail atan pawh variable a awm bawk.

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