Working with Images in Bootstrap

ByWalter Wimberly

Responsive images are fairly easy to control, both in and out of Bootstrap.

Generally, the problem will be that we need to make sure an image doesn’t expand past the size of its containing element if it is going to potentially be scaled down. This can be done in CSS with max-width: 100%

Bootstrap gives that to us with the class, .img-responsive.

Responsive image

Additionally, we can put some basic shapes with our images. To allow for borders, rounded corners, and even making it a circle.

image with rounded (slightly) corners 
image as a circle 
image with a border and padding

Watch on YouTube

Working with Images in Bootstrap was originally found on Access 2 Learn

Assistant Professor

Walter Wimberly is an Assistant Professor at a regional college in Tennessee, teaching Computer Science in the Software Engineering track. He works as a student advisor, oversees curriculum changes, develops new courses, and manages the advisory panel.
Walter taught full time for about 7 years, before going back into “industry” as a full stack Software Developer for a dozen years. There he focused on web based projects coding in JavaScript/jQuery and utilizing the Bootstrap CSS Framework on the front-end, and coding in PHP, ASP/ASP.Net, SQL on the back-end.

Since he loves teaching, he taught as an adjunct web and digital media classes for eight (8) years, while working in industry, and has since returned to teaching full time.

He has been married for over 25 years, and is father to several special needs boys. As such, he is working on some projects to help others who have special needs to be self-sufficient, and support the care givers of those with special needs. Check out his Autism blog for more info.

Similar Posts