bootstrap layout not laying out images horizontally

[luke_mersh]

I have added bootstrap 4 link in header and applied bootstrap 4 grid to images on front page but they are not displaying properly and in the code Mage2 seems to remove a closing <div> from the code.

<h1 style="text-align: center;"><img src="{{media url="temp-logo3.jpg"}}" alt="" width="1180" height="276"></h1>
<h1 style="text-align: center;">Furniture for outdoor living</h1>
<p>&nbsp;</p>
<h3 style="text-align: center;"><strong>Shop by Category</strong></h3>
<div class="container-fluid">
<div class="row">
<div class="><img src="{{media url="catalog/IMG-20191118-WA0027.jpg"}}" alt="" width="400" height="300"></div>
<h3>{{widget type="Magento\Cms\Block\Widget\Page\Link" anchor_text="Corner Sofas" template="widget/link/link_block.phtml" page_id="5"}}</h3>
<div class="col-sm"><img src="{{media url="catalog/IMG-20191118-WA0020.jpg"}}" alt="" width="400" height="300"></div>
<h3>{{widget type="Magento\Cms\Block\Widget\Page\Link" anchor_text="Dining Sets" template="widget/link/link_block.phtml" page_id="6"}}</h3>
<div class="col-sm"><img src="{{media url="catalog/IMG-20191118-WA0016.jpg"}}" alt="" width="400" height="300"></div>
<h3>{{widget type="Magento\Cms\Block\Widget\Page\Link" anchor_text="Garden Furniture" template="widget/link/link_block.phtml" page_id="7"}}</h3>
</div>// this is the div tag that seems to get removed
</div>
<h3 style="text-align: center;">New In</h3>
<p style="text-align: center;">{{widget type="Magento\Catalog\Block\Product\Widget\NewWidget" display_type="new_products" show_pager="0" products_count="6" template="product/widget/new/content/new_grid.phtml"}}</p>
<p style="text-align: center;">&nbsp;</p>

[Rahul Gupta · Accepted solution]

@luke_mersh there are few things which are not correct in this code.

I have made changes so try by using this modified code.

<h1 style="text-align: center;">
   <img src="{{media url="temp-logo3.jpg"}}" alt="" width="1180" height="276">
</h1>
<h1 style="text-align: center;"> 
   Furniture for outdoor living
</h1>
<p>&nbsp;</p>
<h3 style="text-align: center;">
   <strong>Shop by Category</strong>
</h3>
<div class="container-fluid">
   <div class="row">
       <div class="col-sm"><img src="{{media url='catalog/IMG-20191118-WA0027.jpg'}}" alt="" width="400" height="300"></div>
       <h3>{{widget type="Magento\Cms\Block\Widget\Page\Link" anchor_text="Corner Sofas" template="widget/link/link_block.phtml" page_id="5"}}</h3>
       <div class="col-sm"><img src="{{media url='catalog/IMG-20191118-WA0020.jpg'}}" alt="" width="400" height="300"></div>
       <h3>{{widget type="Magento\Cms\Block\Widget\Page\Link" anchor_text="Dining Sets" template="widget/link/link_block.phtml" page_id="6"}}</h3>
       <div class="col-sm"><img src="{{media url='catalog/IMG-20191118-WA0016.jpg'}}" alt="" width="400" height="300"></div>
      <h3>{{widget type="Magento\Cms\Block\Widget\Page\Link" anchor_text="Garden Furniture" template="widget/link/link_block.phtml" page_id="7"}}</h3>
    </div>// this is the div tag that seems to get removed
</div>
<h3 style="text-align: center;">New In</h3>
<p style="text-align: center;">{{widget type="Magento\Catalog\Block\Product\Widget\NewWidget" display_type="new_products" show_pager="0" products_count="6" template="product/widget/new/content/new_grid.phtml"}}</p>
<p style="text-align: center;">&nbsp;</p>

Thanks

[luke_mersh]

would be nice if you could have mentioned what changes you have made.

many thanks

[luke_mersh]

Hi that code didnt work for me, unfortunately.

[Rahul Gupta]

@luke_mersh if you compare both code you can find the changes like at one you have not mentioned class but left it with " and in many places you have used double quotes inside double quotes.

If you have used my code then after using it please clear the cache and then check the results.

Thanks

[luke_mersh]

thank you just got to make the links appear below the widgets.

[Rahul Gupta]

@luke_mersh if you have find it useful then "Accept it as a Solution" so that it will be useful for someone who is facing the same issue.

Thanks

[luke_mersh]

for some reason when you changed the code  the widgets got moved to the side of the image and not below the image.

[Rahul Gupta]

@luke_mersh so what you exactly wanted?

[luke_mersh]

we are nearly there- many thanks

so this is what I am trying to achieve

__________________________________

IMG      IMG    IMG

link       link     link

many thanks