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="col-lg-6" style="float: left;color: #999; margin-top:40px;">
<?php echo $home_page_text; ?>
<div class="col-lg-6" style="float: left;">
if( !empty($image_1)) : ?>
<img class="img-fluid rounded" src="<?php echo $intro_image['url']; ?>" alt="<?php echo $intro_image['alt']; ?>">
<?php endif; ?>
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.
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
What you have will only make 2 columns on large screens >= 992 pixels. On smaller screens they will stack.