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.
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
max-width: 100% and
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.
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> <source srcset="logo.svg" type="image/svg+xml" /> <img src="logo.png" class="img-fluid img-thumbnail" alt="ICT.social logo" /> </picture>
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:
We can, of course, combine the classes and set e.g. a green border without the top part.
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
.rounded-0- The corners are rectangular.
For thumbnails, we can use the style setting the
padding represented by the
.img-thumbnail class. It
looks like this:
We're getting to the utility classes for image alignment. Each class is
!important again, therefore it overrides every
other defined behavior.
The easiest way to align images is to use the
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-right, you can still encounter
those in some older templates.
float, don't forget to interrupt it once you close
the element, using the popular clearfix hack. In Bootstrap, it's available as
.clearfix class. We assign this class to elements with floating
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.
Images, as well as all inline elements, can be positioned not only by setting
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
class in the Bootstrap -
Typography lesson. Let's have a look at their usage on images:
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.
If we need to show an image with description, we usually use the
<figure> element in which the
<figcaption> elements are placed. For that, Bootstrap
.figure-caption classes to make it nicer. We usually assign the
.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.