Responsive image

To make images resize responsively to page width, you can add the class img-responsive to your image tag.

Image Shapes

Shape an image by adding one of the following classes:

  • img-rounded
  • img-circle
  • img-thumbnail

Rounded

Circular

Thumbnail

Floating Images

Add one of the shadow classes to create floating images.

Image Zoom

Enlarge a image when a user clicks it by adding the attribute data-action="zoom" to the image element. To dismiss the image, the user can either click on the image again, scroll away, or press the ESC key.

Video

Responsive embed

Allow browsers to determine video or slideshow dimensions based on the width of their containing block by creating an intrinsic ratio that will properly scale on any device.
Rules are directly applied to <iframe>, <embed>, <video>, and <object> elements; optionally use an explicit descendant class .embed-responsive-item when you want to match the styling for other attributes.

<!-- 16:9 aspect ratio -->
	<div class="embed-responsive embed-responsive-16by9">
	  <iframe class="embed-responsive-item" src="..."></iframe>
	</div>

	<!-- 4:3 aspect ratio -->
	<div class="embed-responsive embed-responsive-4by3">
	  <iframe class="embed-responsive-item" src="..."></iframe>
	</div>
	

© 2016 YourApp