Images

Shapes

Use to easily modify the shape of an <img> (image) without the use of editing software.

Default:

Rounded:

Circle:

Thumbnail (hyperlinked):

Source code

Default:

<img src="https://placehold.it/250x250" alt="" />

Rounded:

<img src="https://placehold.it/250x250" class="img-rounded" alt="" />

Circle:

<img src="https://placehold.it/250x250" class="img-circle" alt="" />

Thumbnail (hyperlinked):

<a href="#"><img src="https://placehold.it/250x250" class="img-thumbnail" alt="" /></a>

Responsive images

Use to make larger images scale properly, and never exceed the width of the parent container. With responsive images, max-width: 100%; and height: auto; are auto-applied with the use of .img-responsive.

Image is too large for the available space:

Same image is now responsive, and fits the parent container:

Source code

<img src="https://placehold.it/400x100" class="img-responsive" alt="Generic placeholder image">

Stretching images

Use to stretch a smaller image to the width of the container. Ensure the image is still clear and easy to see in the larger resolutions.

Image (100x25) is too small and blurry:

Image (200x50) is still too small for the space:

Stretched image (100x25) is blurry:

Stretched, clear image (200x50) fits space:

Source code

<img src="https://placehold.it/200x50" class="full-width" alt="A generic square placeholder image">

Thumbnail tiles

Use to add any kind of content like headings, paragraphs, or buttons into a thumbnail, to create a thumbnail tile effect.

Title (caption)

Content

• Link
• Link

Source code

<section class="thumbnail"><a href="#"><img src="https://placehold.it/350x200" alt="Generic placeholder thumbnail"></a>
	<div class="caption">
		<h3>Title (caption) </h3>
		<p>Content</p>
		<ul class="list-inline">
			<li><a href="#" >Link</a></li>
			<li><a href="#" >Link</a></li>
		</ul>
	</div>
</section>

Media objects

Use to layer text and images for media content like blog comments, tweets, and so forth.

Default:

Media heading

Content, image pulls left

Media heading

Content, image pulls right

As lists:

• 

  Heading

  Content, image pulls left

• 

  Heading

  Content, image pulls left

• 

  Heading

  Content, image pulls right

• 

  Heading

  Content, image pulls right

Source code

<div class=row">
	<div class="col-md-4">
		<div class="panel panel-default">
			<div class="panel-body">
				<h3>Default:</h3>
				<section class="media"> <a class="pull-left" href="#">
					<img class="media-object" src="https://placehold.it/64x64" alt="Generic placeholder image"> </a>
					<div class="media-body">
						<h4 class="media-heading">Media heading</h4>
						<p>Content, image pulls left </p>
					</div>
				</section>
				<section class="media mrgn-tp-xl"> <a class="pull-right" href="#">
					<img class="media-object" src="https://placehold.it/64x64" alt="Generic placeholder image"> </a>
					<div class="media-body">
						<h4 class="media-heading">Media heading</h4>
						<p>Content, image pulls right </p>
					</div>
				</section>
				<h3 class="mrgn-tp-xl">As lists:</h3>
				<ul class="media-list">
					<li class="media"> <a class="pull-left" href="#">
						<img class="media-object" src="https://placehold.it/64x64" alt="Generic placeholder image"> </a>
						<div class="media-body">
							<h4 class="media-heading">Heading</h4>
							<p>Content, image pulls left </p>
						</div>
					</li>
					<li class="media">
						<a class="pull-left" href="#"> <img class="media-object" src="https://placehold.it/64x64" alt="Generic placeholder image"> </a>
						<div class="media-body">
							<h4 class="media-heading">Heading</h4>
							<p>Content, image pulls left </p>
						</div>
					</li>
				</ul>
				<ul class="media-list   mrgn-tp-xl">
					<li class="media"> <a class="pull-right" href="#">
						<img class="media-object" src="https://placehold.it/64x64" alt="Generic placeholder image"> </a>
						<div class="media-body">
							<h4 class="media-heading">Heading</h4>
							<p>Content, image pulls right </p>
						</div>
					</li>
					<li class="media"> <a class="pull-right" href="#">
						<img class="media-object" src="https://placehold.it/64x64" alt="Generic placeholder image"> </a>
						<div class="media-body">
							<h4 class="media-heading">Heading</h4>
							<p>Content, image pulls right </p>
						</div>
					</li>
				</ul>
			</div>
		</div>
	</div>
</div>