CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrap
Pavlo Chechehov
Pavlo Chechehov

Reputation: 432

Bootstrap tabs with dropdown is broken

I followed the tutorial on official site of Bootstrap, and at this page is a simple example how to use tabs with dropdowns menu bootstrap example

And it works on this page, but when I add this code to codepen or to my project it doesn't work. All bootstrap dependencies are added. But I noticed some weird thing that when I use previous version, such as 3.4.0, it works fine, without issues, but with new version 4.3.1 - dropdown menu doesn't expanding. Maybe I'm doing something wrong.

This example from the bootstrap official site in my codepen page, please follow this link and give me some advices. Codepen example.

  <ul class="nav nav-tabs" id="myTab" role="tablist">
    <li class="nav-item">
        <a class="nav-link active" id="home-tab" data-toggle="tab" href="#logs"
           role="tab" aria-controls="logs" aria-selected="true">
            Logs
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link" id="profile-tab" data-toggle="tab" href="#scriptMessage"
           role="tab" aria-controls="scriptMessage" aria-selected="false">
            Scripts/Messages
        </a>
    </li>
    <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Menu</a>
        <div class="dropdown-menu">
            <a class="dropdown-item" href="#">Submenu 1-1</a>
            <a class="dropdown-item" href="#">Submenu 1-2</a>
            <a class="dropdown-item" href="#">Submenu 1-3</a>
        </div>
    </li>
</ul>

Thank you guys for your help!. I forgot to add one more dependency, Popper.js or Bootstrap Bundle js (Popper is already included), to my project, but now it works correctly.

Upvotes: 1

Views: 2579

Answers (5)

Arthur Coelho
Arthur Coelho

Reputation: 73

Bootstrap has its own JavaScript for some functionalities:

  1. Go to this link
  2. Copy the 'Complete JavaScript Bundle' link
  3. Paste that link to your code pen like this: Pen Settings screenshot (You must add it AFTER JQuery)

The bundle already comes with the needed functions for Bootstrap. You just have to add that and JQuery.

You can see which Js dependencies are needed for each bootstrap components and more info on how to add those dependencies to your project here

Upvotes: 1

asimshahiddIT
asimshahiddIT

Reputation: 330

You missed the jQuery library.

and dropdown popup on click 

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src=""></script>

</head>
<body>

<div class="container">
  <h3>Tabs With Dropdown Menu</h3>
  <ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>
</div>

</body>
</html>

Upvotes: 1

Error Yatish
Error Yatish

Reputation: 106

some of bootstrap component need javascript code for actions. In your case you need to put default js bundle before closing body tag. https://codepen.io/error-yatish/pen/aXgLKg?editors=1000

for reference use https://getbootstrap.com/docs/4.3/getting-started/introduction/#js

Upvotes: 1

Rahul
Rahul

Reputation: 18557

Check here working demo and yes you can copy css and js as per requirement from this demo.

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

  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>

  <body>

    <div class="container">
      <h3>Tabs With Dropdown Menu</h3>
      <ul class="nav nav-tabs">
        <li class="nav-item">
          <a class="nav-link active" href="#">Active</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
          <div class="dropdown-menu">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Separated link</a>
          </div>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Disabled</a>
        </li>
      </ul>
    </div>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <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.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>

</html>

Upvotes: 1

Udhay Titus
Udhay Titus

Reputation: 5869

your code is working fine use the links like below or check your updated codepen here

<script src="http://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <link href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
    <script src="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>


<script src="http://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<ul class="nav nav-tabs" id="myTab" role="tablist">
    <li class="nav-item">
        <a class="nav-link active" id="home-tab" data-toggle="tab" href="#logs"
           role="tab" aria-controls="logs" aria-selected="true">
            Logs
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link" id="profile-tab" data-toggle="tab" href="#scriptMessage"
           role="tab" aria-controls="scriptMessage" aria-selected="false">
            Scripts/Messages
        </a>
    </li>
    <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Menu</a>
        <div class="dropdown-menu">
            <a class="dropdown-item" href="#">Submenu 1-1</a>
            <a class="dropdown-item" href="#">Submenu 1-2</a>
            <a class="dropdown-item" href="#">Submenu 1-3</a>
        </div>
    </li>
</ul>

Upvotes: 1

Related Questions