CODEWITHSUNDEEP
twitter-bootstraptabs
Primaadi Airlangga
Primaadi Airlangga

Reputation: 23

How to use tabs correctly in Bootstrap 4.1.3

I'm trying using tabs in bootstrap version 4.1.3, the tabs work fine but the tab-pane doesn't change.

I know there are plenty questions like this, I read them but none of the solutions that I tried work. Am I missing something?

<!-- Nav tabs -->
        <ul class="nav nav-tabs">
            <li class='nav-item'>
                    <a class='nav-link active' data-toggle='tab' href='#1'>12</a>
                 </li><li class='nav-item'>
                    <a class='nav-link ' data-toggle='tab' href='#2'>13</a>
                 </li><li class='nav-item'>
                    <a class='nav-link ' data-toggle='tab' href='#3'>16</a>
                 </li><li class='nav-item'>
                    <a class='nav-link ' data-toggle='tab' href='#4'>17</a>
                 </li><li class='nav-item'>
                    <a class='nav-link ' data-toggle='tab' href='#5'>18</a>
                 </li><li class='nav-item'>
                    <a class='nav-link ' data-toggle='tab' href='#6'>19</a>
                 </li>    
        </ul>
        
<!-- Tab panes -->
    <div class="tab-content">
        <div class='tab-pane container fade in show active' id='1'>1</div>
        <div class='tab-pane container fade' id='2'>2</div>
        <div class='tab-pane container fade' id='3'>3</div>
        <div class='tab-pane container fade' id='4'>4</div>
        <div class='tab-pane container fade' id='5'>5</div>
        <div class='tab-pane container fade' id='6'>6</div>    
    </div>

Upvotes: 2

Views: 5315

Answers (2)

Sherif Salah
Sherif Salah

Reputation: 2143

ID tokens must begin with a letter ([A-Za-z]), and may be followed by any number of letters, digits ([0-9]), hyphens (-), underscores (_), colons (:), and periods (.).

For the class attribute, there is no such limitation, class names can contain any character, and they don’t have to start with a letter to be valid.

Here is your code working fine with changing ids' names, run the code snippet and test it:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title></title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
</head>

<body>
  <!-- Nav tabs -->
  <ul class="nav nav-tabs">
    <li class='nav-item'>
      <a class='nav-link active' data-toggle='tab' href='#A1'>12</a>
    </li>
    <li class='nav-item'>
      <a class='nav-link ' data-toggle='tab' href='#A2'>13</a>
    </li>
    <li class='nav-item'>
      <a class='nav-link ' data-toggle='tab' href='#A3'>16</a>
    </li>
    <li class='nav-item'>
      <a class='nav-link ' data-toggle='tab' href='#A4'>17</a>
    </li>
    <li class='nav-item'>
      <a class='nav-link ' data-toggle='tab' href='#A5'>18</a>
    </li>
    <li class='nav-item'>
      <a class='nav-link ' data-toggle='tab' href='#A6'>19</a>
    </li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div class='tab-pane container fade in show active' id='A1'>1</div>
    <div class='tab-pane container fade' id='A2'>2</div>
    <div class='tab-pane container fade' id='A3'>3</div>
    <div class='tab-pane container fade' id='A4'>4</div>
    <div class='tab-pane container fade' id='A5'>5</div>
    <div class='tab-pane container fade' id='A6'>6</div>
  </div>

  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</body>

</html>

Upvotes: 1

user3687941
user3687941

Reputation: 146

Change your ids to start with a letter :

<!-- Nav tabs -->
<ul class="nav nav-tabs">
  <li class='nav-item'>
    <a class='nav-link active' data-toggle='tab' href='#s1'>12</a>
  </li>
  <li class='nav-item'>
    <a class='nav-link ' data-toggle='tab' href='#s2'>13</a>
   </li>
   <li class='nav-item'>
     <a class='nav-link ' data-toggle='tab' href='#s3'>16</a>
   </li>
   <li class='nav-item'>
     <a class='nav-link ' data-toggle='tab' href='#s4'>17</a>
   </li>
   <li class='nav-item'>
     <a class='nav-link ' data-toggle='tab' href='#s5'>18</a>
   </li><li class='nav-item'>
     <a class='nav-link ' data-toggle='tab' href='#s6'>19</a>
   </li>    
 </ul>

 <!-- Tab panes -->
   <div class="tab-content">
     <div class='tab-pane container fade in show active' id='s1'>1</div>
     <div class='tab-pane container fade' id='s2'>2</div>
     <div class='tab-pane container fade' id='s3'>3</div>
     <div class='tab-pane container fade' id='s4'>4</div>
     <div class='tab-pane container fade' id='s5'>5</div>
     <div class='tab-pane container fade' id='s6'>6</div>    
   </div>

Salim

Upvotes: 2

Related Questions