Bootstrap 4 dropdown menu when in tabs - html

I would like to open my dropdown menu when I click a link or a button when I am in my tab.
If I open the dropdown menu first and then click on the button, it can be opened otherwise it does not show anything... is it because I do not add style with javascript ?
<!DOCTYPE HTML>
<html>
<head>
<title>Title Here</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
</style>
<body>
<button id="yikes" href="#" class="btn dropdown-toggle" data-toggle="dropdown">Edit</button>
<ul id="editMenuSelector" class="dropdown-menu">
<li>Copy</li>
<li>Paste</li>
<li>Undo</li>
</ul>
<button href="#" class="btn dropdown-toggle" data-toggle="dropdown">Debug</button>
<ul id="debugMenuSelector" class="dropdown-menu">
<li>Some Debug</li>
<li>Show XML</li>
<li>Show Log</li>
<li>Shut down the lot</li>
</ul>
<ul class="nav nav-tabs">
<li class="nav-item">
Profile
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="home">
Debug
</div>
<div class="tab-pane fade" id="profile">
<button onclick="myFunction()" href="#" >Debug</button>
<p>Profile tab content ...</p>
</div>
<div class="tab-pane fade" id="messages">
<p>Messages tab content ...</p>
</div>
</div>
<script>
function myFunction (){
$("#editMenuSelector").addClass('open');
$("#editMenuSelector").addClass('show');
$("#yikes").attr("aria-expanded","true");
console.log("yikes");
}
</script>
</body>
</html>

Related

Parent menu able to add active class but submenu unable to add selected class

$(".sidebar_nav-main li").on("click", function() {
$(".sidebar_nav-main li").removeClass("active");
$(this).addClass("active");
});
$(".sidebar-subchild-collapse li").on("click", function() {
$(".sidebar-subchild li").removeClass("selected");
$(this).addClass("selected");
});
.active {
box-shadow: rgb(237, 156, 40) 4px 0px 0px inset;
background-color: rgba(255, 255, 255, 0.05);
}
.selected{
background-color: rgba(255,255,255,.05);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<link href='https://unpkg.com/boxicons#2.0.7/css/boxicons.min.css' rel='stylesheet'>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type=text/css href="Sidebar.css">
</head>
<body>
<div class="sidebar-left" id="sidebar">
<div class="sidebar-header">
<div class="sidebar-title">Sidebar</div>
<div class="sidebar-collapse" id="sidebar-collapse">
<i class="fa-solid fa-bars" ></i>
</div>
</div>
<div class="sidebar">
<div class="sidebar-content">
<nav class="sidebar_nav" role="navigation">
<ul id=sidebar-accordion class="sidebar_nav-main">
<li class="sidebar-link dropdown" data-toggle="collapse" data-target="#submenu" aria-expanded="false">
<a href="#" class="sidebar_main-link">
<span class="sidebar-item">Menu</span>
</a>
<div class="sidebar-subchild-hover">
<ul class="dropdown-menu sidebar_submenu">
<li class="dropdown-item sidebar_submenu-item"><span>Menu 1</span></li>
<li class="dropdown-item sidebar_submenu-item"><span>Menu 2</span></li>
</ul>
</div>
<div class="sidebar-subchild-collapse" onclick="event.stopPropagation()">
<ul data-parent="#sidebar-accordion" id="sidebar_submenu" class="collapse sidebar_submenu">
<li class="gdc-sidebar_submenu-item selected"><span>Menu 1</span></li>
<li class="gdc-sidebar_submenu-item"><span>Menu 2</span></li>
</ul>
</div>
</li>
</ul>
</nav>
</div>
</div>
</div>
<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.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<script src="./Sidebar.js"></script>
</body>
</html>
Good Day and very much need help! I am doing the sidebar menu. The problem I facing now is when the active class for my parent menu is able to run. Switching between multiple parent menus will show the correctly active class. But when using the same script on the submenu, it was not able to switch between multiple submenus. The selected class keeps staying at the first submenu item and will not change. I am still thinking about how could this happen. If anyone can help then it was so much appreciated!!

How to fix search icon changing to value of dropdown-menu item?

Here is what I am talking about.
<!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">
<!--------------------------------------------------------------------------------------->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>App</title>
</head>
<body class="bg-ttgl">
<div class="container">
<form class="form-group">
<div class="search-row row justify-content-center">
<!--dropdown section-->
<div class="col-7 input-group-prepend">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Watching</button>
<div class="dropdown-menu" role="menu">
<a class="dropdown-item">Completed</a>
<a class="dropdown-item">On-Hold</a>
<a class="dropdown-item">Dropped</a>
<a class="dropdown-item">Plan to Watch</a>
</div>
<!--search field section-->
<input type="text" class="form-control" aria-label="Anime list username" label="Anime list username" autocorrect="off" autocapitalize="off" placeholder="MyAnimeList username">
<div class="input-group-append" id="button-addon4">
<button class="btn btn-light btn-outline-secondary" type="submit">
<i class="fa fa-search"></i>
</button>
</div>
</div>
</div>
</form>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script>$(".dropdown-menu a").click(function () {
$("button").text($(this).text());
});
</script>
</body>
</html>
I also have another question, in the .gif above you can see the dropdown menu changing size, how do I make the dropdown menu not change size like shown
this gif here

By doing $("button.").text($(this).text()); you are essentially changing the text of every button present on the screen. To change the text of toggle button only, change it to $("button.dropdown-toggle").text($(this).text());
As for the width, the toggle button is changing size because there is no minimum width defined. Use this CSS to do so
button.dropdown-toggle {
min-width: 10rem; // This is same as the min-width of dropdown-menu
}
button.dropdown-toggle {
min-width: 10rem; // This is same as the min-width of dropdown-menu
}
<!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">
<!--------------------------------------------------------------------------------------->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>App</title>
</head>
<body class="bg-ttgl">
<div class="container">
<form class="form-group">
<div class="search-row row justify-content-center">
<!--dropdown section-->
<div class="col-7 input-group-prepend">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Watching</button>
<div class="dropdown-menu" role="menu">
<a class="dropdown-item">Completed</a>
<a class="dropdown-item">On-Hold</a>
<a class="dropdown-item">Dropped</a>
<a class="dropdown-item">Plan to Watch</a>
</div>
<!--search field section-->
<input type="text" class="form-control" aria-label="Anime list username" label="Anime list username" autocorrect="off" autocapitalize="off" placeholder="MyAnimeList username">
<div class="input-group-append" id="button-addon4">
<button class="btn btn-light btn-outline-secondary" type="submit">
<i class="fa fa-search"></i>
</button>
</div>
</div>
</div>
</form>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script>$(".dropdown-menu a").click(function () {
$("button.dropdown-toggle").text($(this).text());
});
</script>
</body>
</html>

Bootstrap dropdown list not expanding

Bootstrap dropdownlist is not displaying its list of contents on click. I added jquery library prior to the bootstrap.min.js(This was the solution that i found in stack overflow,but it does not work for me).
<html>
<head>
<title>Demo</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet"href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<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://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</head>
<body>
<div class="container features">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-12">
</div>
<div class="col-lg-4 col-md-4 col-sm-12">
<div class="signin-div">
<h3 class="feature-title">Login Here..</h3>
<div class="form-group">
<!-- Basic dropdown -->
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</div>
<!-- Basic dropdown -->
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-12">
</div>
</div>
</div>
</body>
</html>

Try this code.
I have added popper.js before boostrap.js
<html>
<head>
<title>Demo</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" i crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.0.4/popper.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="container features">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-12">
</div>
<div class="col-lg-4 col-md-4 col-sm-12">
<div class="signin-div">
<h3 class="feature-title">Login Here..</h3>
<div class="form-group">
<!-- Basic dropdown -->
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</div>
<!-- Basic dropdown -->
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-12">
</div>
</div>
</div>
</body>
</html>

paste this code in head
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
paste this code in body
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

how can i want the dropdown menu to expand upwards instead of downwards

how can I make the dropdown menu to expand upwards instead of downwards?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<br>
<div class="container">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
COLOR
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">red</a>
<a class="dropdown-item" href="#">yellow</a>
</div>
</div>
</body>
</html>
I expect the dropdown menu to expand upwards instead of downwards but the actual output is, the dropdown menu shows downward.

if the button is the only thing on your page, and I suspect that from your code, the dropup wouldn't work... so check the code below and try removing the H1 and p tags...
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container">
<h1> This is demo text </h1>
<p>There needs to be some text... else it won't open up</p>
<div class="dropup">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
COLOR
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">red</a>
<a class="dropdown-item" href="#">yellow</a>
</div>
</div>
</div>

Here is a bootstrap solution
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<br>
<br>
<br>
<br>
<div class="container">
<div class="btn-group dropup">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
COLOR
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">red</a>
<a class="dropdown-item" href="#">yellow</a>
</div>
</div>
</div>
</body>
</html>

Bootstrap 4 tabs

Ok guys I'm trying to make dynamic tabs with bootstrap 4, something like this: https://codepen.io/jek/pen/BoWNRy [I didn't wrote it]
In any case is I paste this code locally it don't work, I display the 3 tabs but I can see the text only in the first and I don't know why.
Here is my head [HTML]:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<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.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

Use this links and scripts instead yours:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
I took it from here:https://www.w3schools.com/bootstrap4/default.asp
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" href="#profile" role="tab" data-toggle="tab" aria-selected="true">profile</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#buzz" role="tab" data-toggle="tab">buzz</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#references" role="tab" data-toggle="tab">references</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="profile">...</div>
<div role="tabpanel" class="tab-pane fade" id="buzz">bbb</div>
<div role="tabpanel" class="tab-pane fade" id="references">ccc</div>
</div>

An improvement to the accepted answer:
The first tab will not fade/animate. To fix that, replace:
<div role="tabpanel" class="tab-pane active" id="profile">...</div>
<div role="tabpanel" class="tab-pane fade" id="buzz">bbb</div>
<div role="tabpanel" class="tab-pane fade" id="references">ccc</div>
with:
<div role="tabpanel" class="tab-pane fade show active" id="profile">...</div>
<div role="tabpanel" class="tab-pane fade" id="buzz">bbb</div>
<div role="tabpanel" class="tab-pane fade" id="references">ccc</div>