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 494 28 Jul 2021

How to make an active toggleable Bootstrap tab?

Ask by Ethan Karla

Updated 28 Jul 2021

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!

advertising

Markdown for AI

A clean, structured version of this page for AI assistants and LLMs.