Bootstrap sticky footer solution

Having an issue with the sticky footer in Chrome while everything looks fine in FF and IE. When resizing the screen, the content wraps properly, but the footer does not adjust and overlaps the content. Any tips or suggestions would be greatly appreciated.

Currently using ASP.Net and Bootstrap 3.

CSS..

html,form,body {
height: 100%;
/* No padding or margin for html and body elements. */
}

/* Wrapper for page content to push down footer */
#wrap {
min-height: 100%;
height: auto;
/* Negative indent footer by its height */
margin: 0 auto -60px;
/* Pad bottom by footer height */
padding: 0 0 60px;
}

/* Set the fixed height of the footer here */
#footer {
height: 60px;
background-color: #f5f5f5;
}

 body { padding-top: 100px;}

HTML
<form id="form1" runat="server">
    <div id="wrap">

        <!-- header -->
        <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
          <div class="container">
              <div style="float:left;"><h1><kbd>System</kbd></h1></div>
                <div style="float:right;">
                <ol class="breadcrumb">
                  <li><asp:LinkButton>Page 1</asp:LinkButton></li>
                  <li><asp:LinkButton>R2</asp:LinkButton></li>
                  <li><asp:LinkButton>D3</asp:LinkButton></li>
                  <li><asp:linkButton>A4</asp:linkButton></li>
                  <li class="active">F5</li>
                </ol>
            </div>
          </div>
        </nav>
        <div class="container">
            <!-- Begin page content -->

        </div>
    </div>

<div id="footer">
  <div class="container">
     <!-- footer -->
  </div>
</div>

Answer №1

If you are using Bootstrap, you have the option to create a sticky footer by following these steps:

 <div id="footer" class="navbar navbar-default navbar-fixed-bottom">

By implementing the above code, you can utilize Bootstrap's JS and CSS to achieve a sticky footer on your website.

UPDATE: It is important to ensure that your footer is placed WITHIN your container.

   <div class="container">
    <!-- Begin page content -->  

      <div id="footer">

        <div class="container">
         <!-- footer -->
        </div>

       </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

The value of "asp-route-id" is dynamically determined through the use of

Hey there, I’m looking to dynamically pass a value from "codeDrink" to my controller using "asp-route-id" and Ajax in my ASP.NET MVC project. This is how I am handling it in my view: <p> <a id="deleteLink" asp-action="Delete& ...

Error 404 - CSS file missing: encountering a 404 error while attempting to execute Flask code

Hello there! I'm still getting the hang of programming, especially when it comes to web development. Recently, I encountered an issue with my CSS file - whenever I link it to my HTML and run the Python code, I get an error saying that the CSS file can ...

"Implementing master page and CSS styles on a child page: A step-by-step

Currently, I have a master page that is successfully being applied to all of my pages. However, it seems to be encountering an issue when trying to locate the CSS file address for pages within child folders. The folder structure looks like this: <scri ...

When trying to access a view through a controller, the CSS is failing to apply properly

I'm having issues with CSS not working in my Codeigniter project, even when using the base_url() function. < link href="< ? php echo base_url(); ?> application/views/vehicle/css/bootstrap.min.css" rel="stylesheet" media="screen" /> ...

"When using Webpack and Sass, the background image specified with background: url() is processed correctly. However, when using webpack-dev-server, the image is

Currently, I am utilizing Webpack 2 in conjunction with webpack-dev-server and Sass loader. Here is my current configuration: { test: /\.scss/, loaders: [ "style", { loader: "css", query: { modules: false, sourceMap: true } }, ...

Arrange the buttons within the container

I'm struggling with the front-end development side of things (HTML, CSS, etc.) and need help aligning buttons within a container. The container will include a heading and multiple buttons. Any assistance would be greatly appreciated! Thank you in adv ...

Employing state management in React to toggle the sidebar

A working example of a sidebar that can be toggled to open/close using CSS, HTML and JavaScript is available. Link to the Example The goal is to convert this example to React by utilizing states instead of adding/removing CSS classes. To ensure the side ...

Ways to modify the header dimensions using CSS

I've been trying to figure this out, but I can't find a solution. For the structure, I'd like to use an h2 header to make it more semantic, but I want it to appear as an h5 header visually. However, CSS is not cooperating with this idea an ...

What is the best way to translate these CSS properties into Mui?

I am currently in the process of transitioning my CSS code to utilize MUI's sx prop and styled() function. However, I have not been able to find any documentation on how to properly convert the following code to MUI syntax. Can someone assist me with ...

What are some clever ways to handle the transition of the display property?

While transitions for the display property may not work, I am exploring alternatives. I attempted using the visibility property but it didn't quite fit my needs. In my current setup, different text is displayed when hovering over an anchor tag by sett ...

After clicking, I would like the text from the list item to have a style of "background-color: aqua" when displayed in the textarea

Is there a way to apply a highlight with a style of "background-color: aqua" in the textarea only to the word selected from the list above after clicking on it? See below for my HTML: <head> <script src="https://ajax.googleapis.com/ajax/libs/ ...

I'm having trouble getting Firefox to recognize the percentage height set on table rows. Any suggestions for a workaround?

The goal is to set the height of the first row to 70% of the screen. To prevent the scrollbar from appearing on the entire webpage, overflow has been set to auto within the div of the first row. This solution functions correctly on Chrome and IE, however, ...

Animating the Ember Collection while paginating

Our team is currently developing an ember-pagination library to assist developers with pagination of items within an array collection. The library is already able to display content, enable pagination, and incorporate a typeahead feature for search funct ...

Ensure to preselect the radio button based on the Day's value

I have set up my Radio buttons with corresponding content to be displayed when clicked. I want to automatically pre-select the tab button based on the current day. For example, if today is Sunday, the page should load showing the contents for Sunday. If i ...

Angular components are not inheriting the Bootstrap row class as expected

Within my codebase, there are numerous controls declared in the following manner. <div class="row"> <div class="col-sm-12"> <div>Caption</div> <input type="text" class="form-control"> </div> </div> In ...

What is the most effective way to incorporate CHMOD-like roles into an ASP.NET web application?

In my current Web application, I have a simple USER_LEVEL field that includes three roles: Normal, Authoriser, and Admin. As we progress with development, I anticipate the need for more roles and increased complexity in defining them. For example, the Adm ...

How can we add a class to a radio button using jQuery when it is checked, and remove the class when it

I'm looking for help with using jQuery to toggle between two radio buttons and display different divs based on the selection. jQuery(document).ready(function($) { if ($('#user_personal').is(':checked')) { $('.user_co ...

The CSS styling of Vuetify TreeView does not support text wrapping

I'm having trouble getting the long text in this CodePen snippet to break and wrap properly. It extends off screen, rendering the append button unclickable. I've experimented with various CSS rules but haven't found a solution yet. Check ou ...

Tips for shrinking a sticky header when scrolling using Angular and JavaScript

Looking for a way to modify the header component in an Angular application so that it shrinks as the user scrolls down while maintaining its sticky functionality. How can I adjust the display of the lower half of the header to show no text when the user s ...

What steps are involved in incorporating dynamic pagination in PHP using this particular snippet of code?

I am looking for a way to display a list of numbers from 1 to 1000 in a single line with the ability to scroll. However, I need to exclude both "Prev" and "1" from this list. How can I achieve this? Below is the code snippet that I currently have: echo ...