Strange Bootstrap behaviour - Correct display on one page not on another

Question

I have the following code in a module placed in the footer of my site:

<div class="container-fluid">
<div class="row">
<div class="col-md-5 col-sm-5">
<p></p>
<a href="https://bestscottishcottages.co.uk/" target="_blank" rel="noopener"><img src="images/partner-logo-transparent.png" alt="partner logo transparent" width="175" height="145" style="display: block; margin-left: auto; margin-right: auto;" /></a>
<p></p>
</div>
<div class="col-md-7 col-sm-7">
<h3>Bill &amp; Sukie Barber</h3>
<p><span style="font-size: 14pt;"><a href="tel:+441450373424">{zen-phone}{/zen-phone}01450 373 424</a></span></p>
<p><span style="font-size: 14pt;"> <a href="mailto:[email protected]">{zen-envelope}{/zen-envelope}[email protected]</a></span></p>
<p><span style="font-size: 14pt;"> {zen-map-marker}{/zen-map-marker}Priestrig Croft,<br /> by Hawick<br /> TD9 7NT</span></p>
<div class="social">
<p><a href="https://www.facebook.com/Fiddle-Hill-Cottage-727153347486812/" target="_blank" rel="noopener">{zen-facebook-square}{/zen-facebook-square}</a><a href="https://www.instagram.com/fiddle_hill_cottage/" target="_blank" rel="noopener">{zen-instagram}{/zen-instagram}</a></p>
<p><a href="https://www.google.com/maps/dir/Current+Location/55.4408087,-2.8147109" target="_blank" rel="noopener" class="btn btn-green">Get directions</a></p>
</div>
</div>
</div>
</div>

On this page the image and address information are correctly displayed side by side on a landscape iPhone 6/7/8 however on this page they are displayed on top of each other. Both pages use the same module to display the information however, they do use a different variation of the same template. I for one, cannot seem to find out what is causing the difference. Could anyone please offer any advice?

Thank you in advance. Donna

Answer 1

On the first page (root), you are loading Bootstrap 4 from MaxCDN. On the second page (availability) you are loading a local version of Bootstrap 2.

You are also only loading the JS /media/jui/js/bootstrap.min.js on the availability page.

Try including Bootstrap 4 on the availability page. That should fix that problem.

Additionally, I would stop loading the Bootstrap 2 JS file on the root page. You don't need both versions 2 and 4.