Bootstrap has the ability to make images responsive, as well as the ability to quickly create round corners or turn square images in to circular images with a simple class.
Starting code for this tutorial?
I’ve simply added a container, a row, and a column inside of the basic template we created in tutorial 3.
<div class="container">
<div class="row">
<div class="col-md-4 col-xs-6">
<!-- your resposnsive image here -->
</div>
</div>
</div>
Making a responsive images
Simply add the class
.img-responsive to your image and bootstrap will apply styling to make this image responsive. Responsive images scale to the width of their parent, you can test this out at different resolutions to see how it behaves.
<img src="your_file_path/your_image_name.jpg" class="img-responsive" />
Creating awesome image styles
Bootstrap has additional image classes available to quickly round corners, create circular images from square images or create an interesting thumbnail.
Rounded corners
<img src="your_file_path/your_image_name.jpg" class="img-responsive img-rounded" />
Circle images
<img src="your_file_path/your_image_name.jpg" class="img-responsive img-circle" />
Thumbnail images
<img src="your_file_path/your_image_name.jpg" class="img-responsive img-thumbnail" />
0 comments