Use bootstrap-table with bootstrap v5

[olivier47adrian]

Hello, despite my research i couldn't find how to tell bootstrap-table that i'm using bootstrap version 5. Is there a conf to give?

[UtechtDustin]

No need to tell the bootstrap-table which bootstrap version do you use. The table will check a few constants which only exists in just one version at a time.

Which kinf of errors do you have ? Is bootstrap-table loaded after bootstrap ?

If you have issues, please provide us an example using our editor.

[olivier47adrian]

Thank you for your reply. That's what I understood about how bootstrap-table works. Unfortunately this one always tells me that my bootstrapVersion is 4. As I use bootsrap v5 well, this poses a problem, especially on dropdowns (bs-toggle) and side effects on the grid.

I am using laravel 8 and laravel-mix to compile the assets. I have downloaded bootstrap and bootstrap-table with npm. In my app.js I import theese libraries like this:

import jQuery from 'jquery';
window.jQuery = jQuery;
import 'bootstrap';
import 'bootstrap-table/dist/bootstrap-table.js';

If I try to load bootstrap + bootstrap-table through a cdn it works correctly (good detection of bootstrap v5).

So I guess the problem is my comprehension. On what is the detection of the bootstrap version based?

I also tried (to understand) to load bootstrap through a CDN and bootstrap-table by npm + laravel-mix. And inversely bootstrap-table through a cdn and bootstrap by npm + laravel-mix.

Any ideas?

[UtechtDustin]

The dedection is quite simple, we use the constants $.fn.dropdown.Constructor.VERSION and bootstrap.Tooltip.VERSION to detect the version. See here: https://github.com/wenzhixin/bootstrap-table/blob/develop/src/constants/index.js#L6-L27

Maybe the laravel-mix will cause this issue, could you test it without ?

[lielvan]

Currently experiencing a similar issue with my Vue3 app. Dependencies versions:

• bootstrap: 5.0.2
• bootstrap-table: 1.18.3
• jquery: 3.6.0

Importing libraries in main.js as follow:

import jQuery from 'jquery'
window.jQuery = jQuery
import "bootstrap/dist/css/bootstrap.min.css"
import 'bootstrap-table/dist/bootstrap-table.min.css'
import "bootstrap"
import 'bootstrap-table/dist/bootstrap-table.js'
import BootstrapTable from 'bootstrap-table/dist/bootstrap-table-vue.esm.js'

The dedection is quite simple, we use the constants $.fn.dropdown.Constructor.VERSION and bootstrap.Tooltip.VERSION to detect the version. See here: https://github.com/wenzhixin/bootstrap-table/blob/develop/src/constants/index.js#L6-L27

Maybe the laravel-mix will cause this issue, could you test it without ?

From my understanding and deduction, the two rawVersion checks mentioned, which seem to basis bootstrap's version from bootstrap's BaseComponent's VERSION static variable, either return undefined which then uses bootstrapVersion default of 4, or the rawVersion receives '4' from VERSION.

Attaching a screenshot from my Chrome devtools inspection, which reveals bootstrap4 as the initialized class. Upon manually adjusting it to bootstrap5, my styling issues were resolved:

Tried providing an example using your editor, but seems like your base Vue Component example is already broken as it is... https://live.bootstrap-table.com/example/welcomes/vue-component.html

[cocowalla]

I'm having a similar problem, with a framework (CoreUI) that is based on Bootstrap 5.

What would be really useful is to have a way to override Bootstrap Table's auto-detection, to force it to use Bootstrap 5 semantics?

[cocowalla]

OK, I've managed to force it to add the bootstrap5 class insteadl of bootstrap4, by including this before loading the Bootstrap Table JS:

const bootstrap = {
    Tooltip: {
        VERSION: "5"
    }
}

It doesn't appear to be fixing the styles for me, but I'll save that for another issues if I can't figure it out - hope the stuff above helps others.

[OuttaSpaceTime]

hey I have the same problem with rails6 and webpacker.

It detects as class bootstrap4 and some styles are messed up, when I change to 'bootstrap5' styles are working again.

Dropdown fails in both cases even though dropdowns from bootstrap5 are working for me outside of datatables.

adding

const bootstrap = {
    Tooltip: {
        VERSION: "5"
    }
}

to application.js actually is not working for me. Any ideas how to force bootstrap5 over 4 here and to get dropdown working?

[cocowalla]

@FelixOutta are you sure you're adding the snippet before loading the Bootstrap-Table JavaScript file?

[OuttaSpaceTime]

@FelixOutta are you sure you're adding the snippet before loading the Bootstrap-Table JavaScript file?

@cocowalla yes I have tried

[OuttaSpaceTime]

@lielvan for some reason $.fn.dropdown.Constructor.VERSION is undefined. So this is probably why the detection is failing for me. Not sure why, but bootstrap5 is working fine. Any ideas how to fix this?

[olivier47adrian]

@FelixOutta This is a library loading order issue. Try to wait until bootstrap 5 is fully loaded. You can play on the priorities of your scripts for example. https://addyosmani.com/blog/script-priorities/ That solved the problem for me.

[UtechtDustin]

I can reproduce the issue with symfony encore (webpack). @FelixOutta as workaround you can use

window.bootstrap = {
  Tooltip: {
    VERSION: "5"
  }
}

But you have to use it BEFORE you requre the bootstrap-table.

[OuttaSpaceTime]

@FelixOutta This is a library loading order issue. Try to wait until bootstrap 5 is fully loaded. You can play on the priorities of your scripts for example. https://addyosmani.com/blog/script-priorities/ That solved the problem for me.

@olivier47adrian I am using webpacker. so I have no clue so far how webpack does manage this stuff internally. do you have an idea?

[OuttaSpaceTime]

I can reproduce the issue with symfony encore (webpack). @FelixOutta as workaround you can use

window.bootstrap = {
  Tooltip: {
    VERSION: "5"
  }
}

But you have to use it BEFORE you requre the bootstrap-table.

@UtechtDustin I tried the following way which is not working so far:

import $ from 'jquery'
import * as ActiveStorage from '@rails/activestorage';
import 'popper.js'
import 'bootstrap/dist/js/bootstrap'
import Rails from "@rails/ujs"
import Turbolinks from "turbolinks"
import "channels"
window.bootstrap = {
  Tooltip: {
    VERSION: "5"
  }
}
import 'bootstrap-table/dist/bootstrap-table.min.js'
import 'bootstrap-table/dist/locale/bootstrap-table-de-DE.min.js'

Rails.start()
Turbolinks.start()
ActiveStorage.start()

//require.context("../images", true)
//const imagePath = (name) => images(name, true)
const images = require.context('../images', true)

when I look it up in console everything seems alright:

even this is fine:

[lielvan]

I can reproduce the issue with symfony encore (webpack). @FelixOutta as workaround you can use

window.bootstrap = {
  Tooltip: {
    VERSION: "5"
  }
}

But you have to use it BEFORE you requre the bootstrap-table.

@UtechtDustin I tried the following way which is not working so far:

import $ from 'jquery'
import * as ActiveStorage from '@rails/activestorage';
import 'popper.js'
import 'bootstrap/dist/js/bootstrap'
import Rails from "@rails/ujs"
import Turbolinks from "turbolinks"
import "channels"
window.bootstrap = {
  Tooltip: {
    VERSION: "5"
  }
}
import 'bootstrap-table/dist/bootstrap-table.min.js'
import 'bootstrap-table/dist/locale/bootstrap-table-de-DE.min.js'

Rails.start()
Turbolinks.start()
ActiveStorage.start()

//require.context("../images", true)
//const imagePath = (name) => images(name, true)
const images = require.context('../images', true)

when I look it up in console everything seems alright:

even this is fine:

@FelixOutta Try creating a new config file called bootstrap.js somewhere in your assets. Inside add:

// bootstrap.js
import 'bootstrap/dist/js/bootstrap'
import 'bootstrap'
window.bootstrap = {
  Tooltip: {
    VERSION: "5"
  }
}

Remove the duplicate code from the original file and instead import the new bootstrap.js BEFORE importing Bootstrap Table. For example:

import '../assets/js/bootstrap'
import 'bootstrap-table/dist/bootstrap-table.js'
import 'bootstrap-table/dist/bootstrap-table.min.css'

Helped solve it for me :)

[OuttaSpaceTime]

@lielvan thanks a lot, that worked! but only when I define bootstrap.js the following way:

// bootstrap.js
import 'bootstrap/dist/js/bootstrap'
window.bootstrap = {
  Tooltip: {
    VERSION: "5"
  }
}

with importing bootstrap two times I ran into the error that dropdown is not working anymore.

Any idea what is going on here? seems strange. maybe webpack has some async loading on different files and code

[riskersen]

I'm also experiencing issues with using bootstrap5+table+webpack encore. After impleting mentioned fix above, basic functionality is given, but cellstyle function isn't working..

The cellStyle function given in the html5 data-cell-style is never executed..

**Update: I've managed to get the cellStyle function working, but not in app.js, but directly in the twig template, which seems to be a dirty..

[wenzhixin]

Updated to use bootstrap v5 as the default theme.