Products

Data Converter Cleaner TUC - Unit Converter Import Export Survey Manager Tweet Controller

Developer

Article Blog Forum Interview Beginner News Startup Quiz

Users

Career

Apply Job Internship

Pricing

Login Sign Up Get a Quote

Active toggleable Bootstrap tab

Ethan Karla 396 28 Jul 2021

How to make an active toggleable Bootstrap tab?

Ethan Karla

Student

An enthusiastic, adaptive, and fast-learning person with a broad and acute interest in the discovery of new innovative drugs, I particularly enjoy collaborating with scientists from different disciplines to develop new skills and solve new challenges.

1 Answers

Anonymous User 03 Aug 2021

To make a Active Toggleable Bootstrap tabs see the below example:

<!DOCTYPE html>

<html lang='en'>

<head>

  <title>Bootstrap Example</title>

  <meta charset='utf-8'>

  <meta name='viewport' content='width=device-width, initial-scale=1'>

  <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css'>

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

  <script src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js'></script>

  <script src='https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js'></script>

</head>

<body>

<div class='container'>

  <h2>Active Toggleable Bootstrap Tabs</h2>

  <br>

  <ul class='nav nav-tabs' role='tablist'>

    <li class='nav-item'>

      <a class='nav-link active' data-toggle='tab' href='#home'>Home</a>

    </li>

    <li class='nav-item'>

      <a class='nav-link' data-toggle='tab' href='#menu1'>About</a>

    </li>

  </ul>

  <div class='tab-content'>

    <div id='home' class='container tab-pane active'><br>

      <h3>Home</h3>

      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy.</p>

    </div>

    <div id='menu1' class='container tab-pane fade'><br>

      <h3>About</h3>

      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy.</p>

    </div>

  </div>

</div>

</body>

</html>

Hope this will help you.

Happy Coding!

MindStick Training