[ad_1]
https://i.ytimg.com/vi/Cg74G7I5u9E/hqdefault.jpg

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!

Original source