Lesson 4 - Bootstrap - Images

In the previous lesson, Bootstrap - Typography, we started to mention Bootstrap classes for styling different typographic HTML elements. In today's CSS Bootstrap tutorial, we're going to work with images and talk about everything related to them.

Responsive images

Let's start with making images responsive. Bootstrap provides the .img-fluid class which assures the image never overflows outside the parent element. That means it won't ever exceed the screen size on mobile devices and it'll shrink in a way so that it'll always fit into. The class internally sets max-width: 100% and height: auto.

If you wanted to support SVG in IE10, you could add width: 100% \9 to those images. Be sure to add it only to the ones of the SVG type, you'd break the others otherwise.

Picture

We sometimes need to provide multiple sources for an image, so the browser could choose the most appropriate one for the device's resolution. Typically, unnecessary background is usually cropped out from the image on mobile devices so that the main part of the image can be seen. On the contrary, on desktops, the background is left as it is so that the main part of the image is not too big. If you used the <picture> element to achieve this behavior, it's necessary to assign all responsive classes to the <img> element, not to the <picture> element.

​<picture>
    <source srcset="logo.svg" type="image/svg+xml" />
    <img src="logo.png" class="img-fluid img-thumbnail" alt="ICT.social logo" />
</picture>

Utility

Similarly as for text, Bootstrap also provides utility classes for images.

Disabling the border

There's no need to write styles for disabling some part of the border anymore. Now you can choose from the following predefined classes:

• border - Enables the image border. We have to assign it every time we want to display the border.
• border-0 - Disables the image border.
• border-top-0 - Disables the top border.
• border-right-0 - Disables the right border.
• border-bottom-0 - Disables the bottom border.
• border-left-0 - Disables the left border.

The border color

Bootstrap defines several colors which are used in different situations. The colors are not named after their looks, that would be a semantic mistake in CSS. The CSS styles should be named after their usage, not appearance. We have these colors:

• primary - The primary color, blue by default
• secondary - The Secondary color, gray by default
• success - Green for success messages, discounts, confirmation buttons, ...
• danger - Red for errors, etc.
• warning - Yellow for highlighting important messages, tips, ...
• info - Neutral blue for neutral highlighting
• light - Light gray
• dark - Almost black
• white - Pure white

These colors are going to be with us during the whole course. Specifically for borders, Bootstrap provides the following classes for us:

• .border-primary
• .border-secondary
• .border-success
• .border-danger
• .border-warning
• .border-info
• .border-light
• .border-dark
• .border-white

We can, of course, combine the classes and set e.g. a green border without the top part.

Border radius

We have classes prepared even for rounded borders. The radius is internally set to the value of .25rem. We can use the classes:

• .rounded - All the four corners are rounded.
• .rounded-top - The right top and the left top corners are rounded.
• .rounded-right - The right top and the right bottom corners are rounded.
• .rounded-bottom - The left bottom and the right bottom corners are rounded.
• .rounded-left - The left top and the left bottom corners are rounded.
• .rounded-circle - The corners are rounded to maximum, creating a circle around the image. The value of border-radius is 50%.
• .rounded-0 - The corners are rectangular.

Image thumbnails

For thumbnails, we can use the style setting the border and padding represented by the .img-thumbnail class. It looks like this:

Image alignment

We're getting to the utility classes for image alignment. Each class is implemented using !important again, therefore it overrides every other defined behavior.

Float utilities

The easiest way to align images is to use the float property. Bootstrap provides the following classes for us:

• .float-left - Aligns to the left. The image is wrapped by other contents on the left side.
• .float-right - Aligns to the right. The image is wrapped by other contents on the right side.
• .float-none - Interrupts the floating content.

Before Bootstrap 4, the float classes were named .pull-left and .pull-right, you can still encounter those in some older templates.

When using float, don't forget to interrupt it once you close the element, using the popular clearfix hack. In Bootstrap, it's available as the .clearfix class. We assign this class to elements with floating contents.

Responsive classes

Floating content can be also defined according to the viewport. A list of available classes follows.

• .float-sm-left - Contents float on the left on devices with the small viewports and larger
• .float-sm-right - Contents float on the right on devices with the small viewports and larger
• .float-sm-none - Disables the floating content on devices with the small viewports and larger
• .float-md-left - Contents float on the left on devices with the medium viewports and larger
• .float-md-right - Contents float on the right on devices with the medium viewports and larger
• .float-md-none - Disables the floating content on devices with the medium viewports and larger
• .float-lg-left - Contents float on the left on devices with the large viewports and larger
• .float-lg-right - Contents float on the right on devices with the large viewports and larger
• .float-lg-none - Disables the floating content on devices with the large viewports and larger
• .float-xl-left - Contents float on the left on devices with the extra large viewports and larger
• .float-xl-right - Contents float on the right on devices with the extra large viewports and larger
• .float-xl-none - Disables the floating content on devices with the extra large viewports and larger

We have already mentioned the definitions of different devices in Bootstrap in the lesson Bootstrap - Typography.

Alignment utilities

Images, as well as all inline elements, can be positioned not only by setting the float property to the image itself, but also by setting the text-align property to the container in which the image is placed. This can be more appropriate in situations where we don't need to wrap contents and we can avoid using float which can cause unpleasant side-effects if clearfix is forgotten. We have already discussed the .text-left, .text-right, and .text-center class in the Bootstrap - Typography lesson. Let's have a look at their usage on images:

Margin utilities

Speaking of centering, block elements can also be centered using the .mx-auto class, which, as you've probably already assumed, sets margin: 0 auto internally. We assign this class straight to the block element we want to center horizontally. The element has to have the size specified, which is the disadvantage of this solution.

Figure

If we need to show an image with description, we usually use the <figure> element in which the <img> and <figcaption> elements are placed. For that, Bootstrap provides the .figure, .figure-img, and .figure-caption classes to make it nicer. We usually assign the already discussed .img-fluid class as well, so the image won't overflow on mobile devices.

In the next lesson, Bootstrap - Tables, we'll have a look on how to style tables in Bootstrap.