How to display a related block to the full width outside the container?

Question

HTML

Hello! I have a store on wordpress + woocommerce. On the product page, I want to display a carousel with similar products, but not in the bootstrap theme container, but on the entire width of the page. Whatever position I set for the standard hook function

add_action('woocommerce_after_main_content', 'woocommerce_output_related_products');

all the same, similar products are displayed within the container. If I write a shortcode in the footer, then as I understand it, there is no link to a specific product, and with this method, there are few similar products displayed (even it is not enough to fill the entire width of the page) ..

<?php if (is_product()); ?>  
<section class="related-products">
   <?php echo do_shortcode ('[related_products per_page="4"]'); ?>
</section>
<?php endif; ?>

How to be?

Answer 1

<?php if (is_product()); ?>  
//Тут закрываете контейнер темы т.е все col-** , row, и container и прочие дивы которые надо закрыть
<div class="contayner-fluid">
<section class="related-products">
   <?php echo do_shortcode ('[related_products per_page="4"]'); ?>
</section>
</div>
Тут заново открываете  контейнер темы т.е все col-** , row, и container и прочие дивы которые надо открыть
<?php endif; ?>