Not really sure why the sticky footer isn&#39;t working in Bootstrap 4.   I have a TYPO3 website which I am a beginner at.

The sticky footer is not sticking at the bottom of the page.

Here is a copy of the page source as it has been rendered.

I basically copied the html file from bootstraps docs folder and then modified it and copied it into my TYPO3 template.

If I fill the page with content, the footer does not stick - I have to scroll the page down to see it.

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-html --&gt;

    &lt;!DOCTYPE html&gt;
    &lt;html lang=&quot;en&quot;&gt;
    &lt;head&gt;
    &lt;meta charset=&quot;utf-8&quot;&gt;

    &lt;title&gt;Landing Page&lt;/title&gt;
    &lt;meta name=&quot;generator&quot; content=&quot;TYPO3 CMS&quot;&gt;

    &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot;
    	href=&quot;/typo3temp/assets/css/d42b6e1bdf.css?1507853162&quot; media=&quot;all&quot;&gt;
    &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot;
    	href=&quot;/fileadmin/templates/landing_page/css/bootstrap.min.css?1507860230&quot;
    	media=&quot;all&quot;&gt;
    &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot;
    	href=&quot;/fileadmin/templates/landing_page/css/sticky-footer.css?1507861966&quot;
    	media=&quot;all&quot;&gt;

    &lt;script
    	src=&quot;/fileadmin/templates/landing_page/js/jquery-3.2.1.min.js?1507862465&quot;
    	type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
    &lt;script
    	src=&quot;/fileadmin/templates/landing_page/js/tether.min.js?1507862602&quot;
    	type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
    &lt;script
    	src=&quot;/fileadmin/templates/landing_page/js/bootstrap.min.js?1507854311&quot;
    	type=&quot;text/javascript&quot;&gt;&lt;/script&gt;

    &lt;/head&gt;
    &lt;body&gt;
    	&lt;div class=&quot;container&quot;&gt;
    		&lt;div class=&quot;mt-1&quot;&gt;
    			&lt;h1&gt;Sticky footer&lt;/h1&gt;
    		&lt;/div&gt;
    		&lt;p class=&quot;lead&quot;&gt;Pin a fixed-height footer to the bottom of the
    			viewport in desktop browsers with this custom HTML and CSS.&lt;/p&gt;
    		&lt;p&gt;
    			Use &lt;a href=&quot;../sticky-footer-navbar&quot;&gt;the sticky footer with a
    				fixed navbar&lt;/a&gt; if need be, too.
    		&lt;/p&gt;
    		&lt;div class=&quot;row&quot;&gt;
    			&lt;div class=&quot;col&quot;&gt;1 of 3&lt;/div&gt;
    			&lt;div class=&quot;col&quot;&gt;1 of 3&lt;/div&gt;
    			&lt;div class=&quot;col&quot;&gt;1 of 3&lt;/div&gt;
    		&lt;/div&gt;
    	&lt;/div&gt;

    	&lt;footer class=&quot;footer&quot;&gt;
    		&lt;div class=&quot;container&quot;&gt;
    			&lt;span class=&quot;text-muted&quot;&gt;Place sticky footer content here.&lt;/span&gt;
    		&lt;/div&gt;
    	&lt;/footer&gt;
    &lt;/body&gt;
    &lt;/html&gt;

&lt;!-- end snippet --&gt;



All Typo3 Solutions on Gang of Coders

Total of 1 Typo3 Solutions

Bootstrap 4 Sticky Footer Not Sticking