Placing the copyright footer at the bottom of an Angular / C# application with Bootstrap 4 styling

I am facing troubles while attempting to utilize the sticky-footer-wrapper feature from Bootstrap in order to keep the footer fixed at the bottom of the page. However, instead of staying at the bottom, it just appears right after the content on the page finishes. Below is my Index.cshtml

@{
    Layout = null;
}

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>XXXX</title>
    <base href="/">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link href="/Content/ionicons.min.css" rel="stylesheet" />
    <script src="https://npmcdn.com/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
</head>
<body>

    <div class="d-flex flex-column sticky-footer-wrapper">

            <app-root></app-root>

        <footer class="container-fluid w-100 bg-info text-light py-3">
            <div id="copyright">
                <a target="_blank" href="https://www.company.net/"><img src="/Content/img/xxxlogo_footer.png" alt="xxx Footer Logo" /></a>
                <span>xx.com is the global source of information about and access to services provided by the xxx companies.</span>
                <span class="pull-right copyright">&copy; 2019 xxxgroup Inc.</span>
            </div>
        </footer>
    </div>


    <script type="text/javascript" src="~/Scripts/client/runtime.js"></script>
    <script type="text/javascript" src="~/Scripts/client/polyfills.js"></script>
    @if (HttpContext.Current.IsDebuggingEnabled)
    {
        <script type="text/javascript" src="~/Scripts/client/styles.js"></script>
        <script type="text/javascript" src="~/Scripts/client/vendor.js"></script>
    }
    <script type="text/javascript" src="~/Scripts/client/main.js"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>

In an attempt to add padding or spacing at the bottom for the component template, I wrapped the contents within a container as shown below:

<div class="container mb-3 pb-3" ></div>

However, even after applying this method, the issue still persists. Any guidance on how to resolve this would be greatly appreciated.

Answer №1

Revised based on feedback

To ensure the outer div stretches to fit the viewport size, include vh-100 in its classes. Additionally, apply mb-auto to the first element so it properly positions the footer at the bottom of the page.

Take a look at this demonstration:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<body>
  <div class="d-flex flex-column vh-100">
    <app-root class="mb-auto"></app-root>
    <footer class="container-fluid w-100 bg-info text-light py-3">
      <div id="copyright">
        <span>xx.com is the global source of information about and access to services provided by the xxx companies.</span>
        <span class="pull-right copyright">&copy; 2019 xxxgroup Inc.</span>
      </div>
    </footer>
  </div>
</body>

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

Issue with updating onclick attribute of popover in Bootstrap 4

My goal is to design a popover in bootstrap 4 with a nested button inside it. However, when I update the data-content attribute of the popover with the button element, the element gets updated but the onclick attribute goes missing. I have experimented wi ...

When I hover over one menu item, it interferes with my CSS transitions because the other menu items are hidden

I've been attempting to create a menu with very specific behavior: 1) Submenu transitions in when its corresponding menu item is hovered over 2) Submenu remains visible for a moment after moving the mouse away before transitioning out 3) If another me ...

AngularJS makes it easy to retrieve data from a server using the $

I am interested in using Bootstrap datatable with AngularJS. Here is the code I have been working on: https://codepen.io/bafu2203/pen/VzBVmy Upon inspection, you will notice that when attempting to populate the table with data from a $http.get call, the t ...

Surprising Outcomes of Negative Margin in jQuery Animation

Unique Project Summary I am currently working on a website that incorporates a sliding menu feature. I have successfully implemented this functionality, and the display remains consistent during the animation transitions for sliding the menu in and out. T ...

Is there a way to create space at the bottom after setting margin to auto?

I'm currently mastering Bootstrap v5.0 and experimenting with creating a webpage using Bootstrap. I've encountered an issue that requires assistance. Specifically, I'm trying to add extra space between two columns on smaller screens while ma ...

What is the best way to prevent scrolling in one column while allowing another column to scroll normally?

On my website, I have two divs positioned side by side. I am looking to keep one div fixed without scrolling while allowing the second div to scroll normally. How can I achieve this? For a clearer visual, refer to this image: Sample Image ...

Access information through token-based verification

Just starting out in this area of development, a colleague shared some information with me on how to retrieve the database. I'm feeling a bit lost as to what to do next. curl -X GET -H "Authorization: Token token=xxxxxxxxxxxxxxxxxxxxxxxxx" "https://w ...

Ensure that the entire webpage is optimized to display within the viewport

My goal is to make the entire website fit perfectly into the viewport without requiring any scrolling. The main pages I am focusing on are index, music, and contact, as the other two pages lead to external sources (you can find the link at the bottom of th ...

Is it possible to include a shared helper text for two textfields that have been imported from MUI in a React.js project?

This snippet contains the code for my password container: .password-form-container { width: 85%; height: 7%; position: relative; top: 230px; left: 40px; display: flex; justify-content: space-between; border: 1px solid red; } <div clas ...

What is the best way to create a video that takes up the entire height of a half-sized

page url: I am facing a challenge with displaying a video that has dimensions of 4096x2160 pixels. I want to show the centered part of the video with full height on my left half screen. Despite trying various methods, I have not been able to find a suita ...

Change the selection so that only the initial one appears in gray

Is there a way to make the text inside a select field gray out when the first option is selected? Can this be accomplished with just CSS or does it require JS? I have attempted altering the style of the first option, but it only affects the text color in ...

When making changes to my database using PHP and MYSQL, only the first column gets updated while the rest remain unchanged

I have a mysql database with the following columns: firstname, lastname, age, email, phone When I attempt to update the data, it sometimes turns out like this: John Doe 23 <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4b2e2e2 ...

The color of my Navbar remains stationary despite implementing Javascript for scroll effects

I am having trouble with the Javascript portion of my code, which I copied from a tutorial. The Navbar is not changing color when scrolled, and I'm not sure if the issue lies with the Javascript, the CSS, or if I need to add 'scrolled' to th ...

A creative CSS technique to eliminate borders from ul elements without relying on the calc() function

I'm currently using the top bar component from Zurb Foundation and have added a 1px border at the top and a 3px border at the bottom of the nav tag. However, I am facing height issues because the ul menu inside is set to 100% height. What would be th ...

Text inside a stationary column with scroll bar

I am working on a webpage with two columns that are independently scrollable. In the left column, which is used for navigation, I have two sub-elements that currently scroll together. Here is the basic structure of the code: <div class="row"> & ...

Altering the background color of :after while :before is being hovered over

Is it possible to modify the :after section when hovering over the :before part? Take a look at this image for reference: I want to alter the small triangle shape when the large square is being hovered over. The square uses the :before pseudo-element and ...

Changing the visual appearance of an alert in JavaScript and HTML

My knowledge in JavaScript is limited, but I have a script that retrieves a query from a Python service to a Mongodb database. The query is returned in the following format: [{CHAIN: "STREET ELM, ELMER", CODE: "1234"}, {CHAIN: "STREET LM, LMAO", CODE: ...

Is it possible to use powershell to simulate clicking on an angularjs button?

<div class="w-btn" ng-click="vm.callbacks.compareAll();" ng-if="vm.folderData.projects.length > 0 &amp;&amp; vm.noneSelectedProjects" tabindex="0"><i class="glyphicon glyphicon-transfer btn-icon"></i> Report from all</div> ...

Is there a way to ensure the scroll bar remains at the bottom as new data is added?

Hey there Coding Enthusiasts! I'm currently working on developing a chat system and one of the features I'm trying to implement is keeping the scroll bar at the bottom. The goal is to ensure that when someone sends a message, the user doesn' ...

Is there a way to use a single url in Angular for all routing purposes

My app's main page is accessed through this url: http://localhost:4200/ Every time the user clicks on a next button, a new screen is loaded with a different url pattern, examples of which are shown below: http://localhost:4200/screen/static/text/1/0 ...