D4mations.com

Bootstrap 4 Image Gallery

[ad_1]
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

d4mer

,
, , , , , , , , ,

17 responses to “Bootstrap 4 Image Gallery”

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

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

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

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

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

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