Create a Simple Footer with Bootstrap

[00:00] The last section on every website is a footer, and this site will be no different. A Bootstrap footer is treated very similarly to how we would treat a nav bar. Create a section with an ID of footer. Then create a footer element where we will add container fluid so it [00:19] reaches the edges, add a light background, and add a little padding and margin. Create an unordered list with a class of nav. Inside of that, create a list item with a class of nav dashitem. Then inside of that, [00:39] create an anchor tag. Duplicate the list item 4 times, and the text plus the href for each one of these will be the section IDs that we've created throughout this course. [01:03] Let's save that and take a peek at our site. Now that we have these listed, let's add in a bit of styling. Add the navdashlinkclass to the anchor tags, add a little padding on the x axis of 2, and change the text color to text dash [01:23] body dash secondary. Then in the unordered list element, center all of them by using justify content center. Let's save and take a peek at our site again. Alright. Our links are styled, and they're starting to look good, although there are a few more things left to add. Another really important [01:43] addition is the copyright. Below the unordered list, add a paragraph, center the text, and make sure it's the same color as the links using text dash body dash secondary. For the text, add the at symbol, the year, and your name. Let's separate these with the border. In the unordered list class, [02:03] add border dash bottom, make it black with border dash black, and add a little padding and margin of 3. Let's save and look at the site. This looks awesome, and we'd be happy to stop here. But the last thing that we can add are links to socials. Bootstrap gives us some really cool features for icons that we can use [02:23] for GitHub and Twitter links. In this course, I've opted to use my own icons, but Bootstrap gives you a very large list that you can use if you want to download the Bootstrap icons package. At the bottom of the unordered list, create an anchor tag, add an image inside of the anchor tag, and add a width and height of 25 to the image. [02:47] Duplicate this once. The hrevs will be linked to my personal GitHub and Twitter. For the images, the source will be the 2 images in the images slash socials folder and add an alt as well. [03:10] Now to the good stuff. Bootstrapclassesicon dashlinkandicon dashlinkdashhover gives us some cool styling and hover effects. For now, I'll add these to just one of the anchor tags to show the difference. Add some [03:29] padding on the x axis of 2, and add in the class of by to the image. Save that, and let's take a look. It centers our icon and adds a cool hover effect. And how simple was that? There are multiple customizations you can do for the hover effect. I'll make sure to link to the docs in the description if you want to learn more. [03:51] I'll quickly add those styles to the second icon, and we are good to go. Our footer and our site are now finished.