Bootstrap 4 Image Gallery


https://i.ytimg.com/vi/PeF9p17K6-U/hqdefault.jpg



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

▶ Download Exercise Files
http://www.3rdelement.com/online_training/html/bootstrap/bootstrap-4-image-gallery.zip

▶ 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.

Website!
▶ Helping You Develop – http://www.pixelias.com/

Flickr!
▶ http://bit.ly/1xx0bBu

Instagram!
▶ https://instagram.com/pixeliasdotcom/

Twitter!
▶ http://www.twitter.com/pixEliasdotcom

Subscribe!
▶ http://www.youtube.com/channel/UCPq0a0HP6JvculGSNYu-pSQ?sub_confirmation=1

Original source

17 thoughts on “Bootstrap 4 Image Gallery

  • February 21, 2019 at 14:25
    Permalink

    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,

    Sunil

  • February 21, 2019 at 14:25
    Permalink

    Hi,

    Thanks

    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.

    And

    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.

    Thanks

  • February 21, 2019 at 14:25
    Permalink

    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.

  • February 21, 2019 at 14:25
    Permalink

    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

  • February 21, 2019 at 14:25
    Permalink

    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).

  • February 21, 2019 at 14:25
    Permalink

    It was a nice tutorial. Additionally, can yo please suggest me how I could add a download button on the previewed Image?

  • February 21, 2019 at 14:25
    Permalink

    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.

  • February 21, 2019 at 14:25
    Permalink

    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.

Leave a Reply