Arranging media objects
Media objects are an elementary example of flexible layouts. A media object is a media element (primarily images, though) with some content next to it that doesn’t flow around it. Therefore, we don’t deal with images aligned with float but with a two-column layout, of which one row determines the size of the other.
Usually, the media is rendered in its desired size, and the text takes the rest of the available space. Let’s look at the example from the Bootstrap documentation to understand what this exactly means:
Figure 5.1 – A media object as described by the documentation of Bootstrap
We can see the image on the left side being the exact desired size of 64 by 64 px and the text on the right not wrapping around it.
There are several spin-offs to the media object. For example, depending on the use case, the media could be positioned at the right end of the container, it could be nested (and therefore...
