تصاویر و ارقام

تصویر واکنش‌گرا

برای دریافت تصویر واکنش‌گرا از کلاس .img-fluid در تگ img استفاده کنید.

... 
<div class="text-center">
    <img src="https://codeigniter.spruko.com/meno/meno/assets/images/media/media-48.jpg" class="img-fluid" alt="...">
</div>
تصویر با گوشه‌های گرد

برای گرفتن گوشه‌های گرد از کلاس .rounded همراه با .img-fluid استفاده کنید.

... 
<div class="text-center">
    <img src="https://codeigniter.spruko.com/meno/meno/assets/images/media/media-49.jpg" class="img-fluid rounded" alt="...">
</div>
تصویر گرد

از کلاس .rounded-pill برای تگ img استفاده کنید تا تصویر گرد شود.

... 
<div class="text-center">
    <img src="https://codeigniter.spruko.com/meno/meno/assets/images/media/media-50.jpg" class="img-fluid rounded-pill" alt="...">
</div>
تصویر با چینش راست

از کلاس .float-start برای تگ img استفاده کنید تا تصویر به سمت چپ قرار گیرد.

... 
<img class="rounded float-start" src="https://codeigniter.spruko.com/meno/meno/assets/images/media/media-53.jpg" alt="...">
تراز تصویر در مرکز
... 
<img class="rounded mx-auto d-block" src="https://codeigniter.spruko.com/meno/meno/assets/images/media/media-55.jpg" alt="...">
تراز تصویر در چپ
... 
<img class="rounded float-end" src="https://codeigniter.spruko.com/meno/meno/assets/images/media/media-54.jpg" alt="...">
تصویر بند انگشتی گرد

برای گرفتن حاشیه از کلاس .rounded-pill همراه با .img-thumbnail استفاده کنید.

... 
<div class="text-center">
    <img src="https://codeigniter.spruko.com/meno/meno/assets/images/media/media-52.jpg" class="img-thumbnail rounded-pill" alt="...">
</div>
تصویر بند انگشتی

برای دادن حاشیه 1px گرد به تصویر از .img-thumbnail استفاده کنید.

... 
<div class="text-center">
    <img src="https://codeigniter.spruko.com/meno/meno/assets/images/media/media-51.jpg" class="img-thumbnail" alt="...">
</div>
تصاویر
...
عنوان تصویر بالا.
...
عنوان تصویر بالا.
<figure class="figure">
        <img class="bd-placeholder-img figure-img img-fluid rounded card-img" src="https://codeigniter.spruko.com/meno/meno/assets/images/media/media-56.jpg" alt="...">
        <figcaption class="figure-caption">عنوان تصویر بالا.
        </figcaption>
    </figure>
    <figure class="figure float-end">
        <img class="bd-placeholder-img figure-img img-fluid rounded card-img" src="https://codeigniter.spruko.com/meno/meno/assets/images/media/media-57.jpg" alt="...">
        <figcaption class="figure-caption text-end">عنوان تصویر بالا.
        </figcaption>
    </figure>