Bootsrap 5 tab-content a tag link

Question

Bootsrap 5 tab-content a tag link

54 Views Asked by csalamade At 19 October 2024 at 19:22

This is how it works in the old version of bootrap. I found that in the old a tab-pane fade in active in the new version it is already: tab-pane fade show active What else do I need to improve?

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">

    <title>Bootsrap</title>
</head>

<body>

<div class="container">

        <h3> Bootsrap Tabs</h3>

        <ul class="nav nav-tabs">
            <li class="nav-item">
              <a class="nav-link active"  data-toggle="tab" aria-current="page" href="#home">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" data-toggle="tab"  href="#help">Help</a>
            </li>

          </ul>

<div class="tab-content">
    <div class="tab-pane fade show active " id="home">
        <h2>Home</h2>

    </div>
    <div class="tab-pane" id="help">
        <h2>Help</h2>

    </div>


</div>


</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/5.3.2/jquery.min.js"></script>

</body>

</html>

I was able to write 1 word to the new version

Original Q&A

There are 1 best solutions below

**csalamade** · Accepted Answer

In Bootstrap 5 data-toggle changes to data-bs-toggle

missing javascript loading

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>


    <title>Bootsrap</title>
  </head>

  <body>

    <div class="container">

      <h3> Bootstrap Tabs</h3>

      <!-- Remember, when it changes from version 4 to 5 it changes to include -bs- in the data attributes -->
      <ul class="nav nav-tabs">
        <li class="nav-item">
          <a class="nav-link active" data-bs-toggle="tab" aria-current="page" href="#home">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" data-bs-toggle="tab" href="#help">Help</a>
        </li>

      </ul>

      <div class="tab-content">
        <div class="tab-pane fade show active " id="home">
          <h2>Home</h2>

        </div>
        <div class="tab-pane" id="help">
          <h2>Help</h2>

        </div>


      </div>


    </div>


  </body>

</html>

Bootsrap 5 tab-content a tag link

There are 1 best solutions below

Related Questions in HTML

Related Questions in BOOTSTRAP-5

Related Questions in BOOTSTRAP-TABS

Trending Questions

Popular # Hahtags

Popular Questions