Gara qabiyyee ijootti darbi Gara docs navigationitti darbi
Check
in English

Fakkiiwwan

Galmee fi fakkeenyota fakkiiwwan gara amala deebii kennuutti filachuuf (kanaaf isaan gonkumaa warra isaanii caalaa bal'aa hin ta'an) fi akkaataa salphaa itti dabaluu-hundi karaa gitaa.

Fakkiiwwan deebii kennan

Fakkiiwwan Bootstrap keessa jiran .img-fluid. Kun hojii irra oolcha max-width: 100%;fi height: auto;fakkii irratti akka inni bal'ina warraa wajjin iskeelii godhutti.

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

Fakkiiwwan xiqqaa

Faayidaa keenya border-radius.img-thumbnail dabalatee , fakkii tokkoof bifa daangaa geengoo 1px kennuudhaaf fayyadamuu dandeessa .

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

Fakkiiwwan qindeessuu

Fakkiiwwan gita yaa'aa gargaaraa ykn gita qindeessaa barruu waliin qindeessii . fakkiiwwan sadarkaa -gita faayidaa marginblock fayyadamuun giddugaleessa gochuun ni danda'ama ..mx-auto

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>

Suuraa

Yoo qaama fayyadamtee qaamolee <picture>hedduu murtaa'eef ifteessuuf jirta ta'e, gitaalee gara mallattootti dabaluu fi osoo hin taane gara mallattootti dabaluu mirkaneessi .<source><img>.img-*<img><picture>

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

Sass jedhama

Jijjiiramoota

Jijjiiramoonni fakkiiwwan xiqqaadhaaf ni argamu.

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