Unable to toggle Bootstrap 5 tabs in a Nunjucks template - the issue persists

I have been following the bootstrap documentation for tabs which can be found at this link

After referencing the documentation, I replicated the sample implementation in my code as shown below:

    ---
title: Portfolio
description: Portfolio
---

{% extends "./layouts/layout.njk" %}

{% block scripts %}{% endblock %}

{% block styles %}{% endblock %}

{% block body %}

  <div class="demo py-5">
    <h2 class="my-5">Choose One of Our Demos</h2>
    <ul class="nav nav-tabs" id="myTab" role="tablist">
      <li class="nav-item" role="presentation">
        <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home-tab-pane" type="button" role="tab" aria-controls="home-tab-pane" aria-selected="true">Home</button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile-tab-pane" type="button" role="tab" aria-controls="profile-tab-pane" aria-selected="false">Profile</button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact-tab-pane" type="button" role="tab" aria-controls="contact-tab-pane" aria-selected="false">Contact</button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="disabled-tab" data-bs-toggle="tab" data-bs-target="#disabled-tab-pane" type="button" role="tab" aria-controls="disabled-tab-pane" aria-selected="false" disabled>Disabled</button>
      </li>
    </ul>
    <div class="tab-content" id="myTabContent">
      <div class="tab-pane fade show active" id="home-tab-pane" role="tabpanel" aria-labelledby="home-tab" tabindex="0">A</div>
      <div class="tab-pane fade" id="profile-tab-pane" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">B</div>
      <div class="tab-pane fade" id="contact-tab-pane" role="tabpanel" aria-labelledby="contact-tab" tabindex="0">C</div>
      <div class="tab-pane fade" id="disabled-tab-pane" role="tabpanel" aria-labelledby="disabled-tab" tabindex="0">D</div>
    </div>
 
  </div>
{% endblock %}

Although it appears correctly on the page, clicking the tabs does not function as expected. The content does not switch and always displays text "A", as that is the initial active tab set.

https://i.sstatic.net/2FXYa.png

I am uncertain about what might be missing here. Bootstrap 5 has been installed without issues. Could the problem be related to Nunjucks? Should a script be added somewhere, or where should JavaScript codes be placed when using Nunjucks? Any assistance would be greatly appreciated.

javascripthtmlcssbootstrap-5nunjucks

Answer №1

The provided code functions correctly WHEN Bootstrap CSS and JS are properly included. It appears the issue may arise from either Bootstrap JS not being included or not being linked properly.

Refer to the code snippet below for clarification.

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6d0f0202191e191f0c1d2d58435f435f">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5c3e3333282f282e3d2c1c69726e726e">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>

<div class="demo py-5">
  <h2 class="my-5">Choose One of Our Demos</h2>
  <ul class="nav nav-tabs" id="myTab" role="tablist">
    <li class="nav-item" role="presentation">
      <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home-tab-pane" type="button" role="tab" aria-controls="home-pab-pane" aria-selected="true">Home</button>
    </li>
    <li class="nav-item" role="presentation">
      <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile-tab-pane" type="button" role="tab" aria-controls="profile-tab-pane" aria-selected='false'>Profile</button>
    </li>
    <li class="nav-item" role="presentation">
      <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact-tab-pane" type="button" role="tab" aria-controls="contact-tab-pane" aria-selected="false">Contact</button>
    </li>
    <li class="nav-item" role="presentation">
      <button class="nav-link" id="disabled-tab" data-bs-toggle="tab" data-bs-target="#disabled-tab-pane" type="button" role="tab" aria-controls="disabled-tab-pane" aria-selected="false" disabled>Disabled</button>
    </li>
  </ul>
  <div class="tab-content" id="myTabContent">
    <div class="tab-pane fade show active" id="home-tab-pane" role="tabpanel" aria-labelledby="home-tab" tabindex='0'>A</div>
    <div class="tab-pane fade" id="profile-tab-pane" role="tabpanel" aria-labelledby="profile-tab" tabindex='0'>B</div>
    <div class="tab-pane fade" id="contact-tab-pane" role="tabpanel" aria-labelledby="contact-tab" tabindex='0'>C</div>
    <div class="tab-pane fade" id="disabled-tab-pane" role="tabpanel" aria-labelledby="disabled-tab" tabindex='0'>D</div>
  </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Prevent the execution of a post request function depending on the promise result?

When I handle a POST request in express, I am required to retrieve data from a mongoDB cluster and then respond accordingly based on the retrieved response. app.post('/api/persons', (req, res) => { const data = req.body; if (!data.name || ...

javascriptexpressmongoose

Implementing Date.now() as a Schema Field Type in Meteor's Simple-Schema

Within my Meteor application, I have utilized Date.now() to generate a timestamp for inclusion in a new MongoDB document. Although Date.now() appears to be an appropriate choice for my app, I lack expertise in managing dates and times. As I transition to ...

javascriptmongodbmeteor

Storing an array in a cookie using Angular 8

Currently, I am utilizing the ngx-cookie-service package. { "user": [ { "id": 109, "name": "name1", "job" : "job name" } ], "token":"xxxx" } this.cookieService.set( 'user_id', ...

javascriptangularcookiesangular6ngx-cookie-service

Using jQuery to apply CSS to elements with multiple potential values

Here's a simple question: using jQuery's css function, you can retrieve the computed style of a CSS attribute. But what if there are multiple styles for that attribute being rendered simultaneously? Let's consider this example: <div id=" ...

javascriptjquerycss

Tips for temporarily halting my animation using javascript

I'm working on animating a background image and I'd like to implement a pause feature within this function. Do you have any suggestions for the best practice to do this? function scrollBg(){ //Move to the next pixel row. current -= step; ...

javascriptjqueryanimation

Is there a skilled coder available to troubleshoot this carousel's HTML code?

Hello, I am struggling with the code snippet below that uses Bootstrap to create a carousel. The next and previous buttons are not working properly. <div id="testimonial-carousel" class="carousel slide" data-ride="carousel&qu ...

htmlcssbootstrap-4

Bootstrap carousel powered by AngularJS

Struggling to incorporate bootstrap, angular, and a carousel to showcase images from local folders on my drive. Unsure how to customize the angular file properly. The example provided in the link below fetches images from the Internet, but I need to modify ...

cssangularjstwitter-bootstrap

Configure markers on Google Maps

I've been attempting to integrate my markers into Google Maps, but I'm stuck on how to use the following: map.fitBounds(latlngbounds); Any ideas on how I can implement this easily? Below is the code I have so far: <script type="text/javas ...

javascriptphpgoogle-mapsgoogle-maps-api-3google-maps-markers

Master the art of navigating the Windows Sound Recorder with the power of JavaScript

I am creating a project that involves controlling the Windows sound recorder for tasks such as starting, stopping, and saving recordings. Is there a way to do this without displaying the recorder window? I would appreciate any assistance in solving this. ...

javascriptaudio-recording

Top method for creating a checkbox filter to toggle the display of elements depending on various data-* attributes

I am currently working on creating a checkbox filter that will display or hide elements based on multiple data attributes assigned to those elements. Despite my attempts, I have not been able to achieve the desired filtering outcome. You can view a basic ...

javascriptjquerycheckboxfilterfiltering

When resetting the function, make sure to move the class to the closest sibling element

I am currently utilizing a slider that employs the .prev and .next jQuery functions to toggle the active class, indicating which slide is being displayed. Here is the code responsible for this functionality. It identifies the current sibling with the acti ...

javascriptjquerycss

The assignment of type 'string' to type 'UploadFileStatus | undefined' is not permissible

import React, { useState } from 'react'; import { Upload } from 'antd'; import ImgCrop from 'antd-img-crop'; interface uploadProps{ fileList:string; } const ImageUploader:React.FC <uploadProps> ...

javascripttypescript

Challenges with border-color and CSS input:focus

The dilemma Currently, I am immersed in a project focusing on constructing a front end using bootstrap4. In order to align with the company's main color scheme, I decided to alter the highlighting color of inputs. To achieve this, I made the followi ...

htmlcssinputbootstrap-4frontend

Constantly centered div

I'm dealing with a situation like this: .center_position_div{ width:100%; background-color:green; display: flex; flex-wrap: wrap; } .show_running_exam { width: 22%; background-color:aliceblue; margin-left: 1%; margi ...

htmlcss

Struggling with pagination problems in Bootstrap 4 and looking to integrate QR code functionality into your blade template?

I am currently facing an issue with generating a batch of QR codes using the SimpleQR code generator in Laravel blade template on the fly for printing. The problem arises when a page break occurs, as it breaks the QR code. I attempted to use the break-insi ...

cssbootstrap-4printinglaravel-blade

Click on the input to add or remove a value

I have written a code where, on click, I insert an email address into a field. However, what I am trying to achieve is that upon the next click on the same field, it will remove the email if one already exists in the input. Below is my current code snippe ...

javascriptjquery

What could be causing my Bootstrap accordion to not expand or collapse within my Angular application?

Struggling with my Accordion Angular component that utilizes Bootstrap - the collapsing and expanding feature isn't functioning properly. I've simply copied the bootstrap code into my accordion.component.html. <div class="accordion accord ...

angularbootstrap-5accordion

Integrating webpack and Vue async components from separate projects or domains

Having recently ventured into webpack, I have watched several tutorials and successfully configured it for my project. One of the challenges I encountered was loading vuejs components asynchronously using the following method: <template> <div ...

javascriptwebpackvue.js

Adjust the height of the Twitter Widget to be proportionate to the height of its parent div dynamically

I have integrated the Twitter widget into my library management system, but I am facing an issue with its fixed height. Is there a way to make the height dynamic through CSS? Any suggestions on how this can be achieved will be greatly appreciated. Below ...

htmlcsstwitterwidgettwitter-widget

Removing a Dom element using stage.removeChild( )

When the number 6 is typed and entered into the game, the function correct() in the code snippet below determines what action to take. I would like to remove the DOM element gg (the equation 3+3=input) from the stage after typing 6 and pressing enter. How ...

javascripthtmldomcanvasjsfiddle