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.
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 want my toggler menu to work but it does not i want to know why it does not work?I will like to also know want links that i need to remove and how to improve my website speed.I resize the broewser and find out that the website is not show the toggle menu icon but it is there but it will not open a new menu
<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="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Jekyll v3.8.6">
<title>Pipes and Wheels</title>
<link rel="canonical" href="https://getbootstrap.com/docs/4.4/examples/jumbotron/">
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<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>
<!-- Favicons -->
<link rel="icon" href="/docs/4.4/assets/img/favicons/favicon.ico">
<meta name="msapplication-config" content="/docs/4.4/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
<!-- Custom styles for this template -->
<link href="jumbotron.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-white">
<a class="navbar-brand" href="#"><img style="height: 100px;" src="logo.png" alt=""></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-item active">
<a class="nav-link" href="#" style="color: black;">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#jumbotron1" style="color: black;">Our goals <span class="sr-only">(current)</span></a>
</li>
</ul>
<form class="form-inline my-2 my-lg-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>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
</body>
</html>
After reviewing your HTML code, I can see that you're using two different versions of Bootstrap. You're using 4.4.1 for CSS and 5.0.2 for JS. I believe it should work if you first unified the versions, then based on the selected version check docs for proper HTML markup
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<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>
You can follow these links for relevant docs for each version Bootstrap 4.4, Bootstrap 5
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 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>
i recently wanted to do an app with Node.JS, tried to rendering some html with the bootstrap framework, but the problem is that the navbar is shown like that :
The rendering
I copied/pasted exactly the demo code of the doc found there : https://v4-alpha.getbootstrap.com/components/navbar/
So, i don't know what is the problem here :/
EDIT 1 : Apparently it is the same issue locally, without server or anything
<!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 prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css'>
</head>
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<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="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
</div>
<!-- /container -->
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
<script src="/assets/popper/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js'></script>
</body>
</html>
Well, the problem is with those bootstrap links.
Bootstrap CDN
When you only need to include Bootstrap's compiled CSS or JS, you can use the Bootstrap CDN.
CSS only
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
JS, Popper, and jQuery
<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.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
I hope this will help. Have a great journey to the WORLD OF WEB DEVELOPERS!
Ok i redefined the CDN for the latest version of Bootstrap and c/p the example found on the doc of bootstrap v4 (latest, not the alpha v*) with navbar demos and seem to be nice now.