Bootstrap 4 Image Gallery


Learn how to build a responsive image gallery using the Bootstrap 4 framework.

▶ Download Exercise Files

▶ Boostrap 4 Grid System
Bootstrap’s grid system uses a series of containers, rows, and columns to layout and align content. It’s built with flexbox and is fully responsive.

▶ Bootstrap Break Points
Extra Small break point (smaller than 576 pixels)
Small break point (bigger than 576 pixels)
Medium break point (bigger than 768 pixels)
Large break point (992 pixels)
Extra large break point (1200 pixels)

Bootstrap is an open source toolkit for developing with HTML, CSS, and JS.

More from Elias Sarantopoulos ❤
Creative tutorials from Elias Sarantopoulos. Helping you develop your skills with Affinity Designer, Adobe Illustrator, After Effects, and Bootstrap tutorials.

▶ Helping You Develop –






Xem Thêm Bài Viết Khác:


  1. Muito obrigado pela ajuda! Graças a você, consegui fazer minha galeria de fotos funcionar. Me ajudou no TCC – Trabalho de Conclusão de Curso – Ciência da Computação.

  2. What a great tutorial. I learned so much from watching this. I'm new to Bootstrap and building responsive websites and this was such a help. One question. Instead of adding classes to each picture, could you have added a class in the css file that would have covered every picture in the row?

  3. Hi,

    Thank you very much for your guidance.

    Actually I didn't understood that bg is controlling the size of containers, but it got me clear in your last mail with screen shots.

    But now I have removed all custom settings from html & also css (for index_6_5.html only and I will remove it for all other pages later.) and now it is working much better then previous.

    But still there are two issues which is shown in attached images.

    I will follow all your instructions & I hope you will help me till complete my this project.

    Please reply

    Thank you so much.

    Please check your email.

    Best regards,


  4. Hi,


    I removed the container from CSS.

    Set a grid for Logo & Name, & it is working nice, but logo is not getting me at center in responsive mode.


    When I open/drop down menu bar in responsive mode, it is going behind slider which is just below the menu bar as shown in attached image.


  5. Very nice. I used it too to make my photo gallery. Thank you very much.
    I am using Brackets & Bootstrap4 to build my wbsite & I hope your hole video series will be useful to build my website.
    again thank you very much.

  6. Your tutorial on bootstrap 4 cards is hands down the best I've seen and I'm back to check out another video of yours. You have a refreshingly cool accent and the way you get your point across is clear and concise. You have earned a new subscriber

  7. I liked the presentation. I am having no success in getting the arrow functionality. However the code I typed i works with other lightbox code (baguettebox.js/1.8.1).

  8. Having watched many tutorials on different web design programmes, this one must be one of the best for a clear, concise explanation of how to create an image gallery. Taken at an easy pace, anyone with a bit of knowledge of using code can hardly go wrong.
    Well done Elias – please create more like this.

  9. Very nice tutorial. I thoroughly followed your tutorial and it really helped. Thank you. I have a question. I went to the lightbox bootstrap site and it said that I can be added data-title and data-footer for the model. However, I am unable to style the data-footer because the image becomes small and the text is large. Could you please help me with this. Thank you very much Elias.


Please enter your comment!
Please enter your name here