Bootstrap 5 data-bs-toggle vs data-toggle. Adding the bs breaks my whole Popper


I’m one month into learning Web Development.
From what I’ve read, the data-bs-toggle is the newer name for Bootstrap 5.

What is the difference between Bootstrap data-toggle vs data-bs-toggle attributes?

My code is simple. In the head, I’ve included CSS, jQuery, and JavaScript Bundle with Popper.
In the body, I have two links with a popover. In the script, I initiate popover.

By changing data-toggle to data-bs-toggle my popover wouldn’t work.

data-bs-content on the other hand would not work if I change it to data-content
Why does this happen?

<!DOCTYPE html>
<html lang="en" dir="ltr">
    <meta charset="utf-8">
    <!-- CSS only -->
    <link href=""
            rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
    <!-- jQuery -->
    <script src="" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
    <!-- JavaScript Bundle with Popper -->
    <script src=""
            integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
    <a href="#" title="Header" data-bs-toggle="popover" data-placement="top" data-bs-content="Content">Click</a>
    <a href="#" title="Header" data-toggle="popover" data-placement="top" data-bs-content="Content">Click</a>

  $(function () {


>Solution :

You need to decide which data-toggle to initiate.

If You use $('[data-toggle="popover"]').popover() it initiates popover which has specified data-toggle

If You use $('[data-bs-toggle="popover"]').popover() it initiates popover which has specified data-bs-toggle

Stick to one version – data-toggle or data-bs-toggle

I recommend using data-bs-toggle.
If You will copy code from docs, remember that DOC’s describes Bootstrap 4. So if You’re using Bootstrap 5 some utilities won’t work with data-toggle.

Leave a Reply Cancel reply