<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>
<div class="row">
<div class="col-3">
<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="page1" role="tab">Home</a>
<a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="page2" role="tab" >Profile</a>
<a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="page3" role="tab" >Messages</a>
<a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="page2" role="tab">Settings</a>
</div>
</div>
<div class="tab-content col-9" id="v-pills-tabContent">
</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.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
I use boostrap4, and want to do a left navigation panel as the above example.
But I found that when I click each tab, the href does not work? I refer boostrap documents
Two things:
When you click any tab, there is no content to match inside tab-content, from where the text are actually shown.
You have to set the corresponding id of the content to the related tab's href by prefixing #.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>
<div class="row">
<div class="col-3">
<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#page1" role="tab">Home</a>
<a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#page2" role="tab" >Profile</a>
<a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#page3" role="tab" >Messages</a>
<a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#page4" role="tab">Settings</a>
</div>
</div>
<div class="tab-content col-9" id="v-pills-tabContent">
<div class="tab-pane fade show active" id="page1" role="tabpanel" aria-labelledby="v-pills-home-tab">Home content...</div>
<div class="tab-pane fade" id="page2" role="tabpanel" aria-labelledby="v-pills-profile-tab">Profile content...</div>
<div class="tab-pane fade" id="page3" role="tabpanel" aria-labelledby="v-pills-messages-tab">Messages content...</div>
<div class="tab-pane fade" id="page4" role="tabpanel" aria-labelledby="v-pills-settings-tab">Settings content...</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.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
You're missing the tab content.
https://getbootstrap.com/docs/4.0/components/navs/#v-pills-tab
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>
<div class="row">
<div class="col-3">
<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<a class="nav-link active" id="v-pills-page-1" data-toggle="pill" href="#page1" role="tab" aria-controls="v-pills-page-1" aria-selected="true">Page 1</a>
<a class="nav-link" id="v-pills-page-2" data-toggle="pill" href="#page2" role="tab" aria-controls="v-pills-page-2" aria-selected="false">Page 2</a>
<a class="nav-link" id="v-pills-page-3" data-toggle="pill" href="#page3" role="tab" aria-controls="v-pills-page-3" aria-selected="false">Page 3</a>
<a class="nav-link" id="v-pills-page-4" data-toggle="pill" href="#page4" role="tab" aria-controls="v-pills-page-4" aria-selected="false">Page 4</a>
</div>
</div>
<div class="tab-content col-9" id="v-pills-tabContent">
<div class="tab-pane fade show active" id="page1" role="tabpanel" aria-labelledby="v-pills-page-1">page 1 content</div>
<div class="tab-pane fade" id="page2" role="tabpanel" aria-labelledby="v-pills-page-2">page 2 content</div>
<div class="tab-pane fade" id="page3" role="tabpanel" aria-labelledby="v-pills-page-3">page 3 content</div>
<div class="tab-pane fade" id="page4" role="tabpanel" aria-labelledby="v-pills-page-4">page 4 content</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.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
Related
I have been having some issues with populating the options of a searchable dropdown from the data stored in Google Sheets.
To check if the functions were working properly, I tried populating it for a normal dropdown, and it was working just fine, but as soon as I changed the HTML elements to get a searchable dropdown, I stopped seeing my options in the dropdown.
Following is my code:
funtions.gs:
function getSalesCaseOwnerDropdown(){
const ss = SpreadsheetApp.getActiveSpreadsheet();
const ws = ss.getSheetByName("CaseOwners");
return ws.getRange(2, 1, ws.getLastRow()-1, 1).getValues();
}
uform.html:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select#1.13.14/dist/css/bootstrap-select.min.css">
</head>
<body>
<div class="container">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="sales-tab" data-bs-toggle="tab" data-bs-target="#sales" type="button" role="tab" aria-controls="sales" aria-selected="false">Sales</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="purchase-tab" data-bs-toggle="tab" data-bs-target="#purchase" type="button" role="tab" aria-controls="purchase" aria-selected="false">Purchase</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">Contact Details</button>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">1</div>
<div class="tab-pane fade" id="sales" role="tabpanel" aria-labelledby="sales-tab">
<br><h3 class="display-6">New Sales Case</h3>
<div class="col-md-4">
<select class="selectpicker" data-live-search="true" aria-label=".form-select-sm example" id="inputSales-CaseOwner">
</select>
</div>
</div>
</div>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.6.0/dist/umd/popper.min.js" integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.min.js" integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG" crossorigin="anonymous"></script>
-->
<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.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select#1.13.14/dist/js/bootstrap-select.min.js"></script>
<script>
function afterFormLoadsSalesCaseOwner(){
google.script.run.withSuccessHandler(afterSalesDropdownReturned).getSalesCaseOwnerDropdown();
}
function afterSalesDropdownReturned(arrayOfArrays) {
var item = document.getElementById("inputSales-CaseOwner");
arrayOfArrays.forEach(function(r) {
var option = document.createElement("option");
option.textContent = r[0];
item.appendChild(option);
});
}
document.addEventListener("DOMContentLoaded",afterFormLoadsSalesCaseOwner);
</script>
</body>
</html>
What I am getting with The Searchable Dropdown:
Image 1
What I am getting with Normal Dropdown:
Image 2
I need the results that are populating in Image 2 to populate in Image 1.
Any help will be highly appreciated!! Thank you guys in Advance!!
I created a simple bootstrap 5 template:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Hugo 0.80.0">
<title>Detailed View</title>
<link rel="canonical" href="">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.4.0/font/bootstrap-icons.css">
<!-- Favicons -->
<link rel="apple-touch-icon" href="https://getbootstrap.com/docs/5.0/assets/img/favicons/apple-touch-icon.png"
sizes="180x180">
<link rel="icon" href="https://getbootstrap.com/docs/5.0/assets/img/favicons/favicon-32x32.png" sizes="32x32"
type="image/png">
<link rel="icon" href="https://getbootstrap.com/docs/5.0/assets/img/favicons/favicon-16x16.png" sizes="16x16"
type="image/png">
<link rel="manifest" href="https://getbootstrap.com/docs/5.0/assets/img/favicons/manifest.json">
<link rel="mask-icon" href="https://getbootstrap.com/docs/5.0/assets/img/favicons/safari-pinned-tab.svg"
color="#7952b3">
<link rel="icon" href="https://getbootstrap.com/docs/5.0/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#7952b3">
<!-- Custom styles for this template -->
<link href="../css/t02-stockDetailView_style.css" rel="stylesheet">
</head>
<body>
<main class="container">
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item">Home</li>
<li class="breadcrumb-item active" aria-current="page">Library</li>
</ol>
</nav>
<div class="text-center py-5 px-3">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6 px-0">
<div class="well well-sm">
<div class="row">
<div class="col-sm-6 col-md-4">
<img src="http://placehold.it/380x500" alt="" class="img-thumbnail"/>
</div>
<div class="col-sm-6 col-md-8">
<h4>
Bhaumik Patel</h4>
<p>CEO of Apple Inc.</p>
<small><cite title="San Francisco, USA">San Francisco, USA <i
class="glyphicon glyphicon-map-marker">
</i></cite></small>
<p>
<i class="bi bi-envelope"></i> email#example.com
<br/>
<i class="bi bi-globe"></i> www.jquery2dotnet.com
<br/>
<i class="bi bi-gift"></i> June 02, 1988</p>
</div>
</div>
</div>
</div>
</div>
<div class="row mt-3">
<ul class="nav nav-pills nav-fill" id="pills-tab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</a>
</li>
</ul>
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">test</div>
<div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">...</div>
<div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">test2</div>
</div>
</div>
</div>
</main><!-- /.container -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
</body>
</html>
When pressing the Home or Profile button nothing gets loaded.
I am loading all js components from bootstrap 5.
Any suggestions why the out of the box pile navigation does not work?
I appreciate your replies!
As i checked bootstrap 5 documentatiton no data-toggle attribute.
Change data-toggle with data-bs-toggle
https://getbootstrap.com/docs/5.0/components/navs-tabs/#javascript-behavior
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Hugo 0.80.0">
<title>Detailed View</title>
<link rel="canonical" href="">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.4.0/font/bootstrap-icons.css">
<!-- Favicons -->
<link rel="apple-touch-icon" href="https://getbootstrap.com/docs/5.0/assets/img/favicons/apple-touch-icon.png"
sizes="180x180">
<link rel="icon" href="https://getbootstrap.com/docs/5.0/assets/img/favicons/favicon-32x32.png" sizes="32x32"
type="image/png">
<link rel="icon" href="https://getbootstrap.com/docs/5.0/assets/img/favicons/favicon-16x16.png" sizes="16x16"
type="image/png">
<link rel="manifest" href="https://getbootstrap.com/docs/5.0/assets/img/favicons/manifest.json">
<link rel="mask-icon" href="https://getbootstrap.com/docs/5.0/assets/img/favicons/safari-pinned-tab.svg"
color="#7952b3">
<link rel="icon" href="https://getbootstrap.com/docs/5.0/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#7952b3">
<!-- Custom styles for this template -->
<link href="../css/t02-stockDetailView_style.css" rel="stylesheet">
</head>
<body>
<main class="container">
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item">Home</li>
<li class="breadcrumb-item active" aria-current="page">Library</li>
</ol>
</nav>
<div class="text-center py-5 px-3">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6 px-0">
<div class="well well-sm">
<div class="row">
<div class="col-sm-6 col-md-4">
<img src="http://placehold.it/380x500" alt="" class="img-thumbnail"/>
</div>
<div class="col-sm-6 col-md-8">
<h4>
Bhaumik Patel</h4>
<p>CEO of Apple Inc.</p>
<small><cite title="San Francisco, USA">San Francisco, USA <i
class="glyphicon glyphicon-map-marker">
</i></cite></small>
<p>
<i class="bi bi-envelope"></i> email#example.com
<br/>
<i class="bi bi-globe"></i> www.jquery2dotnet.com
<br/>
<i class="bi bi-gift"></i> June 02, 1988</p>
</div>
</div>
</div>
</div>
</div>
<div class="row mt-3">
<ul class="nav nav-pills nav-fill" id="pills-tab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</a>
</li>
</ul>
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">test</div>
<div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">...</div>
<div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">test2</div>
</div>
</div>
</div>
</main><!-- /.container -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
</body>
</html>
I have another one question on the improperly working tabs in Bootstrap 4.
I've tried a lot of examples from official documentation, from Stackoverflow and others. The issue is still the same.
So, I need to make switching tabs with contents. I took a code from Bootstrap 4 docs (https://getbootstrap.com/docs/4.0/components/navs/#javascript-behavior), put it to my page and linked all css and js.
The issue is that the tabs are switching properly, but the tab panes didn't change. There is no JS errors, proper js include order, all recommended version of js scripts. I have no ideas, what to do.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</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.0.0/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<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="/site/signup/advertiser#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="/site/signup/advertiser#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" id="contact-tab" data-toggle="tab" href="/site/signup/advertiser#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">1</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">2</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">3</div>
</div>
</div>
<script type="application/javascript" src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script type="application/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script type="application/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>
</html>
Please, explain me, what is wrong here.
Many thanks in advance!
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</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.0.0/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<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="#home1" role="tab" aria-controls="home" aria-selected="true">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile1" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact1" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home1" role="tabpanel" aria-labelledby="home-tab">1</div>
<div class="tab-pane fade" id="profile1" role="tabpanel" aria-labelledby="profile-tab">2</div>
<div class="tab-pane fade" id="contact1" role="tabpanel" aria-labelledby="contact-tab">3</div>
</div>
</div>
<script type="application/javascript" src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script type="application/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script type="application/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>
</html>
Your href should refer to your tab id only can work.
I am attempting to make an example prototype that uses two cards from Bootstrap 4 to show the information from a form and hold the information from a second related form in the second card. Right now, it looks like this:
Here is a JSFiddle with the code which i've already taken the step of introducing a specific class and selector in the style tag.
<!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://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<style>
div.card {
max-height: 50%;
min-height: 30%;
}
.wuformheader {
color: white;
padding-bottom: 0px;
background-color: blue;
}
ul.nav-tabs {
border-bottom: 0px;
}
div.card-header li.nav-item> a.active {
color: black;
background-color: white;
}
div.card-header li.nav-item> a {
color: white;
}
</style>
<title>Review Template</title>
</head>
<body>
<div class="card">
<div class="card-header wuformheader">
<ul class="nav nav-tabs" id="myTabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="nav-study-tab" data-toggle="tab" href="#study" role="tab" ari-controls="study" aria-selected="true">Study Information</a>
</li>
<li class="nav-item">
<a class="nav-link" id="nav-dept-tab" data-toggle="tab" href="#dept" role="tab" ari-controls="dept" aria-selected="false">Department Information</a>
</li>
<li class="nav-item">
<a class="nav-link" id="nav-contact-tab" data-toggle="tab" href="#contact" role="tab" ari-controls="contact" aria-selected="false">Contacts</a>
</li>
<li class="nav-item">
<a class="nav-link" id="nav-lab-tab" data-toggle="tab" href="#lab" role="tab" ari-controls="lab" aria-selected="false">Laboratory</a>
</li>
<li class="nav-item">
<a class="nav-link" id="nav-form-approvals-tab" data-toggle="tab" href="#formapprovals" role="tab" ari-controls="formapprovals" aria-selected="false">Approvals</a>
</li>
</ul>
</div>
<div class="card-body">
<div class="tab-content" id="nav-formTabContent">
<div class="tab-pane fade show active" id="study" role="tabpanel" aria-labelledby="nav-study-tab">
Study Tab!
</div>
<div class="tab-pane fade" id="dept" role="tabpanel" aria-labelledby="nav-dept-tab">
Department Tab!
</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="nav-dept-tab">
Contacts Tab!
</div>
<div class="tab-pane fade" id="lab" role="tabpanel" aria-labelledby="nav-dept-tab">
Labs!
</div>
<div class="tab-pane fade" id="formapprovals" role="tabpanel" aria-labelledby="nav-form-approvals-tab">
formapprovals!
</div>
</div>
</div>
</div>
<br/>
<div class="card">
<div="card-header wuformheader">
<ul class="nav nav-tabs" id="review-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="nav-notes-tab" data-toggle="tab" href="#notes" role="tab" ari-controls="notes" aria-selected="true">Notes</a>
</li>
<li class="nav-item">
<a class="nav-link" id="nav-criteria-tab" data-toggle="tab" href="#criteria" role="tab" ari-controls="criteria" aria-selected="false">Criteria</a>
</li>
<li class="nav-item">
<a class="nav-link" id="nav-approvals-tab" data-toggle="tab" href="#reviewapprovals" role="tab" ari-controls="reviewapprovals" aria-selected="true">Approval</a>
</li>
</ul>
</div>
<div="card-body">
<div class="tab-content" id="nav-reviewTabContent">
<div class="tab-pane fade show active" id="notes" role="tabpanel" aria-labelledby="nav-notes-tab">
Notes tab
</div>
<div class="tab-pane fade" id="criteria" role="tabpanel" aria-labelledby="nav-criteria-tab">
Criteria Tab
</div>
<div class="tab-pane fade" id="reviewapprovals" role="tabpanel" aria-labelledby="nav-approvals-tab">
Approvals
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- 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-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
</body>
</html>
What needs to change for both cards to have the correct (Top in the image) styling?
You have a typo in your html on line 83 in your jsfiddle:
<div="card-header wuformheader">
It should be:
<div class="card-header wuformheader">
You deleted the word "class"
I am trying to implement a toggleable tab menu through bootstrap and also using Material Design for bootstrap
I have a issue with the tabs after the first one always pushing its content down (below where the 1st tab content would be)
I have searched around and found a similar issue discussed here and also tried the solution provided but it didn't seem to work for me
$('#toggle-tabs a').click(function(e) {
e.preventDefault()
$(this).tab('show')
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript">
</script>
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,700' rel='stylesheet' type='text/css'>
<script src="https://use.fontawesome.com/abacba2780.js">
</script>
<div class="container-fluid">
<!-- Content -->
<div class="row">
<!-- Nav tabs -->
<div class="col-sm-2">
<ul class="nav nav-tabs md-pills pills-secondary flex-column" role="tablist">
<li class="nav-item elegant-color-dark">
<a class="nav-link active" data-toggle="tab" href="#test1" role="tab"><br>
<h3>Test1</h3>
</a>
</li>
<li class="nav-item elegant-color-dark">
<a class="nav-link" data-toggle="tab" href="#test2" role="tab"><br>
<h3>Test2</h3>
</a>
</li>
<li class="nav-item elegant-color-dark">
<a class="nav-link" data-toggle="tab" href="#test3" role="tab"><br>
<h3>Test3</h3>
</a>
</li>
</ul>
</div>
</div>
</div>
<!-- Tab panels -->
<div class="tab-content vertical col-sm-10" id="toggle-tabs">
<!--Panel 1-->
<div class="tab-pane fade in show active" id="test1" role="tabpanel">
<h3>Test1</h3>
</div>
<!--Panel 2-->
<div class="tab-pane fade in" id="test2" role="tabpanel">
<h3>Test2</h3>
</div>
<!--Panel 3-->
<div class="tab-pane fade in" id="test3" role="tabpanel">
<h3>Test3</h3>
</div>
</div>
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.3.1/css/mdb.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.3.1/js/mdb.min.js" type="text/javascript">
</script>
You need to remove the show class from the default active tab, so tab-pane fade in show active becomes tab-pane fade in active:
$('#toggle-tabs a').click(function(e) {
e.preventDefault()
$(this).tab('show')
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js">
</script>
<!-- Latest compiled and minified CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- Optional theme -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript">
</script>
<script src="main.js" type="text/javascript">
</script>
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,700' rel='stylesheet' type='text/css'>
<script src="https://use.fontawesome.com/abacba2780.js">
</script>
</head>
<body>
<div class="container-fluid">
<!-- Content -->
<div class="row">
<!-- Nav tabs -->
<div class="col-sm-2">
<ul class="nav nav-tabs md-pills pills-secondary flex-column" role="tablist">
<li class="nav-item elegant-color-dark">
<a class="nav-link active" data-toggle="tab" href="#test1" role="tab"><br>
<h3>Test1</h3>
</a>
</li>
<li class="nav-item elegant-color-dark">
<a class="nav-link" data-toggle="tab" href="#test2" role="tab"><br>
<h3>Test2</h3>
</a>
</li>
<li class="nav-item elegant-color-dark">
<a class="nav-link" data-toggle="tab" href="#test3" role="tab"><br>
<h3>Test3</h3>
</a>
</li>
</ul>
</div>
</div>
</div>
<!-- Tab panels -->
<div class="tab-content vertical col-sm-10" id="toggle-tabs">
<!--Panel 1-->
<div class="tab-pane fade in active" id="test1" role="tabpanel">
<h3>Test1</h3>
</div>
<!--Panel 2-->
<div class="tab-pane fade in" id="test2" role="tabpanel">
<h3>Test2</h3>
</div>
<!--Panel 3-->
<div class="tab-pane fade in" id="test3" role="tabpanel">
<h3>Test3</h3>
</div>
</div>
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.3.1/css/mdb.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.3.1/js/mdb.min.js" type="text/javascript">
</script>
</body>
</html>
Remove the show class from the first tab pane
<div class="tab-pane fade in show active" id="test1" role="tabpanel">
<h3>Test1</h3>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js">
</script>
<!-- Latest compiled and minified CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- Optional theme -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript">
</script>
<script src="main.js" type="text/javascript">
</script>
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,700' rel='stylesheet' type='text/css'>
<script src="https://use.fontawesome.com/abacba2780.js">
</script>
</head>
<body>
<div class="container-fluid">
<!-- Content -->
<div class="row">
<!-- Nav tabs -->
<div class="col-sm-2">
<ul class="nav nav-tabs md-pills pills-secondary flex-column" role="tablist">
<li class="nav-item elegant-color-dark">
<a class="nav-link active" data-toggle="tab" href="#test1" role="tab"><br>
<h3>Test1</h3>
</a>
</li>
<li class="nav-item elegant-color-dark">
<a class="nav-link" data-toggle="tab" href="#test2" role="tab"><br>
<h3>Test2</h3>
</a>
</li>
<li class="nav-item elegant-color-dark">
<a class="nav-link" data-toggle="tab" href="#test3" role="tab"><br>
<h3>Test3</h3>
</a>
</li>
</ul>
</div>
</div>
</div>
<!-- Tab panels -->
<div class="tab-content vertical col-sm-10" id="toggle-tabs">
<!--Panel 1-->
<div class="tab-pane fade in active" id="test1" role="tabpanel">
<h3>Test1</h3>
</div>
<!--Panel 2-->
<div class="tab-pane fade in" id="test2" role="tabpanel">
<h3>Test2</h3>
</div>
<!--Panel 3-->
<div class="tab-pane fade in" id="test3" role="tabpanel">
<h3>Test3</h3>
</div>
</div>
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.3.1/css/mdb.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.3.1/js/mdb.min.js" type="text/javascript">
</script>
</body>
</html>