diff --git a/packages/web-twig/src/Resources/components/Breadcrumbs/Breadcrumbs.twig b/packages/web-twig/src/Resources/components/Breadcrumbs/Breadcrumbs.twig
index 5cbffe31a2..bdaff80f97 100644
--- a/packages/web-twig/src/Resources/components/Breadcrumbs/Breadcrumbs.twig
+++ b/packages/web-twig/src/Resources/components/Breadcrumbs/Breadcrumbs.twig
@@ -6,6 +6,9 @@
 
 {# Class names #}
 {%- set _rootClassName = _spiritClassPrefix ~ 'Breadcrumbs' -%}
+{%- set _displayNoneClassName = _spiritClassPrefix ~ 'd-none' -%}
+{%- set _displayTabletNoneClassName = _spiritClassPrefix ~ 'd-tablet-none' -%}
+{%- set _displayTabletFlexClassName = _spiritClassPrefix ~ 'd-tablet-flex' -%}
 
 {# Miscellaneous #}
 {%- set _styleProps = useStyleProps(props) -%}
@@ -22,12 +25,12 @@
         <ol>
             {% for item in _items %}
                 {% if loop.index is same as(_items|length - 1) and _goBackTitle is not same as('') %}
-                    <li class="d-tablet-none">
+                    <li class="{{ _displayTabletNoneClassName }}">
                         <Icon name="chevron-left" />
                         <Link href="{{ item.url }}" color="primary" isUnderlined>{{ _goBackTitle }}</Link>
                     </li>
                 {% endif %}
-                <li class="d-none d-tablet-flex">
+                <li class="{{ [_displayNoneClassName, _displayTabletFlexClassName] | join(' ') }}">
                     {% if loop.index0 is not same as(0) %}
                         <Icon name="chevron-right" />
                     {% endif %}