Holla Tech - Learn
Bootstrap 3: Images
 

Images can be styled in Bootstrap 3 using the following classes:
img-rounded Adds rounded corners to the image.
img-circle Crops the image into a circular shape.
img-thumbnail Creates a thumbnail.

The following example displays an image with rounded corners, in a circular shape, and as a thumbnail: 

<div class=“container”>
  <img src=“http://images.freeimages.com/images/large-previews/b3d/flowers-1375316.jpg” width=“200” height=“200” class=img-rounded/><br><br>
  <img src=“http://images.freeimages.com/images/large-previews/b3d/flowers-1375316.jpg” width=“200” height=“200” class=img-circle/><br><br>
  <img src=“http://images.freeimages.com/images/large-previews/b3d/flowers-1375316.jpg” width=“200” height=“200” class=img-thumbnail/>
</div>

 

To create a responsive image that resizes to fit the screen, add class img-responsive to the img tag.

TASK:
Test the codes in a text editor and play around with the outputs.

BACK NEXT

CLICK ON THE BUTTON BELOW TO RETURN TO THE BOOTSTRAP 3 MAIN COURSE PAGE. 

BOOTSTRAP 3 MAIN COURSE PAGE

 


© License: All Rights Reserved 


CONTACT HOLLA TECH – LEARN SUPPORT