Vue.js 2 and Bootstrap 4 Web Development

Making the footer nice

Aren't you tired of this hardcoded word "Footer" always lying around beneath our content?

The ugly flying hardcoded Footer always glued to our content

Let's do something with it! If you check our mockups, we have three columns there:

• One column for the copyright information
• Another one for the fact of the day
• And the last for the author information

You already know what to do, right? Again, we want these columns to be equally distributed on mediumand large-sized devices, and stack on mobile devices. Thus, our code will look like this:

// components/common/FooterComponent.vue <template> <div class="footer"> <div class="container row"> ...