diff --git a/web_widget_one2many_product_picker/README.rst b/web_widget_one2many_product_picker/README.rst
index 418951d79..0587024f2 100644
--- a/web_widget_one2many_product_picker/README.rst
+++ b/web_widget_one2many_product_picker/README.rst
@@ -177,6 +177,13 @@ Other example for 'purchase.order.line' fields:
         </form>
     </field>
 
+
+Boostrap Modifications:
+~~~~~~~~~~~~~~~~~~~~~~~
+
+The product picker view container have a custom media queries space adding a new screen size called 'xxl' (>= 1440px) and modifies the columns to have 24 instead of 12.
+This means that you can use "col-xxl-" inside the product picker view container.
+
 Usage
 =====
 
diff --git a/web_widget_one2many_product_picker/__manifest__.py b/web_widget_one2many_product_picker/__manifest__.py
index 1d5a0ea24..bfad69a83 100644
--- a/web_widget_one2many_product_picker/__manifest__.py
+++ b/web_widget_one2many_product_picker/__manifest__.py
@@ -4,7 +4,7 @@
 {
     'name': 'Web Widget One2Many Product Picker',
     'summary': 'Widget to select products on one2many fields',
-    'version': '12.0.2.0.0',
+    'version': '12.0.2.1.0',
     'category': 'Website',
     'author': "Tecnativa, "
               "Odoo Community Association (OCA)",
diff --git a/web_widget_one2many_product_picker/readme/CONFIGURE.rst b/web_widget_one2many_product_picker/readme/CONFIGURE.rst
index 3fd01a9b4..1e5f8698b 100644
--- a/web_widget_one2many_product_picker/readme/CONFIGURE.rst
+++ b/web_widget_one2many_product_picker/readme/CONFIGURE.rst
@@ -134,3 +134,10 @@ Other example for 'purchase.order.line' fields:
             <field name="product_uom" class="mb-2" options="{'no_open': True, 'no_create': True, 'no_edit': True}" />
         </form>
     </field>
+
+
+Boostrap Modifications:
+~~~~~~~~~~~~~~~~~~~~~~~
+
+The product picker view container have a custom media queries space adding a new screen size called 'xxl' (>= 1440px) and modifies the columns to have 24 instead of 12.
+This means that you can use "col-xxl-" inside the product picker view container.
diff --git a/web_widget_one2many_product_picker/static/description/index.html b/web_widget_one2many_product_picker/static/description/index.html
index 941f4dc72..18ba5686e 100644
--- a/web_widget_one2many_product_picker/static/description/index.html
+++ b/web_widget_one2many_product_picker/static/description/index.html
@@ -377,19 +377,20 @@ ul.auto-toc {
 <li><a class="reference internal" href="#widget-options" id="id3">Widget options:</a></li>
 <li><a class="reference internal" href="#default-context" id="id4">Default context:</a></li>
 <li><a class="reference internal" href="#examples" id="id5">Examples:</a></li>
+<li><a class="reference internal" href="#boostrap-modifications" id="id6">Boostrap Modifications:</a></li>
 </ul>
 </li>
-<li><a class="reference internal" href="#usage" id="id6">Usage</a><ul>
-<li><a class="reference internal" href="#parts-of-the-widget" id="id7">Parts of the widget:</a></li>
-<li><a class="reference internal" href="#preview" id="id8">Preview:</a></li>
+<li><a class="reference internal" href="#usage" id="id7">Usage</a><ul>
+<li><a class="reference internal" href="#parts-of-the-widget" id="id8">Parts of the widget:</a></li>
+<li><a class="reference internal" href="#preview" id="id9">Preview:</a></li>
 </ul>
 </li>
-<li><a class="reference internal" href="#known-issues-roadmap" id="id9">Known issues / Roadmap</a></li>
-<li><a class="reference internal" href="#bug-tracker" id="id10">Bug Tracker</a></li>
-<li><a class="reference internal" href="#credits" id="id11">Credits</a><ul>
-<li><a class="reference internal" href="#authors" id="id12">Authors</a></li>
-<li><a class="reference internal" href="#contributors" id="id13">Contributors</a></li>
-<li><a class="reference internal" href="#maintainers" id="id14">Maintainers</a></li>
+<li><a class="reference internal" href="#known-issues-roadmap" id="id10">Known issues / Roadmap</a></li>
+<li><a class="reference internal" href="#bug-tracker" id="id11">Bug Tracker</a></li>
+<li><a class="reference internal" href="#credits" id="id12">Credits</a><ul>
+<li><a class="reference internal" href="#authors" id="id13">Authors</a></li>
+<li><a class="reference internal" href="#contributors" id="id14">Contributors</a></li>
+<li><a class="reference internal" href="#maintainers" id="id15">Maintainers</a></li>
 </ul>
 </li>
 </ul>
@@ -562,34 +563,39 @@ options=&quot;{'search': [{'name': _('Starts With'), 'domain': [('name', '=like'
 <span class="nt">&lt;/field&gt;</span>
 </pre>
 </div>
+<div class="section" id="boostrap-modifications">
+<h2><a class="toc-backref" href="#id6">Boostrap Modifications:</a></h2>
+<p>The product picker view container have a custom media queries space adding a new screen size called ‘xxl’ (&gt;= 1440px) and modifies the columns to have 24 instead of 12.
+This means that you can use “col-xxl-” inside the product picker view container.</p>
+</div>
 </div>
 <div class="section" id="usage">
-<h1><a class="toc-backref" href="#id6">Usage</a></h1>
+<h1><a class="toc-backref" href="#id7">Usage</a></h1>
 <p>When you change the value of a field and switch to edit another record, the
 changes will be applied to the previous record without having to click on
 accept changes.</p>
 <div class="section" id="parts-of-the-widget">
-<h2><a class="toc-backref" href="#id7">Parts of the widget:</a></h2>
+<h2><a class="toc-backref" href="#id8">Parts of the widget:</a></h2>
 <blockquote>
 <img alt="https://raw.githubusercontent.com/OCA/web/12.0/web_widget_one2many_product_picker/static/img/product_picker_anat.png" src="https://raw.githubusercontent.com/OCA/web/12.0/web_widget_one2many_product_picker/static/img/product_picker_anat.png" />
 </blockquote>
 </div>
 <div class="section" id="preview">
-<h2><a class="toc-backref" href="#id8">Preview:</a></h2>
+<h2><a class="toc-backref" href="#id9">Preview:</a></h2>
 <blockquote>
 <img alt="https://raw.githubusercontent.com/OCA/web/12.0/web_widget_one2many_product_picker/static/img/product_picker.gif" src="https://raw.githubusercontent.com/OCA/web/12.0/web_widget_one2many_product_picker/static/img/product_picker.gif" />
 </blockquote>
 </div>
 </div>
 <div class="section" id="known-issues-roadmap">
-<h1><a class="toc-backref" href="#id9">Known issues / Roadmap</a></h1>
+<h1><a class="toc-backref" href="#id10">Known issues / Roadmap</a></h1>
 <ul class="simple">
 <li>Translations in the xml ‘options’ attribute of the field that use the widget can’t be exported automatically to be translated</li>
 <li>The product card animations can be improved. Currently the card is recreated, so we lost some elements to apply correct effects.</li>
 </ul>
 </div>
 <div class="section" id="bug-tracker">
-<h1><a class="toc-backref" href="#id10">Bug Tracker</a></h1>
+<h1><a class="toc-backref" href="#id11">Bug Tracker</a></h1>
 <p>Bugs are tracked on <a class="reference external" href="https://github.com/OCA/web/issues">GitHub Issues</a>.
 In case of trouble, please check there if your issue has already been reported.
 If you spotted it first, help us smashing it by providing a detailed and welcomed
@@ -597,15 +603,15 @@ If you spotted it first, help us smashing it by providing a detailed and welcome
 <p>Do not contact contributors directly about support or help with technical issues.</p>
 </div>
 <div class="section" id="credits">
-<h1><a class="toc-backref" href="#id11">Credits</a></h1>
+<h1><a class="toc-backref" href="#id12">Credits</a></h1>
 <div class="section" id="authors">
-<h2><a class="toc-backref" href="#id12">Authors</a></h2>
+<h2><a class="toc-backref" href="#id13">Authors</a></h2>
 <ul class="simple">
 <li>Tecnativa</li>
 </ul>
 </div>
 <div class="section" id="contributors">
-<h2><a class="toc-backref" href="#id13">Contributors</a></h2>
+<h2><a class="toc-backref" href="#id14">Contributors</a></h2>
 <ul>
 <li><p class="first"><a class="reference external" href="https://www.tecnativa.com">Tecnativa</a>:</p>
 <blockquote>
@@ -619,7 +625,7 @@ If you spotted it first, help us smashing it by providing a detailed and welcome
 </ul>
 </div>
 <div class="section" id="maintainers">
-<h2><a class="toc-backref" href="#id14">Maintainers</a></h2>
+<h2><a class="toc-backref" href="#id15">Maintainers</a></h2>
 <p>This module is maintained by the OCA.</p>
 <a class="reference external image-reference" href="https://odoo-community.org"><img alt="Odoo Community Association" src="https://odoo-community.org/logo.png" /></a>
 <p>OCA, or the Odoo Community Association, is a nonprofit organization whose
diff --git a/web_widget_one2many_product_picker/static/src/scss/main_variables.scss b/web_widget_one2many_product_picker/static/src/scss/main_variables.scss
new file mode 100644
index 000000000..159cf8450
--- /dev/null
+++ b/web_widget_one2many_product_picker/static/src/scss/main_variables.scss
@@ -0,0 +1,6 @@
+$one2many-product-picker-grid-breakpoints: map-merge(
+    $grid-breakpoints,
+  (
+    xxl: 1440px,
+  )
+);
diff --git a/web_widget_one2many_product_picker/static/src/scss/one2many_product_picker.scss b/web_widget_one2many_product_picker/static/src/scss/one2many_product_picker.scss
index 1ea12b6f6..cea673860 100644
--- a/web_widget_one2many_product_picker/static/src/scss/one2many_product_picker.scss
+++ b/web_widget_one2many_product_picker/static/src/scss/one2many_product_picker.scss
@@ -45,6 +45,8 @@
     }
 
     .oe_one2many_product_picker_view {
+        @include make-grid-columns($columns: 24, $breakpoints: $one2many-product-picker-grid-breakpoints);
+
         overflow: auto;
 
         > .row {
diff --git a/web_widget_one2many_product_picker/static/src/xml/one2many_product_picker.xml b/web_widget_one2many_product_picker/static/src/xml/one2many_product_picker.xml
index d7eaf63b8..aae2d01c7 100644
--- a/web_widget_one2many_product_picker/static/src/xml/one2many_product_picker.xml
+++ b/web_widget_one2many_product_picker/static/src/xml/one2many_product_picker.xml
@@ -69,7 +69,7 @@
     </t>
 
     <t t-name="One2ManyProductPicker.FlipCard">
-        <div class="oe_flip_container p-1 col-4 col-sm-4 col-md-2 col-lg-2 col-xl-1">
+        <div class="oe_flip_container p-1 col-12 col-sm-8 col-md-6 col-lg-4 col-xl-3 col-xxl-2">
             <div t-attf-class="oe_flip_card {{!state &amp;&amp; 'disabled' || ''}}">
                 <div class="oe_flip_card_inner text-center">
                     <div t-attf-class="oe_flip_card_front p-0 {{(modified &amp;&amp; 'border-warning') || (state &amp;&amp; !is_virtual &amp;&amp; 'border-success') || ''}}">
diff --git a/web_widget_one2many_product_picker/templates/assets.xml b/web_widget_one2many_product_picker/templates/assets.xml
index 0ebee880a..3c476236a 100644
--- a/web_widget_one2many_product_picker/templates/assets.xml
+++ b/web_widget_one2many_product_picker/templates/assets.xml
@@ -7,6 +7,12 @@
         </xpath>
     </template>
 
+    <template id="_assets_bootstrap" inherit_id="web._assets_bootstrap">
+        <xpath expr="link[2]">
+          <link type="text/css" rel="stylesheet" href="/web_widget_one2many_product_picker/static/src/scss/main_variables.scss"/>
+        </xpath>
+    </template>
+
     <template id="assets_backend" name="account assets" inherit_id="web.assets_backend">
         <xpath expr="." position="inside">
             <link type="text/css" rel="stylesheet"