Converting Bootstrap 4 to WordPress using ACF

• tonylees

• March 3, 2019 at 7:23 pm

Hi there,

I am having some trouble converting a section of a Bootstrap 4 website using ACF.

What I would like to acheive is Wysiwyg text to the left & an image to the right, my code is;

    <div class="row" style="background: #283891; color:fff; padding:20px 0;">
		<div class="container">
      <div class="col-lg-6" style="float: left;color: #999; margin-top:40px;">
        <?php echo $home_page_text; ?>
      </div>
      <div class="col-lg-6" style="float: left;">
		  
		  <?php
			  
			  if( !empty($image_1)) : ?>
			  <img class="img-fluid rounded"  src="<?php echo $intro_image['url']; ?>" alt="<?php echo $intro_image['alt']; ?>">
			  <?php endif; ?>
        
      </div>
    </div>
</div>

The problem with this is the text area is then place in a smaller section, col-lg-6 appears to be duplicated… if I remove class=”col-lg-6″ from the text section the width is correct but the image sits underneath the text… if I remove class=”col-lg-6″ from the image section there is no change… also if I add the image to the same div as the text, no change.

Your advice would be appreciated.

Thanks
Tony

• John Huebner

• March 4, 2019 at 2:26 am

I would suggest looking at the bootstrap documentation more closely, Or direct your question to a forum that is about bootstrap. Your nesting of elements in incorrect. You also do not need to supply any type of float styles when using bootstrap as the col classes manage this for you.

Some basic bootstrap markup for 2 columns

<div class="container">
  <div class="row">
    <div class="col-lg-6">
      Text Here
    </div>
    <div class="col-lg-6">
      Image Here
    </div>
  </div>
</div>

What you have will only make 2 columns on large screens >= 992 pixels. On smaller screens they will stack.