Bootstrap Image Styles

Bootstrap provides easy classes to style images — make them responsive, rounded, circular, or framed.

Responsive Images

<img src="photo.jpg" class="img-responsive" alt="Responsive image">

The img-responsive class makes the image scale to fit its container. It applies max-width: 100% and height: auto.

Image Shapes

<!-- Rounded corners -->
<img src="photo.jpg" class="img-rounded" alt="Rounded">

<!-- Circle (works best with square images) -->
<img src="avatar.jpg" class="img-circle" alt="Circle">

<!-- Thumbnail border -->
<img src="photo.jpg" class="img-thumbnail" alt="Thumbnail">

Centering Images

<img src="photo.jpg" class="img-responsive center-block" alt="Centred">

Thumbnail Gallery

<div class="row">
    <div class="col-md-3">
        <div class="thumbnail">
            <img src="img1.jpg" alt="Image 1">
            <div class="caption">
                <h3>Title</h3>
                <p>Description here.</p>
                <a href="#" class="btn btn-primary">View</a>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="thumbnail">
            <img src="img2.jpg" alt="Image 2">
            <div class="caption">
                <h3>Title</h3>
                <p>Description here.</p>
                <a href="#" class="btn btn-primary">View</a>
            </div>
        </div>
    </div>
</div>

Media Object

<div class="media">
    <div class="media-left">
        <img src="avatar.jpg" class="media-object" alt="Avatar">
    </div>
    <div class="media-body">
        <h4 class="media-heading">User Name</h4>
        <p>Comment text goes here...</p>
    </div>
</div>