Bootstrap Images

Rounded Corners

Rounded corner created a border radius of 6px in image.

Code Structure:
<div class="container">
    <h1>Rounded Corners</h1>
    <img class="img-rounded" src="http://www.codetuts.info/wp-content/uploads/2015/12/bootstrap-images.jpg" alt="image description" width="340" height="160">
</div>

Circle Image

.img-circle class makes the image circle.

Code Structure:
<div class="container">
    <h1>Circle</h1>
    <img class="img-circle" src="http://www.codetuts.info/wp-content/uploads/2015/12/bootstrap-images.jpg" alt="image description" width="140" height="140">
</div>

Thumbnail Image

.img-thumbnail class makes the image thumbnail.

Code Structure:
<div class="container">
    <h1>Thumbnail</h1>
    <img class="img-thumbnail" src="http://www.codetuts.info/wp-content/uploads/2015/12/bootstrap-images.jpg" alt="image description" width="340" height="160">
</div>

Responsive Image

.img-responsive class makes the image responsive.

Code Structure:
<div class="container">
    <h1>Responsive Image</h1>
    <img class="img-responsive" src="http://www.codetuts.info/wp-content/uploads/2015/12/bootstrap-images.jpg" alt="image description" width="340" height="160">
</div>

Share this

Related Posts