Sections

Images and alignment

The image styles described on this page can be used on any image in your Zendesk theme, whether they are inside the content area of an article or post or not.

Usage

Use .img-fluid to ensure that images scale with the parent element.

Full-width image
<img class="img-fluid w-full" src="..." alt="...">

Images within .content sections automatically inherit this style, ensuring that they scale to fit the content area.

Alignment

Use float or text align utilities to align images.

200x200 200x200
<div class="clearfix">
  <img class="img-fluid float-left" src="..." alt="...">
  <img class="img-fluid float-right" src="..." alt="...">
</div>

If you float an image to the left or right within the content of an article, the rest of the content will flow around it. Use responsive variants of the float utilities if you want to have the images only float to one side on certain screen sizes.

Block-level images can be aligned using margin utilities.

200x200
<img class="img-fluid block mx-auto" src="..." alt="...">

If .ml-auto were used in the example above, the image would float to the right-hand side.