Bootstrap button not toggling on click event in my Django webapp

[journpy]

Prerequisites

• I have searched for duplicate or closed issues
• I have validated any HTML to avoid common problems
• I have read the contributing guidelines

Describe the issue

I am using Bootstrap 5 for my Django app and have django-bootstrap5 v24.3 installed. The Bootstrap 5 docs says "Add data-bs-toggle="button" to toggle a button’s active state". However after adding it to my button, it does nothing. In fact, the button stops working and no toggle happens. I want to be able to toggle my button to active on a click event and for it to remain that way as long as I'm on that page. Do I need to add an extra JavaScript event to handle this? I'm thinking bootstrap should be able to handle this... I have popper.min.js and bootstrap.min.js scripts included. See MRE below:

Reduced test cases

<div class="container mt-3" style="text-align: center !important;">
<!-- Implement pagination -->
<div class="pagination">
    <span class="step-links">
        <a href="?page=1" class="btn btn-outline-primary" role="button" data-bs-toggle="button">1</a>
        {% if page_obj.has_previous %}
            <a href="?page={{ page_obj.previous_page_number }}" class="btn btn-outline-primary" role="button">Prev</a>
        {% endif %}
    <span class="current">
    &nbsp;&nbsp;
    </span>
        {% if page_obj.has_next %}
            <a class="btn btn-outline-primary" href="?page={{ page_obj.next_page_number }}" role="button">Next</a>
        {% endif %}
        <a class="btn btn-outline-primary" href="?page={{ page_obj.paginator.num_pages }}" role="button">{{ page_obj.paginator.num_pages }}</a>
    </span>
</div>
</div>

What operating system(s) are you seeing the problem on?

Windows, Linux

What browser(s) are you seeing the problem on?

Chrome, Microsoft Edge

What version of Bootstrap are you using?

v5.3.3

[julien-deramond]

Hello @journpy

I've converted your issue into a discussion since the toggle buttons seem to work as expected, as shown in the documentation.
If you already have popper.min.js and bootstrap.min.js scripts properly included in your project, the functionality should work out of the box.

Based on your description, it’s likely an issue with your project’s configuration or setup, or perhaps an incompatibility with Django Bootstrap. I noticed you’ve already opened zostera/django-bootstrap5#735 in their repository, which is a great step since I haven’t personally worked with Django Bootstrap.

Here are a few suggestions to help debug the problem:

• Test whether other data-bs-* attributes work as expected (instantiate an accordion for instance). This can help determine if the issue is with Django Bootstrap’s handling of the global data-bs-* system or specifically with the toggle buttons.
• Use your browser’s developer tools to check the console for any warning or error messages that might give clues about what’s going wrong.

Maybe you could try to create a reproducible project for folks to help with StackBlitz for example.

[journpy]

Hello @julien-deramond, thanks for your response. While I wait for the maintainers of django-bootstrap5 to comment on the issue raised, I'd like to say that I use accordion on the homepage of my web app https://journpy.pythonanywhere.com/ and the data-bs-toggle and data-bs-target attributes work as expected. A snippet of the code is

<div class="accordion-item">
                <h2 class="accordion-header">
                    <button class="accordion-button" type="button" data-bs-toggle="collapse"
                        data-bs-target="#panelsStayOpen-collapseTwo" aria-expanded="true"
                        aria-controls="panelsStayOpen-collapseTwo">
                        Python for Mathematics
                    </button>
                </h2>
</div>

Also, I use carousel and the data-bs-target and data-bs-slide also work as expected:

<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleRide" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
    </button><button class="carousel-control-next" type="button" data-bs-target="#carouselExampleRide" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
    </button>

Not sure if it's an issue with Django's implementation of pagination.