Image

Alt attribute Image floats Caption Lightbox

Alt attribute

Informative images

Informative images are images that are designed to communicate information to the user. They should have an alt attribute that describe the image as concisely as possible.

Decrative images

Decrative images are images that are not meant to convey any meaning or important information. They should have an empty alt attribute. alt=""

For more information, please see Accessible Images.

Image floats

Float left

Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Code

The float-left class takes care of alignment; col-sm-2 controls the size of the image and provides margin between the image and whatever's to the right of it.

<div class="col-sm-3 float-left pl-lg-0 mb-3">
        <img alt="#" src="img.jpg" />
</div>
<p>Wrap around text goes here.</p>

Float right

Code

The same image floated right using class="float-right" and in a larger size using the col-sm-6 class.

<div class="col-sm-6 float-right pr-lg-0 mb-3">
        <img alt="#" src="img.jpg" />
</div>
<p>Wrap around text goes here.</p>

Image caption

This is an image caption.

Code

Turn a p tag into a caption with class="caption". This class changes the font size, line spacing, and indents the text a little bit to distinguish from surrounding body text.

<div class="col-sm-6 float-right pr-lg-0 mb-3">
        <img alt="#" src="img.jpg" />
        <p class="caption">Caption goes here</p>
</div>
<p>Wrap around text goes here.</p>

Using the lightbox class, an image can display a larger version when clicked on.

For best image quality, when using the 3-card layout, the small version should be no larger than 400px wide. It should also be saved in .jpeg format.

Engineering Dean’s Scholars

A one-year program aimed at providing students with a strong first-year foundation in the College of Engineering and the UW. For students who select an engineering major (not including computer engineering) as their first choice on their UW freshman application.

Learn more

Allen School Startup

A one-year program aimed at providing students with a strong first-year foundation in the Allen School and the UW. For students who select computer science or computer engineering as their first choice major on their UW freshman application.

Learn more

STARS

An intensive, two-year program designed to holistically support students to strengthen academic preparation and develop professional skills. For students who select engineering or computer science as their first choice major on their UW freshman application.

Learn more

Code

<a class="lightbox" data-featherlight="lage-version.jpg" href="#">
        <img alt="#" src="small-version.jpg">
</a>