Twitter Bootstrap 4 and Flexbox, two terms that are now coming across every web developer. You can see many tutorials explaining what they are and how they work, so let’s not go in that direction, rather in this article I will be explaining one simple image gallery snippet which uses concepts of bootstrap flexbox. I can assure you that, this is super easy to implement and code, yet attractive to add to any of your website. This is the perfect example for beginners to learn flexbox concept.
So, lets just get started!
Before diving into the flexbox concepts and code, let me first show you how our image gallery is going to look -
Now I am dividing this tutorial to total 4 steps-
Step 1 : Create a basic html file and add your images to it.
The very first step you will make is open Bootstrap 4 official website and use it as your guide throughout this tutorial. In the documentation section, you can see a starter template. Just copy and paste that code into your index.html file.
But wait.. did you just thought why copy and paste?
That is because it is a boilerplate code, a small snippet which have bootstrap CDN already linked to your webpage. So, we don’t need to add all the links explicitly and that is how Bootstrap documentation is going to help us initially.
After you are done with that boilerplate code, just edit the title from Hello World to anything you want and remove that H1 tag from body section. We will need very few lines of our own CSS, so adding it from external css file (style.css) or adding an internal css(<style></style>) that is totally your choice.
In the body tag, let’s first add a container so that our gallery will be centered aligned (and I personally like container over container-fluid 😉). Finally, it’s time to add our images into the container.
All the delicious images I have used in my example are taken from unsplash. You can check this website to add some really good images for your own gallery.
After step 1, your code should look somewhat like this -
Please note here, I have removed optional javaScript and jQuery links, as we are not working with them in this example. Also, all images have been given a class called as img-fluid. This class will make all the images responsive in nature as per the screen sizes.
And, step 1 ends here! 😎 Let’s jump to step 2 now..
Step 2 : Adding flexbox row and columns.
As a web developer, we all know how to divide a layout into rows and columns. If we see in our example, we will simply say, two rows and four columns.. right??
Ummm, not exactly! It has one row and four columns.
But Why?
Because, if we take two rows, we will not be able to add images of different width and height into our gallery. Flexbox will make them proportional and we will end up having simple eight grid layout, something like this -
So to avoid this and maintain that asymmetry in images, we will take only one row and four columns. In that one column, we will add two images vertically, giving us gallery of total 8 images.
From this I hope you understood why we are taking only one row. But you may think, then why can’t we use columns directly?? Why even we are adding a row?
This is because, if we add row, it becomes easy for us to align items inside it using flexbox properties. Hence, choosing to add a row is always a better option here.
To add flexbox row in your code, we have to include two classes to the div and they are d-flex and flex-row. d-flex will add all the flexbox properties and flex-row is going to create one row in our layout.
<div class="container">
<div class="d-flex flex-row">
<div class="d-flex flex-column">
<img src="1" class="img-fluid">
<img src="2" class="img-fluid">
</div>
<div class="d-flex flex-column">
<img src="3" class="img-fluid">
<img src="4" class="img-fluid">
</div>
<div class="d-flex flex-column">
<img src="5" class="img-fluid">
<img src="6" class="img-fluid">
</div>
<div class="d-flex flex-column">
<img src="7" class="img-fluid">
<img src="8" class="img-fluid">
</div>
</div>
</div>After adding row, we will add four columns to the layout with class flex-column. With this code, we got one row four columns, but carefully notice the gallery grid. It has all images with equal width. So to make it happen, our custom CSS will come in picture! To give all images equal width, we will make all columns of equal size -
<style>
.flex-column {
max-width : 260px;
}
</style>Also, I will give my container a decent background color (this is optional) and will add margin to every image so that it should separate from another image present in the same column.
<style>
.container {
background: #f9f9f9;
}
img {
margin: 5px;
}
</style>After all this, your code of index.html should look like this -
Whoaa! We are almost done! Just one more step to go.
Step 3 : Finishing touch!
If you see, the gallery is almost ready. But.. Its alignment can be improved. To make the whole gallery central aligned, add one more class to the flex-row i.e justify-content-center. This class will make whole gallery to stick to the center whatever the screen size is.
Also, to make this gallery look equally pretty on smaller devices add one more class to flex-row i.e. flex-wrap. This class will force all images to stay inside row and make them look good on smaller screens too. So, the code for flex-row finally becomes like this -
<div class="d-flex flex-row flex-wrap justify-content-center">
</div>Step 4 : Problem of different image sizes
It is really not necessary that you will encounter this problem, but as I experienced it I am explaining my solution for it. In my images, two were having smaller sizes. There are many ways to make them compatible with other images (for e.g using photoshop). But I decided to use code for that and so in my example I added one more class called as scale. In this class, I used scale transform to enlarge those images and padding to make them properly aligned.
You can also use any other method to do the same. I am sharing my code of this example on codepen. You can check that out.
And we have successfully created our flexbox gallery. 😍
Call for action
If you have any query or want to give your feedback, do write that. I always appreciate responses! Thanks for reading this article.
Happy Coding!
