Fixed bootstrap5 cannot work bug

src/bootstrap-table.js

@@ -37,6 +37,7 @@ class BootstrapTable {
 
     this.constants = Constants.CONSTANTS
     this.constants.theme = $.fn.bootstrapTable.theme
+    this.constants.dataToggle = this.constants.html.dataToggle || 'data-toggle'
 
     const buttonsPrefix = opts.buttonsPrefix ? `${opts.buttonsPrefix}-` : ''
 
@@ -229,7 +230,7 @@ class BootstrapTable {
 
   initHeader () {
     const visibleColumns = {}
-    const html = []
+    const headerHtml = []
 
     this.header = {
       fields: [],
@@ -247,6 +248,8 @@ class BootstrapTable {
     Utils.updateFieldGroup(this.options.columns)
 
     this.options.columns.forEach((columns, i) => {
+      const html = []
+
       html.push(`<tr${Utils.sprintf(' class="%s"', this._headerTrClasses[i])} ${Utils.sprintf(' style="%s"', this._headerTrStyles[i])}>`)
 
       let detailViewTemplate = ''
@@ -364,9 +367,13 @@ class BootstrapTable {
       }
 
       html.push('</tr>')
+
+      if (html.length > 3) {
+        headerHtml.push(html.join(''))
+      }
     })
 
-    this.$header.html(html.join(''))
+    this.$header.html(headerHtml.join(''))
     this.$header.find('th[data-field]').each((i, el) => {
       $(el).data(visibleColumns[$(el).data('field')])
     })
@@ -621,7 +628,7 @@ class BootstrapTable {
           const html = []
 
           html.push(`<div class="keep-open ${this.constants.classes.buttonsDropdown}" title="${opts.formatColumns()}">
-            <button class="${this.constants.buttonsClass} dropdown-toggle" type="button" data-toggle="dropdown"
+            <button class="${this.constants.buttonsClass} dropdown-toggle" type="button" ${this.constants.dataToggle}="dropdown"
             aria-label="Columns" title="${opts.formatColumns()}">
             ${opts.showButtonIcons ? Utils.sprintf(this.constants.html.icon, opts.iconsPrefix, opts.icons.columns) : ''}
             ${opts.showButtonText ? opts.formatColumns() : ''}
@@ -1174,7 +1181,7 @@ class BootstrapTable {
 
       const pageNumber = [
         `<span class="${this.constants.classes.paginationDropdown}">
-        <button class="${this.constants.buttonsClass} dropdown-toggle" type="button" data-toggle="dropdown">
+        <button class="${this.constants.buttonsClass} dropdown-toggle" type="button" ${this.constants.dataToggle}="dropdown">
         <span class="page-size">
         ${allSelected ? opts.formatAllRows() : opts.pageSize}
         </span>

src/constants/index.js

@@ -150,6 +150,7 @@ const CONSTANTS = {
       buttonActive: 'active'
     },
     html: {
+      dataToggle: 'data-bs-toggle',
       toolbarDropdown: ['<div class="dropdown-menu dropdown-menu-right">', '</div>'],
       toolbarDropdownItem: '<label class="dropdown-item dropdown-item-marker">%s</label>',
       pageDropdown: ['<div class="dropdown-menu">', '</div>'],

src/extensions/export/bootstrap-table-export.js

@@ -106,7 +106,7 @@ $.BootstrapTable = class extends $.BootstrapTable {
             <div class="export ${this.constants.classes.buttonsDropdown}">
             <button class="${this.constants.buttonsClass} dropdown-toggle"
             aria-label="Export"
-            data-toggle="dropdown"
+            ${this.constants.dataToggle}="dropdown"
             type="button"
             title="${o.formatExport()}">
             ${o.showButtonIcons ? Utils.sprintf(this.constants.html.icon, o.iconsPrefix, o.icons.export) : ''}

src/extensions/multiple-sort/bootstrap-table-multiple-sort.js

@@ -144,9 +144,7 @@ const theme = {
             <div class="modal-content">
               <div class="modal-header">
                 <h5 class="modal-title" id="%sLabel">%s</h5>
-                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                  <span aria-hidden="true">&times;</span>
-                </button>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
               </div>
               <div class="modal-body">
                 <div class="bootstrap-table">
@@ -173,14 +171,14 @@ const theme = {
                     </div>
               </div>
               <div class="modal-footer">
-                <button type="button" class="btn btn-secondary" data-dismiss="modal">%s</button>
+                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">%s</button>
                 <button type="button" class="btn btn-primary multi-sort-order-button">%s</button>
               </div>
             </div>
           </div>
         </div>
       `,
-      multipleSortButton: '<button class="multi-sort btn btn-secondary" type="button" data-toggle="modal" data-target="#%s" title="%s">%s</button>',
+      multipleSortButton: '<button class="multi-sort btn btn-secondary" type="button" data-bs-toggle="modal" data-target="#%s" title="%s">%s</button>',
       multipleSortSelect: '<select class="%s %s form-control">'
     }
   },

src/themes/_theme.scss

@@ -353,6 +353,16 @@
       padding: .5rem 1rem;
     }
   }
+
+  &.bootstrap5 {
+    .float-left {
+      float: left;
+    }
+
+    .float-right {
+      float: right;
+    }
+  }
 }
 
 /* calculate scrollbar width */