forum

home / developersection / forums / active toggleable bootstrap tab

Ask Question

Active toggleable Bootstrap tab

Ethan Karla 274 28-Jul-2021

How to make an active toggleable Bootstrap tab?

bootstrap bootstrap 
Updated on 28-Jul-2021
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.

Follow
Can you answer this question?
Answer

1 Answers

Anonymous User

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
MindStick Training

Liked By

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy