Image Classes

Note: When working with image classes, you cannot just view your results inside the CMS editor. Be sure to look at your page in a different browser tab to see your actual results. Also, be sure to drag your browser to the smaller sizes and be sure what you've done still looks correct at every width.

Class is img-photo

Class is img-polaroid

Class is img-shadow

Class is img-circle.
Note: this class is best used on square images,
rectangular images will produce an oval.

This is an example of the  image floated to the right with the text on the left. Looking at this inside the SOURCE, you'll see this text should be BELOW the image in order to make the image line up with text. Images do not float on smaller screens, but are centered instead. This avoids having only one word or possibly a few letters next to the image.

By default img-float-right and img-float-left include the img-photo class to give them a slight border.

Now I want to break that float and start a new paragraph that isn't floated by the picture. This is done by adding class="clear" to the p tag.

This is an example of the same image floated to the left with the text on the right. Looking at this inside the SOURCE, you'll see this text has to be BELOW the image in order to make this work.

You can also float an image and add extra/different styling by adding multiple classes:

This image is using img-float-right img-shadow. You can add classes to an image using the editor, double click on image, then switch to the advanced tab. When using this feature it is not necessary to add class="", just the actual class name, each separated by a space. When adding to SOURCE you do need to type in class="name name name".