In our markup I used images, so pay attention to the img-fluid
class which opts the image into responsive behavior:
<img class="img-fluid center-block product-item" src="http://placehold.it/270x171" alt="">
The logic behind the class will never allow the image to become larger than the parent element. At the same time, it adds lightweight styles management via classes. You can easily design the shape of the picture as follow:
- Rounded it with
img-rounded
class. The border radius is 0.3rem - Circle it with the help of
img-circle
, so the border radius became to 50% - Transform it with
img-thumbnail
In our example, the center-block
centered the image, but you can align it with helper float or text alignment classes:
- The class
pull-sm-left
floats left on small or wider devices - The class
pull-lg-right
floats right on large and bigger devices - The class
pull-xs-none
prevents floating on all viewport sizes