Classic theme using Bootstrap 4 alpha 4

[JulianFr]

I'm new to Prestashop but decided to try using 1.7 with the Starter Theme and Bootstrap. I read this article which said we should use Bootstrap 4 alpha 6:

http://build.prestashop.com/news/starter-theme-plans/

 

The recommended version of Bootstrap 4 for PrestaShop 1.7 is therefore Bootstrap 4 alpha 6 as of this writing (January 13th, 2017), and will be Bootstrap 4 beta 1 once it is available.

 

I tried to copy basic HTML over from the Classic theme but nothing would work correctly. After days of frustration I've now found out the problem is because the Classic theme provided with 1.7 is using Bootstrap 4 alpha 4 not alpha 6! Why tell us to use alpha 6 for developing themes but then make the default theme use alpha 4?

 

If anyone can help I have a jsfiddle showing the problem: https://jsfiddle.net/JulianF/b8u57zqf/

 

If I use a div to hide content at a small screen size then it breaks the columns widths.

Edited June 1, 2017 by JulianFr (see edit history)

[JulianFr]

I've found from the Bootstrap documentation the HTML being used in the classic theme is not valid for bootstrap. Their grid documentation says this:

 

 

 

• Content should be placed within columns, and only columns may be immediate children of rows.

 

So this HTML in the Classic theme is invalid:

  <nav class="header-nav">
    <div class="container">
        <div class="row">
          <div class="hidden-sm-down">
            <div class="col-md-4 col-xs-12">
              {hook h='displayNav1'}
            </div>
            <div class="col-md-8 right-nav">
                {hook h='displayNav2'}
            </div>
          </div>
          <div class="hidden-md-up text-xs-center mobile">
            <div class="pull-xs-left" id="menu-icon">
              <i class="material-icons d-inline"></i>
            </div>
            <div class="pull-xs-right" id="_mobile_cart"></div>
            <div class="pull-xs-right" id="_mobile_user_info"></div>
            <div class="top-logo" id="_mobile_logo"></div>
            <div class="clearfix"></div>
          </div>
        </div>
    </div>
  </nav>

[Andrej Stas]

Good observation, you are right!

 

I think you could report the problem the on forge.prestashop.com (registration required).