[Vuejs]-VueJS Bootstrap CSS how to place element bottom of the page?

by

7👍

✅

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>
👤Kavinrajsi

Leave a comment