Bootstrap Embed Video

In this Bootstrap CSS video tutorial, I will show you how to use bootstrap and write css code that will produce a responsive video. This tutorial is useful for people who wish to embed YouTube videos and would like the videos to be responsive or viewable on all devices including desktops, tablets, phones, etc.

Also, in this video, I show you how to set the size of the video so that it won’t be too large.  See the YouTube comments section on my tutorial for more information.  Some of my viewers have asked questions that I was able to help them with, and the information may help you also.  Remember to link to Bootstrap CSS in the head section of your document, and please subscribe to Bootstrap CSS Girl on YouTube.

Bootstrap Image Gallery

In this Bootstrap CSS tutorial, we will be creating a responsive image gallery using bootstrap 3 css, html, and javascript. The javascript consists of a simple click function. Images within our image gallery will be displayed as clickable thumbnails. Elements will be placed within a bootstrap grid system for easy alignment. When an image thumbnail is clicked, a modal image view will pop up displaying the image at 100% width.

First, I created a three column layout using a bootstrap grid and column classes of col-md-4.  Next, I put image tags wrapped in anchor tags within each column.  Then, I copied my image links from which is where I had my images saved for the purposes on my tutorial.  Then, I pasted the image links in the src field of my image elements.  After that, I created the HTML code for my modal windows.  Finally, I added the javascript for the click function which causes the images to appear as full size in the modal window once the thumbnail images are clicked.

Make sure to link to Bootstrap CSS, JQuery, and Bootstrap Javascript within the head section of your document.  Also, make sure to close all divs.

If you need any assistance, please leave a comment on the video. Please subscribe to my YouTube channel Bootstrap CSS Girl.