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/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..7a1f7b64a 100644
--- a/web_widget_one2many_product_picker/static/description/index.html
+++ b/web_widget_one2many_product_picker/static/description/index.html
@@ -377,10 +377,10 @@ 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="#usage" id="id7">Usage</a><ul>
 <li><a class="reference internal" href="#preview" id="id8">Preview:</a></li>
 </ul>
 </li>
@@ -562,18 +562,14 @@ 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>
-<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>
-<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>
+<h1><a class="toc-backref" href="#id7">Usage</a></h1>
 <div class="section" id="preview">
 <h2><a class="toc-backref" href="#id8">Preview:</a></h2>
 <blockquote>
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"