Skip to content Skip to sidebar Skip to footer
Home / Css / Html / Twitter Bootstrap

How To Remove Gap After Footer In Bootstrap 4?

Post a Comment
Below is my html code (live demo http://...) but the footer is not at the very bottom of the page, there is a gap after footer. How should I fix it? and what changes do I need in c

Solution 1:

Add width:100% and position : absolute and bottom: 0px

#footer {
    width: 100%;
    height: 60px;
    background-color: #f5f5f5;
    bottom: 0px;
    position: absolute;
}

OUTPUT

enter image description here

position:fixed would work just fine in this case

Solution 2:

You should use CSS's calc() function in min-height property. And wrap the .col-md-8 and .col-md-4 inside a parent div (.main-content in my case). Like,

In HTML:

<divid="wrap"><nav>...</nav><divclass="main-content"><divclass="container-fluid">...</div></div><footer>...</footer></div>

In CSS:

.main-content {
  min-height: calc(100vh - 136px); /* Total viewport height - (height of navbar + height of footer) */
}

Have a look at the snippet below (use full preview):

/* Sticky footer styles
-------------------------------------------------- */html,
body {
  height: 100%;
  /* The html and body elements cannot have any padding or margin. */
}

/* Wrapper for page content to push down footer */#wrap {}

.main-content {
  min-height: calc(100vh - 136px);
}

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

.navbar { margin-bottom: 20px; }

.card {
        margin: 0 auto; /* Added */float: none; /* Added */margin-bottom: 10px; /* Added */
}

.table.no-bordertrtd, .table.no-bordertrth {
  border-width: 0;
}
<!DOCTYPE html><htmlxmlns="http://www.w3.org/1999/xhtml"><head><title>Cart</title><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge" /><metahttp-equiv="Content-Language"content="en-us"><metaname="viewport"content="width=device-width, initial-scale=1"><linkrel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb"crossorigin="anonymous"><linkrel="stylesheet"href="https://use.fontawesome.com/1061ab0407.css"><scriptsrc="https://code.jquery.com/jquery-3.2.1.min.js"type="text/javascript"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh"crossorigin="anonymous"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ"crossorigin="anonymous"></script></head><body><divid="wrap"><navclass="navbar navbar-expand-lg navbar-light bg-light"><aclass="navbar-brand"href="#">Brand</a><buttonclass="navbar-toggler"type="button"data-toggle="collapse"data-target="#navbarNavDropdown"aria-controls="navbarNavDropdown"aria-expanded="false"aria-label="Toggle navigation"><spanclass="navbar-toggler-icon"></span></button><divclass="collapse navbar-collapse"id="navbarNavDropdown"><ulclass="navbar-nav ml-auto"><liclass="nav-item active dropdown"><aclass="nav-link dropdown-toggle"href="#"id="navbarDropdownMenuLink"data-toggle="dropdown"aria-haspopup="true"aria-expanded="false">
          Dropdown link
        </a><divclass="dropdown-menu dropdown-menu-right"aria-labelledby="navbarDropdownMenuLink"><aclass="dropdown-item"href="#">Action</a><aclass="dropdown-item"href="#">Another action</a><aclass="dropdown-item"href="#">Something else here</a></div></li></ul></div></nav><divclass="main-content"><divclass="container-fluid"><!-- header --><divclass="row"><divclass="col-md-8"><divclass="card bg-light mb-3"><tableclass="table"><thead><tr><th>Product</th><th>Price</th><th>Quantity</th></tr></thead><tbody><tr><td>blah1</td><td>$12.10</td><td><formaction="/new/cart/100"method="post"class="form-inline"><inputtype="text"name="quantity"value="1"size="6"class="form-control input-sm"><inputtype="hidden"name="item"value="2"><inputtype="submit"value="Update"class="btn btn-primary btn-sm"><inputtype="submit"name="remove"value="Remove"class="btn btn-danger btn-sm"></form></td></tr></tbody></table></div></div><divclass="col-md-4"><divclass="card bg-light mb-3"><h4class="card-title">Cart summary</h4><ulclass="list-group list-group-flush"><liclass="list-group-item">Total</li><liclass="list-group-item">$17.60</li><liclass="list-group-item">Coupon
<formaction="/new/cart/100"method="post"class="form-inline"><inputtype="text"name="coupon"value=""size="10"class="form-control input-sm"><inputtype="submit"value="Update"class="btn btn-primary btn-sm"></form></li></ul><ahref="/coursecode1/slim/public/order"class="btn btn-default">Checkout</a><!-- /div --></div></div><!-- footer --></div></div></div><divid="footer"><divclass="container"><center>All Rights Reserved.</center></div></div></body></html>

Hope this helps!

Solution 3: 

#footer {
  height: 60px;
  background-color: #f5f5f5;
    position: fixed;
    bottom: 0;
}

Actually the elegant way is using Js or jQuery.

Solution 4:

Here is what that worked for me,

<footer><pclass="text-center bg-dark text-white p-2 mb-0">Copyright 1990-2020 by Data. All Rights Reserved.</p></footer>

In the above code, the thing which is just creating difference is mb-0, In Bootstrap 4, mb stands for margin bottom. By writing mb-0 we are assigning as margin from bottom is 0dp.

Post a Comment for "How To Remove Gap After Footer In Bootstrap 4?"