In this installment of our Bootstrap 3 tutorial, we extend Bootstrap’s grid system and add thumbnails to easily display grids of images for our themes.
UPDATE BOOTSTRAP 4 BETA
In Bootstrap 4 Beta there is no major difference in responsive images. Only the name is different. img-responsive is used in BS3 and img-fluid in BS4.
Bootstrap 4 Beta
.img-fluid {
max-width: 100%;
height: auto;}
Bootstrap 3:
.img-responsive {
display: block;
max-width: 100%;
height: auto;}
In addition to the border-radius utilities, you can use .img-thumbnail to give an image a rounded 1px border appearance.
<img src="..." alt="..." class="img-thumbnail">
Video Transcript
Hey everybody this is Christopher Gimmer from BootstrapBay.com, and welcome to part 8 of our Bootstrap 3 tutorial. Today we’re going to be adding thumbnails to our columns of text.
First thing I’m going to do is head on over to our folder with all our bootstrap files. Within here, I’m going to create an ‘img’ folder which is going to house the images for the site. Then, I’m going to paste the three images we’re going to use for our thumbnails. Now we need to dive into our code.
In the last video I showed you guys how to setup your columns of text within Bootstrap’s grid system inside these column classes. When we’re setting up the thumbnail, we’re going to create the code right underneath these column classes above our header tags.
I want to link these images so I’m going to set this up as a link. I’m going to go:
<a href="#" class="thumbnail"> <img src="img/slate.jpg" alt="Slate Bootstrap Admin Theme"> </a>
When we go to our preview, now we have our thumbnail and it’s linked as well. Then I’m going to copy and paste the code and just change the file name. I’ll call this one Appi and change the text to Appi Landing page template. Then I’ll call this one Jiggy and change the text to Jiggy Portfolio Theme.
In the last video, we had theme 1, theme 2 and theme 3 in our header tags. I’m going to change these to the actual names of our themes. Now I’m going to open this up in the browser so there’s a little more room than in the preview.
So there you have it. We’ve added the thumbnails, they’re linked up and they’re showing up pretty good. As you can see, adding thumbnails just makes your site a lot more visually appealing and you definitely want to be adding pictures to the site.
That was a quick tutorial on how to add thumbnails to your Bootstrap site. In the next video we’re going to show you guys how to implement Google Web Fonts into your site as well. Make sure to rent, comment, subscribe and we’ll see you in the next video.
