Images

Prev Next

Bootstrap 3 ships four small classes for <img> tags: one that makes an image scale fluidly with its parent, and three that change the image's shape. None of them need JavaScript — they're pure CSS, and every one of them can be combined with the others on the same image.

1. Responsive Images: .img-responsive

Add .img-responsive to make an image scale down to fit its parent container instead of overflowing it. It sets display: block, max-width: 100% and height: auto on the image.

<img src="ridgeline-loop.jpg" class="img-responsive" alt="Ridgeline Loop trailhead">

Naming note: this exact class was renamed .img-fluid in Bootstrap 4, with the same effect — if you're reading a Bootstrap 4/5 example and see .img-fluid, it's this class under a new name.

2. Rounded Corners: .img-rounded

Add .img-rounded for a modest border-radius on all four corners — a subtle softening rather than a full shape change.

<img src="cedar-falls.jpg" class="img-responsive img-rounded" alt="Cedar Falls Trail">

3. Circular Images: .img-circle

Add .img-circle to render the image as a perfect circle via border-radius: 50%. Works best on a square source image — a non-square photo will be cropped into an ellipse-in-a-square-frame look unless you also constrain its width and height.

<img src="hiker-avatar.jpg" class="img-circle" alt="Reviewer avatar" style="width:64px;height:64px">

4. Thumbnail Border: .img-thumbnail

Add .img-thumbnail for a 1px gray border, a small amount of padding, and rounded corners — a lightweight frame that suits a grid of preview photos.

<img src="summit-pass.jpg" class="img-responsive img-thumbnail" alt="Summit Pass view">

5. Worked Example: TrailMap Trail Photo Gallery

A grid of trail photos on a trail detail page: each thumbnail is responsive so it scales inside its grid column, and framed with .img-thumbnail so the gallery reads as one visually consistent set.

<div class="row">
  <div class="col-sm-4">
    <img src="ridgeline-1.jpg" class="img-responsive img-thumbnail" alt="Ridgeline Loop, view from the summit">
  </div>
  <div class="col-sm-4">
    <img src="ridgeline-2.jpg" class="img-responsive img-thumbnail" alt="Ridgeline Loop, creek crossing">
  </div>
  <div class="col-sm-4">
    <img src="ridgeline-3.jpg" class="img-responsive img-thumbnail" alt="Ridgeline Loop, trailhead sign">
  </div>
</div>

Next up: that gallery uses floating grid columns under the hood — head to Helper Classes to see .clearfix, the small class that keeps a layout from breaking when content floats.

Prev Next