For whatever reason, it doesn't seem like my HTML doc is linking to the Bootstrap stylesheet. I used one of their dropdown code snippets, but the end result isn't stylized. Can someone see if I'm doing something wrong? Below is my HTML code.
where is my fault
drop down menu does not work
I use bootstrap5
https://getbootstrap.com/docs/5.0/getting-started/introduction/
<html>
<head>
<title>yönetim paneli</title>
<!-- CSS only -->
<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">
<!-- JavaScript Bundle with Popper -->
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></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>
</head>
<body>
<header>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#"><img src="../imgs/logo.png" width="100px"></a>
<button class="navbar-toggler" 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>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown active">
<a class="active nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Yazarlar
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Yeni Ekle</a>
<a class="dropdown-item" href="#">Tüm Yazarlar</a>
</div>
</li>
</ul>
</div>
</nav>
</header>
</body>
You were missing a couple of li and other important Bootstrap classes. Make sure to match Bootstraps docs with your own work
https://getbootstrap.com/docs/5.0/components/navbar/
<html>
<head>
<title>yönetim paneli</title>
<!-- CSS only -->
<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">
</head>
<body>
<header>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#"><img src="../imgs/logo.png" width="100px"></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 dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Yazarlar
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Yeni Ekle</a></li>
<li><a class="dropdown-item" href="#">Tüm Yazarlar</a></li>
</ul>
</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>
</header>
<!-- JavaScript 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>
</body>
</html>
Related
I tried the navbar toggler in mobile view and it is not showing the list.
here is my code, I have a CSS file linked in the head tag and other script tags inside the body tag
<body>
<header class="bg-info">
<div class="row text-white">
<div class="col-md-6 xs-9 ">
<h2>yahiya muhammed</h2>
</div>
<div class="col-md-6 col-xs-3 my-auto">
<nav class="navbar navbar-expand-lg navbar-light">
<button class="navbar-toggler ms-auto" 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>
<div class="collapse navbar-collapse justify-content-end " id="navbarSupportedContent">
<ul class="navbar-nav ">
<li class="nav-item active">
<a class="nav-link text-white" href="#">Home <span class="sr-only"></span></a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="#">services</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="#">prjects</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="#">contact me</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
</header>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.min.js" integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
</body>
I tried to mobile view and the navbar toggler is not showing items
Your toggle button has incorrect attributes. Change data-toggle="collapse" to data-bs-toggle="collapse" and change data-target="#navbarSupportedContent" to data-bs-target="#navbarSupportedContent".
Working snippet below:
<button class="navbar-toggler ms-auto" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</head>
<body>
<header class="bg-info">
<div class="row text-white">
<div class="col-md-6 xs-9 ">
<h2>yahiya muhammed</h2>
</div>
<div class="col-md-6 col-xs-3 my-auto">
<nav class="navbar navbar-expand-lg navbar-light">
<button class="navbar-toggler ms-auto" 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 justify-content-end " id="navbarSupportedContent">
<ul class="navbar-nav ">
<li class="nav-item active">
<a class="nav-link text-white" href="#">Home <span class="sr-only"></span></a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="#">services</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="#">prjects</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="#">contact me</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
</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.2.3/dist/js/bootstrap.min.js" integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V" crossorigin="anonymous"></script>
</body>
</html>
I have followed the code from BootStrap as follows:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<!-- Nav Bar -->
<nav class="navbar bg-dark navbar-expand-lg navbar-dark">
<a class="navbar-brand" href="index.html">One Basket</a>
<button class="navbar-toggler ms-auto" type="button" data-mdb-toggle="collapse" data-mdb-target="#navbarToggleExternalContent2" aria- controls="navbarToggleExternalContent2" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarToggleExternalContent2">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Download</a>
</li>
</ul>
</div>
</nav>
I have also added the CSS from the bootstrap documentation and the javascript to the HTML file.
The JS is at the end before the close body tag, just like it says on the bootstrap website.
The CSS is the first link tag in the head.
But when I try to press the button nothing happens.
You have wrong attributes to make it work by default, just replace data-mdb-toggle="collapse" data-mdb-target="#navbarToggleExternalContent2" with data-bs-toggle="collapse" data-bs-target="#navbarToggleExternalContent2", see (in my CodeSnippet I using BS v5.1):
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<!-- Nav Bar -->
<nav class="navbar bg-dark navbar-expand-lg navbar-dark">
<a class="navbar-brand" href="index.html">One Basket</a>
<button class="navbar-toggler ms-auto" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggleExternalContent2" aria- controls="navbarToggleExternalContent2" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarToggleExternalContent2">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Download</a>
</li>
</ul>
</div>
</nav>
I am new to Bootstrap and am trying to build a three-column navigation menu with the nav-links centered in the middle. I could build this in five minutes using grids or flexbox but for the life of me, I can't center the nav-links!!! picture for reference.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<img src="/resources/images/Babyboom_logo_main.png" width="200" height="50" alt="BabyBoom logo" class="navbar-brand">
<button class="navbar-toggler" 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>
<col>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Sessions</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
<div class="col-sm">
<a class="btn btn-primary float-right" href="#" role="button">Book Now</a>
</div>
</div>
</nav>
try using mx-auto. The bellow code should work for you:)
<html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" ></script>
<div class="row ">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<img src="/resources/images/Babyboom_logo_main.png" width="200" height="50" alt="BabyBoom logo" class="navbar-brand">
<button class="navbar-toggler" 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>
<div class="col-md-9 ">
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="col-md-3 navbar-nav mx-auto">
<li class="nav-item">
<a class="nav-link" href="#">Sessions</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
<div class="col-md-2">
<a class="btn btn-primary float-right" href="#" role="button">Book Now</a>
</div>
</div>
</div>
</nav>
<!-- end snippet -->
</html>
You can do it in two ways
By adding mx-auto class to ul tag i.e
<ul class="col-md-3 navbar-nav mx-auto">
By adding justify-content-center to the collapse div
<div class="collapse navbar-collapse justify-content-center" id="navbarSupportedContent">
Hope it work for you :)
Here is my code for navbar. It's working perfectly in desktop view but when it comes to mobile view the drop down is not functioning properly. What I might be doing wrong?
<nav class="fixed-top navbar navbar-expand-lg navbar-dark ftco_navbar bg-dark ftco-navbar-light" id="ftco-navbar">
<div class="container">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#ftco-nav" aria-controls="ftco-nav" aria-expanded="false" aria-label="Toggle navigation">
<span class="fa fa-bars"></span> Menu
</button>
<form action="#" class="searchform order-lg-last">
</form>
<div class="collapse navbar-collapse" id="ftco-nav">
<ul class="navbar-nav mr-auto mt-2">
<a class="navbar-brand" href="<?php echo base_url() ?>home"><img src="<?php echo base_url() ?>assets/images/logo.png"></a>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item ">Home</li>
<li class="nav-item">About</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Our Services
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Construction and Planning</a>
<a class="dropdown-item" href="#">Architecting</a>
<a class="dropdown-item" href="#">General Services</a>
<a class="dropdown-item" href="#">Interior Design</a>
</div>
</li>
<li class="nav-item">Contact</li>
</ul>
</div>
</div>
</nav>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous"
/>
<title>Document</title>
</head>
<body>
<nav
class="fixed-top navbar navbar-expand-lg navbar-dark ftco_navbar bg-dark ftco-navbar-light"
id="ftco-navbar"
>
<div class="container">
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#ftco-nav"
aria-controls="ftco-nav"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="fa fa-bars"></span> Menu
</button>
<form action="#" class="searchform order-lg-last"></form>
<div class="collapse navbar-collapse" id="ftco-nav">
<ul class="navbar-nav mr-auto mt-2">
<a class="navbar-brand" href="<?php echo base_url() ?>home"
><img src="<?php echo base_url() ?>assets/images/logo.png"
/></a>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
Home
</li>
<li class="nav-item">
About
</li>
<li class="nav-item dropdown">
<a
class="nav-link dropdown-toggle"
href="#"
id="navbarDropdown"
role="button"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
Our Services
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Construction and Planning</a>
<a class="dropdown-item" href="#">Architecting</a>
<a class="dropdown-item" href="#">General Services</a>
<a class="dropdown-item" href="#">Interior Design</a>
</div>
</li>
<li class="nav-item">
<a href="<?php echo base_url() ?>contact" class="nav-link"
>Contact</a
>
</li>
</ul>
</div>
</div>
</nav>
<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>
<!-- Always remember to call the above files first before calling the
bootstrap.min.js file -->
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"
integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1"
crossorigin="anonymous"
></script>
</body>
</html>
Can you try adding these scripts. It seems to be working. Please let me know if this is working for you.
Im using bootstrap 4 and I have the solution to this with bootstrap 3 but appearently with bootsrap 4 is not quite the same. Im stuck and this is the last thing in need in order to complete the project.
this is my navbar (with bootstrap 4):
<nav class="navbar fixed-top navbar-expand-lg navbar-light pink" id="navbar-fixed">
<a class="navbar-brand" href="#"><img src="images/perfect-party-rental-logo.jpg" class="logo"></a>
<!-- Collapse button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupported" aria-controls="navbarSupported"
aria-expanded="false" aria-label="Toggle navigation"></button>
<!-- Collapsible content -->
<div class="collapse navbar-collapse" id="navbarSupported">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link active" href="#home"><i class="fa fa-home" aria-hidden="true"></i> Home<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#inflatables"><i class="fa fa-smile-o" aria-hidden="true"></i> Inflatables</a>
</li>... <!--ETC-->
And this the JS code snipppet from bootstrap 3 :
$(".navbar-collapse ul li a").click(function(event) {
$(".navbar-collapse").collapse('hide');
});
The console keep saying "collapse" is not a function :S
Any clue?
Here's an example of a working navbar in Bootstrap 4 (as you can see it doesn't require any additional JavaScript snippets).
Click the "run code snippet" button and expand to full screen for testing:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" 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>
<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 dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</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="search" 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.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>
EDIT (adding from my comment):
I checked your codepen and while it was working on my side I saw this in the console: "Uncaught Error: Bootstrap dropdown require Popper.js" which means you aren't loading the popper.js which is required for all things that pop up or drop down in Bootstrap 4. Use the files I included at the bottom of my code snippet and it should work. Also, in your codepen you are loading bootstrap 4.0.0-beta.2. That version is outdated now. Copy and paste ALL stuff from my snippet. That's why I posted it for you.