Member Avatar for davy_yg

Hello,

I am trying to create a bootstrap system that is able to shift my cell downward.

Cek this out:

There is a big space between the footer and the :

Lorem ipsum dolor sit amet, consectetuer adipiscing
elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam
erat volutpat.
dolore magna aliquam

Text.

My point is the upper items (text and icons) is already fluid but it does not able to shift the footer downward.

So I wonder how to code it so that it is able to shift the footer downward.

Here is my current code:

portfolio-filter.php

<br><br><br><br>
<!-- <img src="Images/Portfolio/clients.jpg"> -->
<div id="greybar">

<div class="row">
<div class="col-sm-4"><div id="clients"><center><img src="Images/Portfolio/client1.jpg"></center></div></div>
<div class="col-sm-4"><div id="clients"><center><img src="Images/Portfolio/client2.jpg"></center></div></div>
<div class="col-sm-4"><div id="clients"><center><img src="Images/Portfolio/client3.jpg"></center></div></div>

<div class="col-sm-12">

<br><br><br><br><br><br>
<div align="center">
Lorem ipsum dolor sit amet, consectetuer adipiscing <br>elit, sed diam nonummy nibh euismod <br>tincidunt ut laoreet dolore magna aliquam<br> erat volutpat.<br>
<b>dolore magna aliquam</b><br><br>
</div>
</div>

</div>
</div>


<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>


<?php include('footer.php'); ?>
  • 2 Contributors
  • 1 Reply
  • 188 Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by Member #1112232

Dani AI

Generated

Quick diagnosis and what’s causing the gap: the page is using lots of manual <br> spacing and a deprecated <center> tag instead of relying on normal document flow and the Bootstrap grid. That makes the layout fragile — if the footer has position: fixed/absolute it won’t be pushed by content, or if preceding content uses floats the parent can collapse so the footer sits in the wrong spot. As pointed out, adding margin-top to the footer will move it, but that’s a brittle, breakpoint-sensitive hack. (css-tricks.com)

A better fix is a layout-based approach (flexbox sticky-footer) so the footer naturally sits at the bottom when content is short and is pushed down when content grows. Example (add to main stylesheet and wrap site content in a page wrapper):

html, body { height: 100%; margin: 0; }
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.site-content { flex: 1 0 auto; }   /* grows to fill space */
footer { flex-shrink: 0; }

This avoids hardcoded footer heights or manual <br> spacing. See the common sticky-footer patterns. (css-tricks.com)

Bootstrap-specific hygiene to check (these address issues visible in ’s markup): ensure every .row lives inside a .container/.container-fluid; avoid <center> in favor of .text-center; use responsive image helpers (.img-responsive in BS3 / .img-fluid in BS4+) and Bootstrap’s clearfix utility when floats are used. Also remove the large block of <br> tags and use padding/margin on the content container instead — that keeps spacing predictable across breakpoints. (getbootstrap.com)

Quick checklist to apply immediately:

  • Inspect footer’s computed position and remove position:absolute/fixed if present.
  • Remove the <br> stack; wrap content in a .site-content element and use the flexbox rules above.
  • Confirm .row → .container structure and use .img-responsive / .text-center where appropriate.
  • If floats are used, add .clearfix or ensure the parent contains them.

Following these steps will produce a robust, responsive footer that moves with the content instead of relying on brittle spacing hacks. (css-tricks.com)

Member Avatar for Member #1112232

If you want to shift the footer downward, you just apply margin-top to the #footerbar

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.