Bootstrap images

Images can be made responsive by setting their class attribute to .img-fluid. This will scale the image in relation to its parent element by setting its maximum width to 100% and height to auto.

You also have the option to shape images with either rounded corners, circles, or with an outer border. This is accomplished by setting the <img> element's class to one of the following Bootstrap classes:

  • img-rounded
  • img-circle
  • img-thumbnail

In the following image, we've displayed a list of employees, and their pictures. The list of employees could be retrieved from a database and passed to the view:

Bootstrap images

The code that achieves the preceding result, ...

Get Bootstrap for ASP.NET MVC - Second Edition now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.