How can I position an element at the bottom of a page using VueJS and Bootstrap CSS?

https://i.sstatic.net/ojanG.png

I am trying to move my footer (Copyright statement) to the bottom of the page. However, it is creating some extra white space beneath the footer. How can I eliminate this additional white space?

This issue is occurring in a VueJS project that I am working on. Here are the relevant code snippets:

App.vue

<template>
  <div class="fluid-container">
    <app-header></app-header>
    <div style="min-height:610px;">

      <router-view></router-view>

    </div>

<div>
  <app-footer></app-footer>
</div>

  </div>
</template>

footer.vue

<template>
  <div class="fluid-container">
    <p class="text-center">Copyright &copy 2018, ABC Marketing. All Rights Reserved.</p>
  </div>
</template>
<script></script>
<style scoped>
div{
  color: white;
  background-color: #003459;

}
</style>

Answer №1

It appears that in footer.vue the copyright text was wrapped in a p tag, following Bootstrap 4's style of p tags having margin-bottom: 1rem;. If you remove the margin-bottom, it will be fixed at the bottom of the page.

.fluid-container.footer{
  background: blue;
}
.fluid-container.footer > *:last-child {
    margin-bottom: 0px;
    color: #fff;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css" rel="stylesheet"/>
<div style="min-height:610px;">
</div>

<div>
  <div class="fluid-container footer">
    <p class="text-center">Copyright &copy; 2018, ABC Marketing. All Rights Reserved.</p>
  </div>
</div>

</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Create a correct v-model value by utilizing a dot notation string as a reference to the data object

Recently, I created a proxy-component that dynamically renders different components based on the specified :type. Everything was functioning smoothly until I encountered an issue with nested objects within the formData object. An example of this problem i ...

An easy guide to using Vue-Router to manipulate URL query parameters in Vue

I'm currently working on updating query parameters using Vue-router as I change input fields. My goal is to adjust the URL query parameters without navigating to a different page, but only modifying them on the current page. This is how I am approachi ...

iOS iframe remains unscrollable only when switching from portrait to landscape orientation

I have a scrollable iframe set up on iOS like this: <div style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; overflow: scroll; -webkit-overflow-scroll: touch; ..."> <iframe style="height: 600px, ..."> </iframe> </d ...

The total height of an HTML element, which takes into account the margin of the element itself

Is there a way to accurately calculate the height of an element including margins, even when dealing with child elements that have larger margins than their parents? HTMLElement.offsetHeight provides the height excluding margin, while this function from ...

What are the steps to implement scoped styles in Vue using Sass?

When I try to apply scoped styles, the code stops working. It works fine without using the scoped attribute. <v-dialog persistent content-class="myclass"> <style lang="sass"> .myclass max-width:380px But once I add s ...

Creating a distinctive appearance for JavaScript's default dialogue box

Is there a way to enhance the design of my code that prompts the user for input using JavaScript's `prompt`? Currently, it appears too simplistic. Are there any CSS or alternative methods to improve its appearance? function textPrompt(){ var text = ...

Using jQuery to locate a JavaScript variable is a common practice in web development

I recently created a JSFiddle with buttons. As part of my journey to learn jQuery, I have been converting old JavaScript fiddles into jQuery implementations. However, I seem to be facing a challenge when it comes to converting the way JavaScript fetches an ...

Elevate your website design by adding interactive Ripple Buttons using a combination of Javascript and

Recently, I came across a script that allows for an animation to occur when a button is clicked. However, I have encountered an issue where the script does not redirect to a link. (function() { var cleanUp, debounce, i, len, ripple, rippleContainer, rip ...

Starting the download of the canvas featuring a stylish border design

I'm facing an issue where the canvas border is not showing up when I download the canvas with a border. The border appears on the screen, but it doesn't get included in the downloaded canvas. let canvas=qrRef.current.querySelector("canvas&qu ...

Glitches of white light during loading screens on your Prestashop website

There's a strange occurrence on the website where it flashes white DURING (not just at the start) every time a page loads. Initially, the page seems to load smoothly and almost completely, but then there is a sudden flash before all elements are disp ...

Removing duplicate values in Vue after sorting

Explore <div v-for="todo in sortedArray"> <b-button block pill variant="outline-info" id="fetchButtonGap" v-model:value="todo.items[0].arrivalTime"> {{fromMilTime(todo.items[0].arrivalTime)}} < ...

What could be causing the stores pinia to remain undefined?

I'm encountering an issue when trying to access the store as I receive an error stating that useUsersStore is not defined. The pi nia store has been correctly stored and exported to the component. https://stackblitz.com/edit/vitejs-vite-wg4uyx?file=s ...

Is it possible to iterate over nested arrays in Vue?

Seeking advice on how to effectively loop through a JSON object like the one provided below using v-for. My goal is to iterate over all ID's/Numbers and the items within each number, then display them in a list format... I'm aware that I can easi ...

The jQuery event listener for clicking on elements with the class "dropdown-menu li a" is not functioning properly

I've been attempting to implement a dropdown menu using Bootstrap that displays the selected option when a user clicks on it. However, I'm encountering issues as the breakpoints set within $(document).on("click", ".dropdown-menu li ...

localization within vue component

if (self.form.pickupTime == '') { self.formError.pickupTime = 'Please enter a pickup time that is ready for collection.'; status = false; return status; } else { self.formError.pickupTime = ''; } I am struggling ...

Creating a Personalized Tab Layout with react-bootstrap

Incorporating react-bootstrap components and styled components, I have implemented tabs in my project. The current appearance of the tabs is as shown here: https://i.sstatic.net/rPnlO.png However, my requirement is to have the tabs look like this inst ...

When using Vuepress behind a Remote App Server, pages containing iframes may return a 404 error

Creating a static website using Vuepress was a breeze, especially since I included a dedicated section for embedded Tableau dashboards. The website functioned perfectly when accessed online without any issues, displaying the Tableau dashboards flawlessly. ...

Header fixed vertically

I am currently working on a webpage with a minimum width requirement of 1124px. This means that whenever the browser window is smaller than that, the content of the page needs to be scrolled horizontally instead of smoothly transitioning into a responsive ...

Adaptable images - Adjusting image size for various screen dimensions

Currently, my website is built using the framework . I am looking for a solution to make images resize based on different screen sizes, such as iPhones. Can anyone suggest the simplest way to achieve this? I have done some research online but there are t ...

Contrasting the distinctions between a pair of CSS class declarations

After using my customized CSS class named myclass alongside Bootstrap's built-in class container, I have a question about how to declare a div element with both classes. Should I go with: <div class="myclass container">some code</div> o ...