Images
Besides simple positioning and borders, Bootstrap doesn't provide much in the way of images. We have added some styles to the template to aid in the use of images. The basic use of an image would be to drop it in a container and set it to be full-width or native width and floated within text. These applications are basic and would cover most image usage within content. Below are some use cases beyond that where the template can aid in image usage.
Captions
The most simple captions (often the best) can be achieved by just adding text after an image within a single div. Backgrounds and padding are easily added with utility classes on the p tag. If no background, border, or otherwise boxing is used around the caption, the text should align with the image as shown in the first example. We've also provided classes to do a caption inside the image.
Isaiah Jones, USU's transition, parent and family coordinator creates a podcast.
Ensure 1rem (p-3) padding is used on backgrounds. Smaller text can use less, but 1rem is the safest option.
Verify accessibility with chosen colors. Small text typically needs very high contrast.
Card markup while not required, provides easy access to border, padding, and background styling.
bg-blue-light, p-3, border-0, which in turn adds a background color, padding, and removes the border. Padding sizes on the body and card should be adjusted for a uniform look.
The default color is white on blue, while the position must be explicitly defined as top/bottom, left/right.
The light version is the inverse of the default.
Navigational Images
Images may be used for navigation or wayfinding, however care must be taken as usability studies show issues come with using elements other than text as links. We discourage the use of images with text on top as navigation or wayfinding and recommend using another method or using them in combination with other elements.
However we've provided a class that should provide decent usability and still allow for images to be used for navigational purposes. On the text-only version, please make sure to use an image with enough contrast or adjust font sizes to work..
Aspect Ratios
We encourage the use of one of the following aspect ratios for all images: 5:2, 4:3, 2:3, and 16:9. If images are not sized to this exact dimension, you can easily achieve this without any photoshop skills. However some additional markup is required. Because this background image is now serving as an actual image, you should still supply alt text, but you need additional markup. Please see the code how to apply alt text to the image. You should not use background images for important informational images.
If you have an image that isn't one of these exact ratios, you can choose the closest one and it will clip some of the photo. By default the image will be positioned in the center of the element, but you can adjust that with inline styling if desired.
Applying Content to Images
Content placed on images can be done various ways. We've provided one way using an element with a background image. When putting content within an image using the method described above, alt text typically isn't required as the image is decorative only. If you determine your image needs alt text in this context, you'll have to use a different method.