Image

Documentation and examples for images, Lazyload and resize/crop-tool are integrated.

  <div class="row">
    <div class="col-md-6 col-xl-4">
      <x-image class="img-fluid mb-3" src="https://via.placeholder.com/255" />
    </div>

    <div class="col-md-6 col-xl-4">
      <x-image class="img-thumbnail mb-3" src="https://via.placeholder.com/255" :width="[255]" />
    </div>

    <div class="col-md-6 col-xl-4">
      <x-image class="rounded-circle mb-3 shadow-lg" src="https://via.placeholder.com/255" :width="[255]" />
    </div>
  </div>

Show code

  <x-image class="rounded-circle img-thumbnail" src="https://via.placeholder.com/340" :width="[340]" />
  <x-image class="rounded img-thumbnail ms-3 mb-3 shadow-sm" src="https://via.placeholder.com/180" :width="[180]" />
  <x-image class="rounded ms-3 mb-3" src="https://via.placeholder.com/120" :width="[120]" />
  <x-image class="rounded ms-3 mb-3" src="https://via.placeholder.com/80" :width="[80]" />

Blade-Component informations

Path

components/image.blade.php

Name	Type	Default	Description
all	array		Submit all data.
class	string		Classes can be added, all other attributes can also be set.
width	array		Image resize width for desktop and mobile :width="[100, 50]".
height	array		Image resize height for desktop and mobile :height="[100, 50]".
lazyload	boolean	true	Enabled or disabled lazy laod. You can also globally turn lazyload on and off

For more information about images read the bootstrap documention Images

Components

EXAMPLES Example templates from Bootstrap Dokumention.

Themes

Image

Documentation and examples for images, Lazyload and resize/crop-tool are integrated.

Blade-Component informations

EXAMPLES
Example templates from Bootstrap Dokumention.