title: Developing Custom Single Product Page in Custom Layout with WooCommerce & Bootstrap
body: <p>I am using WooCommerce in one of the project. As I am new to WooCommerce development I am getting problems as follows:</p>
  
  <p><strong>I have downloaded, installed woocommerce and copied files from it's template folder to theme root folder. I am using Bootstrap 4 and I want to layout single product page using Bootstrap.</strong> </p>
  
  <p>I want to display my single product page as : 
  <a href="https://i.stack.imgur.com/PTj6v.png" rel="nofollow noreferrer">expectation</a>
  <br />
  But What I am getting is:
  <a href="https://i.stack.imgur.com/4qRUf.jpg" rel="nofollow noreferrer">reality</a></p>
  
  <p>Here are my codes: <br />
  single-product.php : <a href="https://pastebin.com/tPVC2XFv" rel="nofollow noreferrer">https://pastebin.com/tPVC2XFv</a> </p>
  
  <pre><code>    &lt;?php
  
  if ( ! defined( 'ABSPATH' ) ) {
      exit; // Exit if accessed directly
  }
  
  get_header( 'shop' ); ?&gt;
  
      &lt;header class="page-banner product-header container-fluid"&gt;
          &lt;div class="container"&gt;
              &lt;?php if (apply_filters('woocommerce_show_page_title', true)) : ?&gt;
                  &lt;?php echo woocommerce_template_single_title(); ?&gt;
              &lt;?php endif; ?&gt;
              &lt;?php woocommerce_breadcrumb(); ?&gt;
              &lt;?php do_action('woocommerce_archive_description'); ?&gt;
          &lt;/div&gt;
      &lt;/header&gt;
  
      &lt;section class="single-product container-fluid"&gt;
          &lt;div class="container"&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-4"&gt;
                      &lt;?php
                          /**
                           * woocommerce_sidebar hook.
                           *
                           * @hooked woocommerce_get_sidebar - 10
                           */
                          do_action( 'woocommerce_sidebar' );
                      ?&gt;
                  &lt;/div&gt;
                  &lt;div class="col-8"&gt;
                      &lt;?php while ( have_posts() ) : the_post(); ?&gt;
  
                          &lt;?php wc_get_template_part( 'content', 'single-product' ); ?&gt;
  
                      &lt;?php endwhile; // end of the loop. ?&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/section&gt;
  
  &lt;?php get_footer( 'shop' );
  
  /* Omit closing PHP tag at the end of PHP files to avoid "headers already sent" issues. */
  </code></pre>
  
  <p><br />
  content-single-product.php : <a href="https://pastebin.com/2LL8YewM" rel="nofollow noreferrer">https://pastebin.com/2LL8YewM</a></p>
  
  <pre><code>&lt;?php
  /**
   * The template for displaying product content in the single-product.php template
   *
   * This template can be overridden by copying it to yourtheme/woocommerce/content-single-product.php.
   *
   * HOWEVER, on occasion WooCommerce will need to update template files and you
   * (the theme developer) will need to copy the new files to your theme to
   * maintain compatibility. We try to do this as little as possible, but it does
   * happen. When this occurs the version of the template file will be bumped and
   * the readme will list any important changes.
   *
   * @see         https://docs.woocommerce.com/document/template-structure/
   * @author      WooThemes
   * @package     WooCommerce/Templates
   * @version     3.0.0
   */
  
  if ( ! defined( 'ABSPATH' ) ) {
      exit;
  }
  
  /**
   * Hook Woocommerce_before_single_product.
   *
   * @hooked wc_print_notices - 10
   */
  do_action( 'woocommerce_before_single_product' );
  
  if ( post_password_required() ) {
      echo get_the_password_form(); // WPCS: XSS ok.
      return;
  }
  ?&gt;
  &lt;div id="product-&lt;?php the_ID(); ?&gt;" &lt;?php post_class(); ?&gt;&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-5"&gt;
              &lt;?php
                  /**
                   * Hook: woocommerce_before_single_product_summary.
                   *
                   * @hooked woocommerce_show_product_sale_flash - 10
                   * @hooked woocommerce_show_product_images - 20
                   */
                  do_action( 'woocommerce_before_single_product_summary' );
              ?&gt;
          &lt;div class="col-7"&gt;
              &lt;?php
                  /**
                   * Hook: Woocommerce_single_product_summary.
                   *
                   * @hooked woocommerce_template_single_title - 5
                   * @hooked woocommerce_template_single_rating - 10
                   * @hooked woocommerce_template_single_price - 10
                   * @hooked woocommerce_template_single_excerpt - 20
                   * @hooked woocommerce_template_single_add_to_cart - 30
                   * @hooked woocommerce_template_single_meta - 40
                   * @hooked woocommerce_template_single_sharing - 50
                   * @hooked WC_Structured_Data::generate_product_data() - 60
                   */
                  do_action( 'woocommerce_single_product_summary' );
              ?&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;?php
          /**
           * Hook: woocommerce_after_single_product_summary.
           *
           * @hooked woocommerce_output_product_data_tabs - 10
           * @hooked woocommerce_upsell_display - 15
           * @hooked woocommerce_output_related_products - 20
           */
          do_action( 'woocommerce_after_single_product_summary' );
      ?&gt;
  &lt;/div&gt;
  
  &lt;?php do_action( 'woocommerce_after_single_product' ); ?&gt;
  </code></pre>
  
  <p>I don't know what is wrong the images in product gallery slider are having inline styling so the layout is not displaying as I want. I want your proper guidance guys. I hope I will get help from awesome people like you. ;) </p>