CODEWITHSUNDEEP
htmlcsswordpresstwitter-bootstrapfooter
Niight Shadows
Niight Shadows

Reputation: 19

Keeping footer at the bottom with Bootstrap on Wordpress

I'm trying to keep the footer I've done with Bootstrap on the bottom of the page. I've tried some solutions written on the net, yet no one worked or if it did, it'd mess all my footer (or entire page) up. That's my footer.php file rn:

<footer>
	<div class="container-fluid" style="padding-bottom:22px;">
		<div class="row">
			<div class="col-4" align="center">
				<h4> RANDOM </h4>
				<p>
					<strong>Lorem</strong>: <br>
					Lorem Ipsum 00 <br>
					0000 Text <br>
					<strong>Tel</strong>: <a href="tel: +101234567"> +1.01234567 </a>
				</p>
			</div>
			<div class="col-4" align="center">
				<h4> RANDOM </h4>
				<p>
					<strong>Text</strong>: <br>
					12:00 - 16:00 / 18:30 - 00:00 <br>
					<strong>Text</strong> <br>
					12:00 - 16:00 / 18:30 - 00:00
				</p>
			</div>
			<div class="col-4" align="center">
				<h4> SOCIAL NETWORK </h4>
				<a href="#" target="_blank"> <i class="fab fa-facebook fa-2x" style="color: #333333;"></i> </a>
			</div>
		</div>
	</div>
	
	<div class="container-fluid bg-light" align="center" style="padding-top:22px; padding-bottom:22px;">
		<p style="font-family: lato; font-size: 14px; color: #515050; display: table-cell; vertical-align: middle;">
			©Random • Sample, Text • Tel: +1 01234567 • <a href="#" target="_blank">Privacy Policy</a>
		</p>
	</div>
</footer>

<?php wp_footer(); ?>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

</body>
</html>

Upvotes: 1

Views: 747

Answers (2)

Alireza
Alireza

Reputation: 7

make sure that you had inserted the get_footer() in index.php file instead of wp_footer() in footer.php & its a worst way to declare scripts tag in footer load your scripts in function.php file with this methods:

function wpdocs_theme_name_scripts() {
    wp_enqueue_style( 'style-name', get_stylesheet_uri() );
    wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/example.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'wpdocs_theme_name_scripts' );

Upvotes: 0

LePhil
LePhil

Reputation: 96

Usually positioning the footer fixed would do the trick:

.your-footer-class {
    position: fixed;
    bottom: 0;
    width: 100%;
}

Which solutions have you tried?

Here's a good explanation: https://developer.mozilla.org/en-US/docs/Web/CSS/Layout_cookbook/Sticky_footers

And here are 5 ways to do it: https://css-tricks.com/couple-takes-sticky-footer/

Upvotes: 2

Related Questions