Images

Twitter bootstrap Documentation

Responsive images

Twitter bootstrap Documentation

Result

Source

<?php

echo $this->image('/twbs-helper-module/img/docs/responsive.svg', ['fluid' => true, 'alt' => '...',]);

Image thumbnails

Twitter bootstrap Documentation

Result

Source

<?php

echo $this->image('/twbs-helper-module/img/docs/200x200.svg', ['thumbnail' => true, 'alt' => '...',]);

Aligning images

Twitter bootstrap Documentation

Float

Result

Source

<?php

echo $this->image(
    '/twbs-helper-module/img/docs/200x200.svg',
    ['rounded' => true, 'alt' => '...', 'class' => 'float-start']
);

echo PHP_EOL;

echo $this->image(
    '/twbs-helper-module/img/docs/200x200.svg',
    ['rounded' => true, 'alt' => '...', 'class' => 'float-end']
);

Mx Auto

Result

Source

<?php

echo $this->image(
    '/twbs-helper-module/img/docs/200x200.svg',
    ['rounded' => true, 'alt' => '...', 'class' => 'mx-auto d-block']
);

Centered

Result

Source

<?php

echo $this->image(
    '/twbs-helper-module/img/docs/200x200.svg',
    ['rounded' => true, 'centered' => true, 'alt' => '...']
);

Picture

Twitter bootstrap Documentation

Result

Source

<?php

echo $this->image('/twbs-helper-module/img/docs/200x200.svg', [
    'thumbnail' => true,
    'fluid' => true,
    'alt' => '...',
    'sources' => ['/twbs-helper-module/img/docs/200x200.svg' => 'image/svg+xml'],
]);