WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

Bootstrap Images


Bootstrap Image Shapes

Rounded Corners:

/green-rice-field

Circle:

colors-dawn-daylight

Thumbnail:

worm-s-eye-v

Rounded Corners

The .img-rounded class adds rounded corners to an image but IE8 not support:

Example

<img src="welookups-photo-208643" class="img-rounded" alt="Florida house" width="304" height="236">

Circle

The .img-circle class shapes the image to a circle IE8 not support:

Example

<img src="welookups-photo-105950.jpeg" class="img-circle" alt="sea spring france" width="304" height="236">
Try it Yourself »

Thumbnail

The .img-thumbnail class shapes the image to a thumbnail:

Example

<img src="welookups-photo-105950.jpeg" class="img-thumbnail" alt="sea spring france" width="304" height="236">
Try it Yourself »

Responsive Images

makeresponsive images by adding an .img-responsive class to the <img> tag. The image work parent element.

The .img-responsive class applies display: block; and max-width: 100%; and height: auto; to the image:

Example

<img class="img-responsive" src="welookups-photo-939467.jpeg" alt="sea of france">
Try it Yourself »

Image Gallery

we can use Bootstrap grid system in conjunction with the .thumbnail class for making gallery:

Example

 <div class="row">
  <div class="col-md-4">
    <a href="welookups-photo-208643" class="thumbnail">
      <p>Florida house: It is famous tourist attraction in Florida USA.</p>
      <img src="welookups-photo-208643.jpeg" alt="welookups-photo-208643.jpeg" style="width:150px;height:150px">
    </a>
  </div>
  <div class="col-md-4">
    <a href="welookups-photo-105950.jpeg" class="thumbnail">
      <p>sea spring france: It is a one of the "most beautiful sea of France".</p>
      <img src="welookups-photo-105950.jpeg" alt="sea spring france" style="width:150px;height:150px">
    </a>
  </div>
  <div class="col-md-4">
    <a href="welookups-photo-939467.jpeg" class="thumbnail">
      <p>USA Miami beach : Beautiful sea of Miami beach .</p>
      <img src="welookups-photo-939467.jpg" alt=" Miami beach" style="width:150px;height:150px">
    </a>
  </div>
</div>
Try it Yourself »

Responsive Embeds

Now we can add slideshows scale .

this can be work on <iframe>, <embed>, <video>, and <object> elements.

below example define a responsive video by adding an .embed-responsive-item class to an <iframe> tag . The containing <div> defines the aspect ratio of the video:

Example

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>
Try it Yourself »

You can choose between two aspect ratio classes:

<!-- 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>