Footer bootstrap css has no space with content

HTML & CSS
1

I am trying to create several tables with a loop with bootstrap css but the last table has no space with footer navbar I want there would be a small space between last table and footer. Here is my source code:
https://pastebin.com/VQh9T5EJ
and here is screenshot image how it looks like

please advise how to solve it.

2

You can use the Upload button on the toolbar or darg & drop an image into the editor window.

3

Thanks!
Now how to have a reasonable gap between footer navbar and content?

4

You have numerous bootstrap errors. I suggest you run your code through bootlint. http://www.bootlint.com/

1 Like
5

Your footer is fixed positioned and has no relationship with the rest of the page. You cannot account for the footer other than applying a fixed padding to the bottom of the body element.

e.g.
body{padding-bottom:70px}

Of course that assumes the fixed footer never exceeds its given height and the text in the footer does not wrap or all bets are off. That’s the problem with fixed elements and they should be used with considerable care and require good management.

At the moment you have an empty p element creating what space there is but this is not a good technique. The padding bottom on the body element is better but still smells of magic numbers.

1 Like
6

which line I have an empty p element?

7

100

1 Like
8

Thanks. I fixed errors.

9

Thanks space fixed.

10

Sorry, now it looks ugly on mobile. how to fix it? please click on image below. beside gap between footer and content, there is extra border for the table. how to remove this border?

Another question is that bottom navbar is moving when scrolling. How to prevent it moving when scrolling?

698Ă—363 11.5 KB

11

You need to post your updated code.

12

I guess that border was because I used table-responsive div class? what is the purposes of this class and where to use?
and how to set footer navbar to not move when scrolling? Here is footer navbar that moves when scrolling.

<nav class="navbar navbar-default navbar-fixed-bottom">
  <div class="container">
   <center>All Rights Reserved.</center>
  </div>
</nav>
13

I meant all the updated code.

If you’re going to use bootstrap you should:

  1. RTFM
  2. Go through a bootstrap tutorial.
14

Here is the full code. please advise.
https://pastebin.com/D5TCEAAt

15

What are you viewing this on? I have tried several mobile simulators and see no problem.

16

When I scroll up, footer goes up when I scroll down, footer goes down. Don’t you see so?
My mobile is Samsung Galaxy J7. I tried with J5 too.

17

Post the URL to the actual page online. (Not the code)

18

Is that happening with the code in your pastebin or is that from another version?

Have you tried it using the code from your pastebin?

If you are testing a different version then what version of bootstrap are you using because I believe older bootstrap removed the fixed positioning for smaller screens due to devices lack of support at the time.

As mentioned above if you have a live version then it would be best if we looked at that to test.

These are the reasons that fixed positioning is best avoided in most cases.

19

I have checked the page you put online. I don’t see the problem you mention.

20

Sorry, as newbie I was confused about “bottom of viewport” and “bottom of the page”. This is fixed at bottom of viewport irrespective scrolling.
How to have it at the bottom of the page itself respecting scrolling?