CODEWITHSUNDEEP
cssvue.jsvuejs2bootstrap-4
margherita pizza
margherita pizza

Reputation: 7175

VueJS Bootstrap CSS how to place element bottom of the page?

enter image description here

I want to bring my footer (Copyrights statement) down in the page. But It adds some additional white space below the footer. How come I remove this additional white space?

I'm doing in this VueJS project. This is my codes.

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>

Upvotes: 0

Views: 9808

Answers (1)

Kavinrajsi
Kavinrajsi

Reputation: 492

I think that in footer.vue you wrapped copyright text in p tag, as per bootstrap 4 p tag has margin-bottom: 1rem; if you removed the margin-bottom it will fixed at 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>

Upvotes: 7

Related Questions