The footer works fine on Desktops, but I'll it to change the column size when its in sm breakpoint. The class I use now for footer is,

<div class="col-md-4"></div>

What with class="col-md-4" to come in Smartphone,

Therefore i'll it to change to

<div class="col-md-3"></div>

When the breakpoint is on sm.

Because with this class to come what i to want,

I try to change the file footer.html.twig from Shopware. I working with my selb new Thema. I try to change the file from Line 66 with the block name {% block layout_footer_navigation_columns %}. Because Shopware 6 on footer gibe only the possibity to have 3 Columns, i to change for 4 with col-12 col-lg-4. That problem is what to say above, it working on Desktop but not on small display (Smartphone). How to see my file,

{% block layout_footer_navigation_columns %}
    {{ parent() }}
        <div class="col-md-4 footer-column js-footer-column">
            <div class="col-12 col-lg-4">
                    <div class="footer-box-trustpilot">
                    </div>      
            </div>    
            <div class="row">
                <div class="col-12 ">
                    <div class="">
                    </div> 
                </div>    
            </div>
        </div>
             <div class="footer-bottom">
                   <div class="container">
                    </div>
                       <div class="footer-vat">
                       </div>
                       <div class="footer-copyright">
                        <div class="fotter-adresse">
                        </div>
                        <div class="telepone-email">
                       </div>
             </div>
 {% endblock %} 

The footer works fine on Desktops, but I'll it to change the column size when its in sm breakpoint. The class I use now for footer is,

<div class="col-md-4"></div>

What with class="col-md-4" to come in Smartphone,

Therefore i'll it to change to

<div class="col-md-3"></div>

When the breakpoint is on sm.

Because with this class to come what i to want,

I try to change the file footer.html.twig from Shopware. I working with my selb new Thema. I try to change the file from Line 66 with the block name {% block layout_footer_navigation_columns %}. Because Shopware 6 on footer gibe only the possibity to have 3 Columns, i to change for 4 with col-12 col-lg-4. That problem is what to say above, it working on Desktop but not on small display (Smartphone). How to see my file,

{% block layout_footer_navigation_columns %}
    {{ parent() }}
        <div class="col-md-4 footer-column js-footer-column">
            <div class="col-12 col-lg-4">
                    <div class="footer-box-trustpilot">
                    </div>      
            </div>    
            <div class="row">
                <div class="col-12 ">
                    <div class="">
                    </div> 
                </div>    
            </div>
        </div>
             <div class="footer-bottom">
                   <div class="container">
                    </div>
                       <div class="footer-vat">
                       </div>
                       <div class="footer-copyright">
                        <div class="fotter-adresse">
                        </div>
                        <div class="telepone-email">
                       </div>
             </div>
 {% endblock %} 

• sass
• breakpoints
• shopware6

• the question shows lots of misunderstanding to the point it's not even clear if you know of the class attribute at all. Because that's all you would need to do. Bootstrap Grid system – Diego D Commented Mar 12 at 10:30

1 Answer 1

I think you misunderstood the Bootstrap Grid System and you don't need to change the SCSS.

It is a mobile-first-approach grid system. As the documentation said:

Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, six default responsive tiers, Sass variables and mixins, and dozens of predefined classes.

So you need to define the default column size inside the class. For example:

<div class="col-12 col-md-3"></div>

Why col-md-3, not col-md-4?

Explanation:

Bootstrap Grid System consists of 12 columns in a row. So when you want to make a column take the entire row size, you need to set the class to col-12 because it is mobile-first. And from that, you scale up the screen size to medium and add the class col-md-3. I see that you are using 4 columns in a row. So you need to set the individual column to 3 because 3 times 4 columns equals to 12 (the entire row size).

So the code will look something like this:

<div class="col-12 col-md-3">
  Service-Hotline
  <!-- Remaining content -->
</div>

<div class="col-12 col-md-3">
  Informationen
  <!-- Remaining content -->
</div>

<div class="col-12 col-md-3">
  Services
  <!-- Remaining content -->
</div>

<div class="col-12 col-md-3">
  Trustpilot
  <!-- Remaining content -->
</div>

Don't fet to wrap it inside a container and a row.

Hope this help.