What is wrong with this bootstrap 5.2 tab html?-CodePudding

I am really busting my head here. Trying to make bootstrap tabs working. Example works, but when I try to generate my own tabs like this, they don't work. I must be missing something very stupid:

    <ul  id="7b310c9a-3300-483e-9ddd-6de1d38c228c-run-tab" role="tablist">
      <li  role="presentation">
        <button  id="7b310c9a-3300-483e-9ddd-6de1d38c228c-0-tab" data-bs-toggle="tab" data-bs-target="#7b310c9a-3300-483e-9ddd-6de1d38c228c-0-pane" type="button" role="tab" aria-controls="7b310c9a-3300-483e-9ddd-6de1d38c228c-0-pane" aria-selected="true">0
        </button>
      </li>
      <li  role="presentation">
        <button  id="802a6e18-485b-4cfe-8154-d67b677a565f-1-tab" data-bs-toggle="tab" data-bs-target="#802a6e18-485b-4cfe-8154-d67b677a565f-1-pane" type="button" role="tab" aria-controls="802a6e18-485b-4cfe-8154-d67b677a565f-1-pane" aria-selected="false">1
        </button>
      </li>
      <li  role="presentation">
        <button  id="0dc3ed87-6c4e-496a-a313-c2b6d606d8ad-2-tab" data-bs-toggle="tab" data-bs-target="#0dc3ed87-6c4e-496a-a313-c2b6d606d8ad-2-pane" type="button" role="tab" aria-controls="0dc3ed87-6c4e-496a-a313-c2b6d606d8ad-2-pane" aria-selected="false">2
        </button>
      </li>
      <li  role="presentation">
        <button  id="852d36ac-2768-48ac-9fa4-e73d1459b780-3-tab" data-bs-toggle="tab" data-bs-target="#852d36ac-2768-48ac-9fa4-e73d1459b780-3-pane" type="button" role="tab" aria-controls="852d36ac-2768-48ac-9fa4-e73d1459b780-3-pane" aria-selected="false">3
        </button>
      </li>
      <li  role="presentation">
        <button  id="b7193c34-b2e8-4577-a07d-3e71acd7b1e2-4-tab" data-bs-toggle="tab" data-bs-target="#b7193c34-b2e8-4577-a07d-3e71acd7b1e2-4-pane" type="button" role="tab" aria-controls="b7193c34-b2e8-4577-a07d-3e71acd7b1e2-4-pane" aria-selected="false">4
        </button>
      </li>
    </ul>
    <div  id="7b310c9a-3300-483e-9ddd-6de1d38c228c-run-tab-content">
      <div  id="7b310c9a-3300-483e-9ddd-6de1d38c228c-0-pane" role="tabpanel" aria-labelledby="7b310c9a-3300-483e-9ddd-6de1d38c228c-0-tab" tabindex="0">
        Content for: 0
      </div>
      <div  id="802a6e18-485b-4cfe-8154-d67b677a565f-1-pane" role="tabpanel" aria-labelledby="802a6e18-485b-4cfe-8154-d67b677a565f-1-tab" tabindex="0">
        Content for: 1
      </div>
      <div  id="0dc3ed87-6c4e-496a-a313-c2b6d606d8ad-2-pane" role="tabpanel" aria-labelledby="0dc3ed87-6c4e-496a-a313-c2b6d606d8ad-2-tab" tabindex="0">
        Content for: 2
      </div>
      <div  id="852d36ac-2768-48ac-9fa4-e73d1459b780-3-pane" role="tabpanel" aria-labelledby="852d36ac-2768-48ac-9fa4-e73d1459b780-3-tab" tabindex="0">
        Content for: 3
      </div>
      <div  id="b7193c34-b2e8-4577-a07d-3e71acd7b1e2-4-pane" role="tabpanel" aria-labelledby="b7193c34-b2e8-4577-a07d-3e71acd7b1e2-4-tab" tabindex="0">
        Content for: 4
      </div>
    </div>

https://jsfiddle.net/716qtugz/

CodePudding user response：

Your Ids are invalid. Id's in HTML cannot start with a number. That's why you get an error an your code is not working.

as you can read here, this is the structure of a valid Id (I quote) Rules for Using the ID Attribute

Ensure your ID attributes conform to these three standards:

The ID must start with a letter (a-z or A-Z).
All subsequent characters can be letters, numbers (0-9), hyphens (-), underscores (_), colons (:), and periods (.).
Each ID must be unique within the document.

I see your Ids are a bit strange; maybe they are generated by some part of your program. If thats the case ensure that the id generated starts always with a letter

Here its a working example https://jsfiddle.net/0htv2wz3/ (I just took your code and changed the IDs to ones that start with letters and removed the ones that are not necessary for the example; as you see it works properly)