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.

Advertisements

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 http://albumupload.com 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.

Bootstrap CSS Footer

In this Bootstrap CSS Tutorial, I will show you how to design a responsive footer for your website using Bootstrap CSS, Font Awesome for Social Icons, and Google Web Fonts. The footer in this Bootstrap CSS tutorial is responsive meaning that it gets larger or smaller based on the device that it is being viewed from. This responsive footer consists of 4 columns; the first three columns contain navigation links, and the last column contains contact information and social media buttons.

This tutorial is for beginners so I go through step by step everything from linking files in the head section to the css used to style the HTML elements of our footer. If the tutorial goes too fast for you, pause the video to write down some notes. I will be happy to assist, if you leave a comment.

In this css tutorial, we use a bootstrap grid with four sections using the responsive class of col-md-3 to create 4 equal sized columns across our page. Bootstrap grid is a great way to organize your content so that it will be responsive. Since we used the class of col-md-3 (md for medium), our grid will display as stacked on small and extra small devices (responsive). Within the first three columns, we have navigation links. In the fourth column, we have clickable email and phone number links along with social media buttons. The social media icons use classes from font awesome.

In this tutorial, we also use bootstrap classes to hide certain elements of our footer when we don’t need them. For example, a horizontal bar which is only needed on mobile view.

I hope that you have enjoyed this Bootstrap 3 CSS Tutorial on Responsive Footer Design. Please subscribe to my channel Bootstrap CSS Girl. More Bootstrap CSS tutorials coming soon!