Vanilla

No class for comparison:

A boy and his snake

Rounded Corners

The .rounded class adds rounded corners to an image:

A boy and his snake

Vanilla

No class for comparison:

A boy and his snake

Rounded Corners

The .rounded class adds rounded corners to an image, but this doesn't work with this image:

A boy and his snake

Circular

A circular image:

A boy and his snake

Thumbnail

A thumbnail image:

A boy and his snake

Aligning images

Use the float classes to float the image to the left or to the right:

Snake Stupid Motorcycle Tricks

And where does this text appear? And where does this text appear? And where does this text appear? And where does this text appear? And where does this text appear? And where does this text appear? And where does this text appear? And where does this text appear? And where does this text appear? And where does this text appear? And where does this text appear? And where does this text appear? And where does this text appear? And where does this text appear? And where does this text appear? And where does this text appear? And where does this text appear? And where does this text appear? And where does this text appear? And where does this text appear? And where does this text appear? And where does this text appear? And where does this text appear? And where does this text appear? And where does this text appear? And where does this text appear? And where does this text appear? And where does this text appear? And where does this text appear? And where does this text appear? And where does this text appear? And where does this text appear? And where does this text appear?

Responsive Image

The .img-fluid class makes the image scale nicely to the parent element (resize the browser window to see the effect):

Snake Snake