diff --git a/templates/paragraph--bp-accordion.html.twig b/templates/paragraph--bp-accordion.html.twig
index dbcd8c3..67009b1 100644
--- a/templates/paragraph--bp-accordion.html.twig
+++ b/templates/paragraph--bp-accordion.html.twig
@@ -178,7 +178,7 @@ accordion_active ? 'paragraph--accordion_active--',
           {% endif %}
           <div class="card-header panel-heading" role="tab" id="heading-{{ paragraph_id }}-{{ key + 1 }}">
             <div class="panel-title">
-              <a class="{{ (indicator_class) }}" role="button" data-toggle="collapse" data-parent="#{{ paragraph_id }}" href="#collapse-{{ paragraph_id }}-{{ key + 1 }}" aria-expanded="{{ aria }}" aria-controls="collapse-{{ paragraph_id }}-{{ key + 1 }}">
+              <a class="{{ (indicator_class) }}" role="button" data-bs-toggle="collapse" data-bs-parent="#{{ paragraph_id }}" href="#collapse-{{ paragraph_id }}-{{ key + 1 }}" aria-expanded="{{ aria }}" aria-controls="collapse-{{ paragraph_id }}-{{ key + 1 }}">
                 {# Print the accordion section title. #}
                 {{ item['#paragraph'].bp_accordion_section_title.value }}
               </a>
diff --git a/templates/paragraph--bp-carousel.html.twig b/templates/paragraph--bp-carousel.html.twig
index 372d1e5..5f4e609 100644
--- a/templates/paragraph--bp-carousel.html.twig
+++ b/templates/paragraph--bp-carousel.html.twig
@@ -168,10 +168,10 @@ view_mode ? 'paragraph--view-mode--' ~ view_mode|clean_class,
 
 {# Prints Carousel template. #}
 {{ content|without('bp_slide_content','bp_slide_interval', 'bp_width', 'bp_background') }}
-<div{{ attributes.addClass(classes).setAttribute('id', paragraph_id).setAttribute('data-interval', slide_interval_classes).setAttribute('data-ride', 'carousel') }}>
+<div{{ attributes.addClass(classes).setAttribute('id', paragraph_id).setAttribute('data-bs-interval', slide_interval_classes).setAttribute('data-bs-ride', 'carousel') }}>
   <ol class="carousel-indicators">
     {% for key, item in content.bp_slide_content if key|first != '#' %}
-      <li class="{% if loop.first %}active{% endif %}" data-slide-to="{{ key }}" data-target="#{{ paragraph_id }}"></li>
+      <li class="{% if loop.first %}active{% endif %}" data-bs-slide-to="{{ key }}" data-bs-target="#{{ paragraph_id }}"></li>
     {% endfor %}
   </ol>
   <div class="carousel-inner" role="list">
@@ -179,11 +179,11 @@ view_mode ? 'paragraph--view-mode--' ~ view_mode|clean_class,
       <div class="paragraph--layout-slideshow__slide-{{ key + 1 }} item carousel-item{% if loop.first %} active{% endif %}" role="listitem">{{ item }}</div>
     {% endfor %}
   </div>
-  <a class="left carousel-control" href="#{{ paragraph_id }}" role="button" data-slide="prev">
+  <a class="left carousel-control" href="#{{ paragraph_id }}" role="button" data-bs-slide="prev">
     <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
     <span class="sr-only">Previous</span>
   </a>
-  <a class="right carousel-control" href="#{{ paragraph_id }}" role="button" data-slide="next">
+  <a class="right carousel-control" href="#{{ paragraph_id }}" role="button" data-bs-slide="next">
     <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
     <span class="sr-only">Next</span>
   </a>
diff --git a/templates/paragraph--bp-modal.html.twig b/templates/paragraph--bp-modal.html.twig
index 185b134..a08c561 100644
--- a/templates/paragraph--bp-modal.html.twig
+++ b/templates/paragraph--bp-modal.html.twig
@@ -154,7 +154,7 @@ view_mode ? 'paragraph--view-mode--' ~ view_mode|clean_class,
       <h2>{{ content.bp_header }}</h2>
     {% endif %}
     {# Button trigger modal #}
-    <button type="button" class="btn btn-primary btn-lg btn-modal" data-toggle="modal" data-target="#{{ paragraph_id }}">
+    <button type="button" class="btn btn-primary btn-lg btn-modal" data-bs-toggle="modal" data-bs-target="#{{ paragraph_id }}">
       {{ content.bp_modal_button_text }}
     </button>
   </div>
@@ -165,14 +165,12 @@ view_mode ? 'paragraph--view-mode--' ~ view_mode|clean_class,
   <div class="modal-dialog" role="document">
     <div class="modal-content">
       <div class="modal-header">
-        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-          <span aria-hidden="true">&times;</span>
-        </button>
         {% if content.bp_modal_title|render %}
           <div class="modal-title" id="{{ paragraph_id }}-label">
             {{ content.bp_modal_title }}
           </div>
         {% endif %}
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
       </div>
       {% if content.bp_modal_body|render %}
         <div class="modal-body">
diff --git a/templates/paragraph--bp-tabs.html.twig b/templates/paragraph--bp-tabs.html.twig
index 8b9fd0f..b8b9685 100644
--- a/templates/paragraph--bp-tabs.html.twig
+++ b/templates/paragraph--bp-tabs.html.twig
@@ -156,7 +156,7 @@ view_mode ? 'paragraph--view-mode--' ~ view_mode|clean_class,
     <ul class="nav nav-tabs" role="tablist">
       {# Loops through the tab sections to print the tab section titles. #}
       {% for key, item in content.bp_tab_section if key|first != '#' %}
-        <li role="presentation" class="{% if loop.first %}active{% endif %}"><a href="#{{ paragraph_id }}-{{ key + 1 }}" aria-controls="{{ item['#paragraph'].bp_tab_section_title.value }}" role="tab" data-toggle="tab">{{ item['#paragraph'].bp_tab_section_title.value }}</a></li>
+        <li role="presentation" class="nav-item"><a class="nav-link{% if loop.first %} active{% endif %}" href="#{{ paragraph_id }}-{{ key + 1 }}" aria-controls="{{ item['#paragraph'].bp_tab_section_title.value }}" role="tab" data-bs-toggle="tab">{{ item['#paragraph'].bp_tab_section_title.value }}</a></li>
       {% endfor %}
     </ul>
     <div class="tab-content">