I am making an android app with the Webview technique. To make a look and feel like an android I am using a Material CSS (https://daemonite.github.io/material/) framework.
Now my problem is the drawer is not touch-sensitive. I can't push it back like an android drawer. The drawer can only close by touching outside of this. Please solve the problem.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="initial-scale=1, shrink-to-fit=no, width=device-width" name="viewport">
<title>Material</title>
<!-- CSS -->
<!-- Add Material font (Roboto) and Material icon as needed -->
<link href="https://fonts.googleapis.com/css?family=Roboto:500" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Add Material CSS, replace Bootstrap CSS -->
<link href="/material/css/material.min.css" rel="stylesheet">
<!-- Additional CSS for documentation site -->
<link href="/material/docs/css/docs.min.css" rel="stylesheet">
</head>
<body class="bg-light h-100">
<header class="navbar navbar-dark navbar-full bg-primary doc-navbar-default">
<button aria-controls="navdrawerDefault" aria-expanded="false" aria-label="Toggle Navdrawer" class="navbar-toggler" data-target="#navdrawerDefault" data-toggle="navdrawer"><span class="navbar-toggler-icon"></span></button>
<span class="navbar-brand mr-auto">Navdrawer</span>
</header>
<div aria-hidden="true" class="navdrawer" id="navdrawerDefault" tabindex="-1">
<div class="navdrawer-content">
<div class="navdrawer-header">
<a class="navbar-brand px-0" href="javascript:void(0)">Navdrawer header</a>
</div>
<nav class="navdrawer-nav">
<a class="nav-item nav-link active" href="javascript:void(0)">Active</a>
<a class="nav-item nav-link disabled" href="javascript:void(0)">Disabled</a>
<a class="nav-item nav-link" href="javascript:void(0)">Link</a>
</nav>
<div class="navdrawer-divider"></div>
<p class="navdrawer-subheader">Navdrawer subheader</p>
<ul class="navdrawer-nav">
<li class="nav-item">
<a class="nav-link active" href="javascript:void(0)"><i class="material-icons mr-3">alarm_on</i> Active with icon</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="javascript:void(0)"><i class="material-icons mr-3">alarm_off</i> Disabled with icon</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)"><i class="material-icons mr-3">link</i> Link with icon</a>
</li>
</ul>
</div>
</div>
<!-- JavaScript -->
<script crossorigin="anonymous" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script crossorigin="anonymous" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script crossorigin="anonymous" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<!-- Add Material JavaScript on top of Bootstrap JavaScript -->
<script src="/material/js/material.min.js"></script>
</body>
</html>
Related
The javascript toggle element of my toggle collapse and expand doesn't work. This is my first project in javascript and i feel i must be doing something basic wrong.
I have the Nav bar set up so that the toggle is active at all screen sizes and the logo is central as this is a one page Game.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SPLANETS</title>
<meta content="" name="description">
<meta content="" name="keywords">
<!-- Favicons -->
<link href="assets/img/splanetsfavicon.png" rel="icon">
<!-- Main Bootstrap Css-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- Main CSS File -->
<link href="/assets/css/style.css" rel="stylesheet">
<!--Icons-->
<script src="https://kit.fontawesome.com/128d236a07.js" crossorigin="anonymous"></script>
</head>
<body id="bg-space">
<!-- === Header === -->
<header>
<nav class="navbar">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
<span ><i class="earth-icon fa-solid fa-earth-americas"></i></span>
</button>
<a class="navbar-brand mx-auto" href="index.html"><img src="assets/img/templogo.png" alt="Splanets Logo" class="img-fluid "></a>
<div class="collapse navbar-collapse" id="navbarTogglerDemo03">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<!-- End of Header -->
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.min.js" integrity="sha384-mQ93GR66B00ZXjt0YO5KlohRA5SY2XofN4zfuZxLkoj1gXtW8ANNCe9d5Y3eG5eD" crossorigin="anonymous"></script>
</body>
</html>
I have included both bootstrap js file links at the bottom of the file and tested and everything loads correctly.
I have taken away my code and copied over the bootstrap nav and still i get no interactivity from the toggle.
I am using Bootstrap but don't know why the toggle button is not working I have searched it on the internet but didn't get the right answer there are many similar questions on the StackOverflow but they are not also solving me problem Like Bootstrap toggle button is not working and bootstrap navbar toggle button is not working
So please can anyone tell me why it is happening.
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<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://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<link rel="stylesheet" href="style.css">
<title>TutorInet</title>
</head>
<nav class="navbar navbar-expand-lg navbar-light ">
<div class="container-fluid">
<a style="font-weight: 500;">
<h3 style="color:#4A4A4A;text-transform: uppercase;margin-top:8px;"> Tutor<span
style="color:#F97C44;">I</span>net</h3>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.tutorinet.com/blog.php">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.tutorinet.com/contact.php">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">How it works</a>
</li>
<li style="color:#1EB909;font-weight: 600;" class="nav-item">
<a style="color:#1EB909;font-weight: 600;" class="nav-link" href="https://www.tutorinet.com/login.php">Log
in</a>
</li>
<button style="color:white;background: #1EB909;border: none;" type="button" class="btn btn-primary"><a
style="color:white;background: #1EB909;" href="https://www.tutorinet.com/signup.php?type=1">Sign
Up</a></button>
</ul>
</div>
</div>
</nav>
You need to remove the bootstrap script you have and include bootstrap.bundle.min.js
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
also the id value in your div should be the same with data-bs-target value in your button
<div class="collapse navbar-collapse" id="navbarSupportedContent">
This question already has answers here:
Bootstrap navbar: nothing is displayed on smaller devices
(1 answer)
bootstrap 4 nav doesn't display hamburger on resize
(2 answers)
Closed 1 year ago.
I have html code, when I resize the browser screen I have a problem that the toggle button is not displayed (it is transparent) when I click on it the navigation bar items are not showing at allScreenshot of my web
<html>
<head>
<title>
profile
</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap CSS-->
<link rel="stylesheet" href="../css/bootstrap/bootstrap.css">
<!-- w3 CSS-->
<link rel="stylesheet" href="../css/W3.css">
<!-- profile CSS-->
<link rel="stylesheet" href="../css/accueil.css">
<!-- flaticon CSS-->
<link rel="stylesheet" href="../icons/font/flaticon.css">
<!--Scripts-->
<!-- JQuery script-->
<script src="../js/jQuery.js"></script>
<!-- Bootstrap script-->
<script src="../js/bootstrap/bootstrap.bundle.min.js"></script>
</head>
<body>
<header>
<nav class="navbar navbar-expand-md fixed-top">
<div class="container-fluid">
<a class="navbar-brand" href="accueil.html">
<h4>LOGO</h4>
</a>
<!--Collapse button -->
<button type="button" class="navbar-toggler"
data-bs-toggle="collapse" data-bs-target="#coll_target"
aria-controls="coll_target" aria-expanded="false"
aria-label="Toggle Navbar" >
<span class="navbar-toggler-icon" ></span>
</button>
<!--Collapse Div -->
<div class="collapse navbar-collapse" id="coll_target">
<div class="mx-auto"></div>
<ul class="navbar-nav ml-auto">
<li class="nav-item"><a class="nav-link"><span><i class="flaticon-ringing" style="color: white;"></i></span></a></li>
<li class="nav-item"><a class="nav-link"><span><i class="flaticon-email" style="color: white;"></i></span></a></li>
<li class="nav-item"><a class="nav-link"><span><i style="color: white;" class="flaticon-down-arrow"></i></span></a></li>
<li class="nav-item"><a class="nav-link"><span><i style="color: white;" class="flaticon-translation"></i></span></a></li>
<li class="nav-item"><a class="nav-link"><span><i class="flaticon-settings" style="color: white;"></i></span></a></li>
</ul>
</div>
</div>
</nav>
</header>
</body>
</html>
You should read the documentation here https://getbootstrap.com/docs/5.0/getting-started/introduction/
I assume you have basic knowledge in CSS and HTML , In order to use Bootstrap, you first need to integrate it into your development environment correctly, Either by loading it remotely or by download and use it locally;
Long story short your pages should look like this:
<!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.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<!---include navbar components to demonstrate what you need----->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
</body>
</html>
Bootstrap has a lot of responsive classes that suit your need
I have a Django Landing page + few extra description pages.
I store the navbar with bootstrap 4 scrollspy in the base.html file what points on IDs on the home.html.
When I am on the home page it works like in the official bootstarp example.
1.ERROR
But when I go to other pages it just puts this URL out "http://127.0.0.1:8000/home/services/#pricing" and stay under the "http://127.0.0.1:8000/home/services/" URL.
I get a terminal ERROR message as well:
Not Found: /docs/4.3/dist/js/bootstrap.bundle.min.js
[13/Jan/2020 16:16:35] "GET /docs/4.3/dist/js/bootstrap.bundle.min.js HTTP/1.1" 404 2509
I have seen:
Bootstrap scrollspy when accessing from another page but this is bootstrap 3
and Twitter Bootstrap Scrollspy not working at all and this one is some very old version of bootstrap (+6 years ago)
2.ERROR
In the original example the navbar area where it send the user is highlighted. Mine not highlighted at all.
3. ERROR
The navbar not stay on the top when I scroll or go to any of the navbar elements by clicking on them.
If I implement any of the following than it covers the first few lines of the page.
To keep the navbar above these lines I use <div class="godown-60" id="godown"></div> lien of code.
I have tried class=" ":
Fixed navbar
fixed-top
sticky-top
base.html
<body>
<header>
<nav id="navbar-example2" class="navbar navbar-static-top navbar-light bg-light">
<a class="navbar-brand" href="{% url 'home' %}" > HOME PAGE </a>
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#services">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#pricing">Pricing</a>
</li>
</ul>
</nav>
...
home.html
<body>
<div data-spy="scroll" data-target="#navbar-example2" data-offset="0">
<h4 id="about">About</h4>
AboutTest
<p>...</p>
<h4 id="services">Services</h4>
ServicesTest
<p>...</p>
<h4 id="pricing">Pricing</h4>
PricingTest
<p>...</p>
</div>
...
This example have solved ERROR 1 and 3 (2 wasn't that important)
https://getbootstrap.com/docs/4.0/examples/navbar-top-fixed/#
ERROR 1 solution, bey using specified address (these can be actual URL's on the site or libraries as well)
href="home/help/#main"
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon.ico">
<title>Fixed top navbar example for Bootstrap</title>
<link rel="canonical" href="https://getbootstrap.com/docs/4.0/examples/navbar-top-fixed/">
<!-- Bootstrap core CSS -->
<link href="../../dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="navbar-top-fixed.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<a class="navbar-brand" href="#">Fixed navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="home/help/#main">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline mt-2 mt-md-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<!-- this solves ERROR 3 -->
<!-- having a separated section -->
<main role="main" class="container">
<div class="jumbotron">
<h1>Navbar example</h1>
<p class="lead">This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser's viewport.</p>
<a class="btn btn-lg btn-primary" href="../../components/navbar/" role="button">View navbar docs »</a>
</div>
</main>
<!-- XXXXXXXXXXXXXXXXXXXXXXXXXXXX -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
<script src="../../assets/js/vendor/popper.min.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script>
</body>
</html>
I am using bootstrap tooltip as explained # https://getbootstrap.com/docs/4.3/components/tooltips/
I have successfully created tooltip but tooltip is appearing un-formatted. I believe this is because the tooltip is not getting initialized. I have the code added as shown on the page below.Tried initialization code at different places on page as well.
<!-- # TBD - Make this page look like https://getbootstrap.com/docs/4.0/examples/sign-in/ -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="Martious">
<link rel="shortcut icon" href="/static/favicon.ico">
<title>Start Your Data Science Journey Here...</title>
<!-- Bootstrap Core CSS -->
<link href="/static/css/bootstrap.min.css" rel="stylesheet">
<!-- Additional Custom Style CSS -->
<link href="/static/css/starter-template.css" rel="stylesheet">
<link href="/static/open-iconic/font/css/open-iconic-bootstrap.css" rel="stylesheet">
</head>
<body>
<!--
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
-->
<nav class="navbar navbar-expand-md navbar-dark fixed-top" style="background-color: #00aeef;">
<a class="navbar-brand" href="/"> Martious Data Science Hub </a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-link inactive">
 
</li>
<!--
<li class="nav-link inactive">
|
</li>
<li class="nav-item active">
<a class="nav-link" href="#"><i class="fa fa-minus-circle"></i> Score Card</a>
</li>
-->
</ul>
<ul class="navbar-nav navbar-right">
<li class="nav-item active">
<a class="nav-link" href="#">Welcome, "Test User!"<span class="sr-only">(current)</span></a>
</li>
<li class="nav-link inactive">
|
</li>
<!--
<li class="nav-item active">
<a class="nav-link" href="#"> <i class="fa fa-user"></i> My Profile <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#"> <i class="fa fa-user"></i> My Team <span class="sr-only">(current)</span></a>
</li>
-->
<li class="nav-item active">
<a class="nav-link" href="/authorization/logout/"> <i class="fa fa-sign-out"></i> Logout <span class="sr-only">(current)</span></a>
</li>
</ul>
</div>
</nav>
<script>
$(function () {
$('[data-toggle="tooltip"]').tooltip()
});
</script>
<div class="mx-auto" style="max-width: 70%">
<div class="container text-center text-muted">
<div class="container align-middle">
<BR><BR><BR>
<div class="display-4">Sentiment Analysis
<!-- <span class="text-warning"><small>ⓘ</small></span>-->
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-html="true" data-placement="right" title="<b>Upload a text (*.txt) file to analyze sentiment using Vader algorithm</b>">
<span class="oi oi-info" aria-hidden="true"></span>
</button>
</div>
</div>
</div>
</div>
<!-- https://www.npmjs.com/package/bs-custom-file-input -->
<script src="/static/js/bs-custom-file-input.min.js"></script>
<script>
bsCustomFileInput.init();
</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.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
-->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
</body>
</html>
Tooltip style is not picked up as shown on bootstrap page.
Tooltip Rendered
Expected Tooltip
I cannot find what is wrong with code. Looking for help...
I was able to fix this issue by adding bootstrap import in head
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="Martious">
<link rel="shortcut icon" href="/static/favicon.ico">
<title>Start Your Data Science Journey Here...</title>
<!-- Bootstrap Core CSS -->
<link href="/static/css/bootstrap.min.css" rel="stylesheet">
<!-- Additional Custom Style CSS -->
<link href="/static/css/starter-template.css" rel="stylesheet">
<link href="/static/open-iconic/font/css/open-iconic-bootstrap.css" rel="stylesheet">
<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.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
This is NOT as per bootstrap recommendation (https://getbootstrap.com/docs/4.3/getting-started/introduction/#starter-template), but it works.
The fix came from code described # https://www.w3schools.com/bootstrap4/bootstrap_tooltip.asp
I suggest you to just use the bundle Popper + Bootstrap: bootstrap.bundle.min.js or bootstrap.bundle.js. That should bypass any problem you may have with correct file order initialization. I mean, whether you place your files in header and/or body (in my case, it worked after placing the bundle at the bottom of the body, before closing the body tag).
https://getbootstrap.com/docs/5.1/components/tooltips/#overview
And remember to initialize the tooltips correctly from your local scripts:
https://getbootstrap.com/docs/5.1/components/tooltips/#example-enable-tooltips-everywhere
This Vanila JS code should be enough for that:
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
By the way, I placed this code after the aforementioned bundle.