In this post we will learn about Bootstrap’s Thumbnail component through an example. This component enables us to layout images, videos etc. in a grid layout. A thumbnail is a reduced size version of the original image or video. To enable such layouts Bootstrap provides a set of CSS rules.
The application we will build here will layout images on a page in a grid. To demonstrate different options we will allow the user to select the number of images they would like to see in a row and switch between different values.
We will use the following tools for this example
Apart from these, I have borrowed a few images from the folks over at Pexels for use in this article. These images are free for commercial use and do not require any attribution or fee.
2. Project Structure
Let’s get building our example, for starters, here is the layout of the project folders and their purpose:
This css files from Bootstrap package reside in this folder. All the css stylesheets created by us would reside here as well.
All the font files that came with Bootstrap are located in this folder.
The image files used in this example reside in this folder. I have lent these files for use from Pexelar. They have been shared with the general public under Creative Commons License and thus are free to use even for commercial purpose.
This is the file which holds the HTML markup and is our landing page. All the other files are referenced in this one and they come together in the browser and make things happen.
Our barebones web server built using Node.js and Express module resides in this file.
To start with, we will leverage the Grid System provided by Bootstrap. This grid system splits the real estate into 12 columns. We will place our thumbnails inside a container. There are several css classes through which we can indicate or control at what screen size we want the content to start stacking. This is enabled through the use of media queries, that detect the screen size of the device, and creating classes specific to each screen size. For reference have a look at the below chart with the various screen sizes and corresponding classes we can use to indicate the point of stacking.
In our example we will load a dozen images onto a page as individual thumbnails. We will place a
select at the top to allow us to switch between the number of thumbnails we want in a row. Any changes to this will redo the layout and change according to our choice.
We will start with the template provided at Bootstrap site building atop it as required. To start off, let’s add a
div decorated with the
container class and another descendant
div decorated with the
row class. Inside this
div reside all our images as separate thumbnails. The markup to add each image will be the same and as shown below:
<div> <a class="thumbnail" href="#"> <img src="./images/Image_1.jpg" alt=""/> <div class="caption">Image 1</div> </a> </div>
What we are doing here is adding columns to our row, we will add 12 instances of this, one after the other, as siblings. Each of these divs’ will be decorated with the Bootstrap css class indicating our choice of layout. These divs’ will hold an
a tag decorated with the thumbnail class and attribute href pointing to #. Now, let us add a
img tag with src attribute pointing to an image and another
div with our custom caption.
One final item is the select tag and its label right at the top in our container
div before the row
select tag would allow us to switch between various layout options. Now our Html should look like this:
bootstrap.thumbnails.js that is placed in the js folder. In the document ready callback of JQuery we populate the select list, we placed at the top of the thumbnails, with valid values. We need to bear in mind that the sum of columns occupied needs to be exactly 12 and each column has to be of equal width here for our desired layout.
Initially, we decorate each of our thumbnail with the proper css class based on the screen size so that all images appear in a stacked fashion. The user can increase the number of images to be accommodated in each row by selecting a value in the dropdown select. The layout with 2 images in a row on all screen sizes would look as below:
6. Clearing Fixes
I know, I know I saw it too. In fact it was deliberate on my part to use this screenshot with the glaring issue. In case you did not notice there is an issue with the row 5, the Image 9 seems to have drifted away. Well this is a known issue when your content is of uneven size. In our case the images are not exactly the same size giving rise to this issue. But since Bootstrap folks already know about it, they do provide a solution for such situations. Let us take a look at how to use the
clearfix class to fix this issue with the layout.
We have to place a
div between the 8th and 9th image and decorate it with the
clearfix class along with
visible-* for all the screen sizes we encounter problems with. In our case I checked all the screen sizes and the problem is their with all of them so we will use a
<div class="clearfix visible-sm visible-md visible-xs visible-lg" ></div>
to fix the issues at all of them. To check how the layout looks at different screen sizes, I am using the developer tools in Google Chrome to switch from a 4k screen size to smaller Mobile screen sizes.
After placing the div with the
clearfix class between the 8th and 9th image we also need to place it between the 10th and 11th image since the same issue arises with those two as well. Please note that the location of the clearfix divs would vary depending upon the value selected in the dropdown above, which here is 2. If you go with a 3 or 4 thumbnails per row layout the fix remains the same but the location of clearfix divs will vary.
Now our completed layout should look all fixed and ready like below:
7. Running the code
To run this project after download you need to run the following two commands at the root of the project.
This wraps up the example of using Bootstrap Thumbnails Component.
8. Download the Source Code
You can download the full source code of this example here: Bootstrap Thumbnails Example