Bootstrap Image Tutorials

responsive image in bootstrap
responsive image in bootstrap
responsive image in bootstrap

Bootstrap Provides Multiple Image Classes to make image beautiful, rounded corner, circle, responsive image. We can make our image suitable for every device by using Image Responsive Class Of Bootstrap.

The different classes available in Bootstrap for images are as explained below:

Bootstrap Responsive Image used by Class .img-responsive

<div class="container">
    <div class="row">
       <div class="col-md-4"><img src="osmo_pocket-3.jpg" class="img-responsive bs" /></div>
       <div class="col-md-4"><img src="osmo-pocket.jpg" class="img-responsive bs" /></div>
       <div class="col-md-4"><img src="pitta_drone.jpg" class="img-responsive bs" /></div>
    </div>
  </div>

Bootstrap Rounded Corners Image

If We have to create Rounded Corner image then we use class .img-rounded .

<div class="container">
    <div class="row">
       <div class="col-md-4"><img src="osmo_pocket-3.jpg" class="img-rounded img-responsive bs" /></div>
       <div class="col-md-4"><img src="osmo-pocket.jpg" class="img-rounded img-responsive bs" /></div>
       <div class="col-md-4"><img src="pitta_drone.jpg" class="img-rounded img-responsive bs" /></div>
    </div>
  </div>

Bootstrap Circle Image

If We have to create Rounded Corner image then we use class . img-circle

<div class="container">
    <div class="row">
       <div class="col-md-4"><img src="osmo_pocket-3.jpg" class="img-circle  img-responsive bs" /></div>
       <div class="col-md-4"><img src="osmo-pocket.jpg" class="img-circle  img-responsive bs" /></div>
       <div class="col-md-4"><img src="pitta_drone.jpg" class="img-circle  img-responsive bs" /></div>
    </div>
  </div>

Leave a Reply

Your email address will not be published. Required fields are marked *