I have a Navigation with a bell Icon. I would like to add a badge which contains a number on the top right of the Icon (like in a few Android apps). I found some Blogs which accomplish this adding the number in css, but I Need to add the number on the Server side so doing something like this:
<span>$number</span>
Would be better.
The layout Looks like this so far:
<li class="nav-item dropdown">
<a href="#" id="navbar-inquiries-dropdown" class="nav-link dropdown-toggle" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
<i class="fas fa-bell"></i>
// here add badge????
</a>
<ul class="nav-item dropdown-menu" role="menu" aria-labelledby="navbar-inquiries-dropdown">
<li class="nav-item">
<a class="dropdown-item" href="{{ route('inquiry.index') }}">
Requests
</a>
</li>
</ul>
</li>
FontAwesome has this in their documentation.
Take a look at https://fontawesome.com/how-to-use/svg-with-js and find Layering, Text, & Counters
SVG with JS requires you to use the JS version of FontAwesome. Latest CDN link can be found here: https://fontawesome.com/get-started/svg-with-js
<span class="fa-layers fa-fw" style="background:MistyRose">
<i class="fas fa-bell"></i>
<span class="fa-layers-counter" style="background:Tomato">1,419</span>
</span>`
You can position the counter using the following classes:
fa-layers-bottom-left, fa-layers-bottom-right, fa-layers-top-left and the default fa-layers-top-right
Can you try this and let me know if it was what you wanted
<i class="fas fa-bell badge-wrapper">
<span class='badge badge-secondary'>21</span>
</i>
Style
.badge-wrapper {
position: relative;
}
.badge {
position: absolute;
top: 0;
right: -5px;
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #ddd;
}
Favorit
Pesanan
2 Notification
.badge {
position: absolute;
font-size: xx-small;
margin-left: -5px;
margin-top: -10px;
background-color: var(--orange);
color: white;
}
<!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://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<ul class="navbar-nav ml-auto">
<li class="nav-item mr-3">
<i class="fa fa-bell"><span class='badge badge-pill'>2</span></i> Notification
</li>
</ul>
<h1>Hello, world!</h1>
</body>
</html>
Related
So i want to add badge on top of the icon but it always show in the right of the icon
Here's the screenshot:
this is my code:
<li class="nav-item mr-3">
<a href="#" class="nav-link nav-icon">
<i class="uil uil-bell">
<span class="badge badge-light">2</span>
</i>
</a>
</li>
i want to look like this:
You can do this by using position: absolute.
.iconClass{
position: relative;
}
.iconClass span{
position: absolute;
top: 0px;
right: 0px;
display: block;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet" />
<li class="nav-item mr-3" style="width: 40px;">
<a href="#" class="nav-link nav-icon iconClass">
<i class="fas fa-bell"></i>
<span class="badge badge-light">2</span>
</a>
</li>
Put the bage on the same level with icon.
Set:
position: relative; to nav-icon
position: absolute; top: -5px; right: -5px; to badge; (top and right adjust for your needs)
<li class="nav-item mr-3">
<a href="#" class="nav-link nav-icon">
<i class="uil uil-bell"></i>
<span class="badge badge-light">2</span>
</a>
</li>
I need to center icons in dropdown. When I have text in dropdown item instead of icon, it is in center, but icon not:
Here is my code:
<div class="btn-group pull-right">
<button type="button" class="btn btn-link dropdown-toggle" data-toggle="dropdown">
Click
</button>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
<li>
A
</li>
<li>
<i class="fa fa-th-large"></i>
</li>
<li>
<i class="fa fa-th"></i>
</li>
</ul>
</div>
How to center icons in dropdown?
Thanks
You need to override Bootstrap predefined values using !important. Below is the working snippet
li {
display: inline;
background: red;
position: relative;
padding: 5px 20px!important;
margin: 1px;
}
.dropdown-menu>li>a {
display: inline!important;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
padding: 0px !important;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="btn-group pull-right">
<button type="button" class="btn btn-link dropdown-toggle" data-toggle="dropdown">
Click
</button>
<ul class="dropdown-menu dropdown-menu-right text-center" role="menu">
<li class="text-center">
A
</li>
<li>
<i class="fa fa-th-large"></i>
</li>
<li>
<i class="fa fa-th"></i>
</li>
</ul>
</div>
</body>
</html>
Basically I have a navbar at the top of the page. This navbar has a collapse functionality, so that the menu is still usable for small screens. I would like to attach a div at the bottom of this collapsible navbar. To be more specific, on the right side of the screen, there would be a red circle which is centered on the border of the navbar.
I am looking for something like this :
enter image description here
The circle is not a button. The collapsible button appears only for small screens (on the right of the navbar)
I have tried many suggestions I found on the Internet. Most of them suggested to give the parent div a relative position and an absolute position to the child div. But it never worked, and the only times it did, it was not responsive.
Here is my current HTML non responsive code
.circle {
position:absolute;
<--top:35px;-->
right:3vw;
width:20px;
height:20px;
background: #d21c2d;
border-radius:50%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-fixed-top navbar-expand-lg green-background">
<div class="container-fluid">
<-- 80 lines of navbar code including a collapse navbar-collapse div -->
</div>
<div class="circle"></div>
</nav>
So far, the only thing I can do is place the circle for a given size of screen. It is not stable if the screen size changes. It is not with the collapsible mode either.
Thank you very much for your help.
Have a nice day :)
You can calculate it using calc. You can subtract the px from total % according to your requirement .
.circle {
position:absolute;
top: calc(100% - 10px);
right:30px;
width:20px;
height:20px;
background: #d21c2d;
border-radius:50%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-full navbar-expand-lg navbar-light bg-light">
<div class="container logo" style="position: relative;">
<a class="navbar-brand text-left d-block float-left d-xl-flex logo" href="assets/img/kol-logoldpi.svg"><img class="kibrislogo" height="50" src='assets/img/kol-logoldpi2.svg' /></a><button class="navbar-toggler" data-toggle="collapse" data-target="#navcol-1"><span class="sr-only">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navcol-1">
<ul class="nav navbar-nav ml-auto text-center">
<li class="nav-item" role="presentation"><a class="nav-link active" href="index.html">Paketler</a></li>
<li class="nav-item" role="presentation"><a class="nav-link" href="features.html">Kampanyalar</a></li>
<li class="nav-item" role="presentation"><a class="nav-link" href="pricing.html">sss</a></li>
<li class="nav-item" role="presentation"><a class="nav-link" href="about-us.html">Hizmet Noktalari</a></li>
<li class="nav-item" role="presentation"><a class="nav-link" href="contact-us.html"><strong>İLETIŞIM</strong></a></li>
<li class="nav-item" role="presentation"><a class="nav-link" href="contact-us.html" style="color: rgba(207,14,14,0.5);">TR/ENG</a></li>
</ul>
</div>
<img class="logo" style="position: absolute; right: -7%; height: 70px;" src="assets/img/kol-ccldpi.svg" alt="">
</div>
<div class="circle"></div>
</nav>
</body>
</html>
Try it by giving by adding your element inside of your navbar and add following properties:
.circle{
position:absolute;
z-index: 1001;
right: 35px;
top: 45px;
width:20px;
height:20px;
background: #d21c2d;
border-radius:50%;
}
I have a section in my header named #contact-stripe that has a space/gap between it and the navbar. However, I don't see anywhere that has padding or margin so I'm stumped.
I put this on CodePen which may make it easier to see.
I've used Chrome's inspect to try and find anything that is using margin/padding and just can't find it.
HTML
<!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">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lora:400,700|Raleway:400,400i,700" rel="stylesheet">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<!-- Custom CSS -->
<link rel="stylesheet" type="text/css" href="/css/style.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Listing Naples</title>
</head>
<body>
<header>
<!-- Contact Stripe -->
<section id="contact-stripe">
<div class="container">
<span class="float-left"><i class="fas fa-envelope"></i> Email Us</span>
<span class="float-right">
<div class="telephone align-middle">
<i class="fas fa-phone d-sm-inline-block align-middle"></i>
<span class="telephone-number d-sm-inline-block align-middle">(239) 248-8171</span>
</div>
</span>
<ul class="social">
<li class="align-middle"><i class="fab fa-facebook-square"></i></li>
<li class="align-middle"><i class="fab fa-twitter-square"></i></li>
<li class="align-middle"><i class="fab fa-instagram"></i></li>
<li class="align-middle"><i class="fab fa-linkedin"></i></li>
</ul>
</div>
</section>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-custom">
<div class="container">
<a class="navbar-brand" href="#"><img src="https://s3.amazonaws.com/listing-naples/assets/listing-naples-logo.png" alt="Listing Naples Team Logo"></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 ml-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="#">Buying</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Selling</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About our Team</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
<form class="form-inline my-2 ml-4 my-lg-0">
<input class="form-control-sm mr-sm-2 custom-input-sm" type="search" placeholder="MLS Number" aria-label="Search">
</form>
</div><!-- end collapse navbar-collapse div-->
</div><!-- end container div -->
</nav>
</header>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</body>
</html>
CSS
body {
font-family: 'Source Sans Pro', sans-serif;
padding:0;
}
#contact-stripe {
background-color: #000;
border-bottom: 1px solid #353a3b;
color: rgba(255, 255, 255, 0.5);
}
ul.social{
text-align:center;
list-style-type:none;
}
ul.social li {
display:inline-block;
border-right:1px solid #353a3b;
}
ul.social li:first-of-type {
border-left: 1px solid #353a3b;
}
.telephone {
background-color:red;
}
.telephone-number {
background: teal;
}
.navbar-custom {
background-color:#000;
}
header li {
padding: .5rem;
margin:0;
}
.navbar-custom .navbar-brand,
.navbar-custom .navbar-text {
color: rgba(255,255,255,.8);
}
/* change the link color */
.navbar-custom .navbar-nav .nav-link {
color: rgba(255, 255, 255, 0.5);
font-weight:400;
font-size: 1rem;
}
/* change the color of active or hovered links */
.navbar-custom .nav-item.active .nav-link,
.navbar-custom .nav-item:focus .nav-link,
.navbar-custom .nav-item:hover .nav-link, .navbar-custom li:hover {
color: white;
background-color: orange;
}
.active {
background-color: orange;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Lora', sans-serif;
}
h1 {
font-size: 1.8rem;
font-weight: bold;
}
Because your ul.social has a margin-bottom of 1rem.
just add this css to fix:
ul.social {
margin-bottom: 0;
}
input[type="text"] {
position: relative;
top: 0;
left: 0;
-webkit-transition: all .7s;
-moz-transition: all .7s;
transition: all .7s;
}
input[type="text"]:focus {
padding: 1px 1px 1px 2px;
}
.searchInput {
background-color: transparent;
border-bottom: 1px solid;
border-bottom-color: #808080;
}
<!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://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<!----------------------------- nav bar ------------------------------>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="?p=#"><img src="https://png.pngtree.com/element_pic/17/01/01/93b5a86a0836ef7f1a078d48ab3bc32f.jpg" alt="BizarroNEWS" width="50%"></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 nav mr-auto mt-2 mt-lg-0 ml-3 textoNavbar dropMenuHoverColor">
<li class="nav-item pr-5">
<a class="nav-link" href="?p=#">pincipal</a>
</li>
<li class="nav-item pr-5">
<a class="nav-link" href="?p=#">pincipal</a>
</li>
<li class="nav-item pr-5">
<a class="nav-link" href="?p=#">pincipal</a>
</li>
<li class="nav-item pr-5">
<a class="nav-link" href="?p=#">pincipal</a>
</li>
<li class="nav-item pr-5">
<a class="nav-link" href="?p=#">pincipal</a>
</li>
</ul>
<div class="col-sm-12 col-md-12 col-lg-3 my-1">
<form action="?p=pesquisa" method="post" value="" enctype="multipart/form-data">
<div class="input-group">
<input class="form-control searchInput" id="cxnome" name="cxnome" type="text" placeholder="Pesquisar" aria-label="Search" required="required">
<button type="submit" name="pesquisar" class="input-group-append button">
<img src="img/searchIcon.png">
</button>
</div>
</form>
</div>
</div>
</nav>
<!----------------------------- end nav bar ------------------------------>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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>
Between 992px and 1180px of the screen size. The logo and the links called principal are affected by the transition when I click on the input.
This should not happen, I don't know where is the problem, maybe the problem is on the line transition: all? I'm not sure because I don't work much with css.
Why is it happening, and how can I solve it?
It happens because you're targeting the padding of the input and not the actual placeholder, which from what I understand is what you actually want to animate.
So - you'd plug in the ::-webkit-input-placeholder pseudo selector, and apply the transition effect to that.
That would look something like this:
.navbar {width: 100%; height: 100%;}
input[type="text"] {
position: relative; top: 0; left: 0;
}
/*Hit the placeholder of input. not actual input. */
input[type="text"]::-webkit-input-placeholder {
padding-left: 6px;
-webkit-transition: all .7s;
-moz-transition: all .7s;
transition: all .7s;
}
/* set padding down since you can't do negative padding */
input[type="text"]:focus::-webkit-input-placeholder {
padding-left: 0;
}
.searchInput{
background-color: transparent;
border-bottom: 1px solid;
border-bottom-color: #808080;
}
<!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://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="MeuCss/cssSearchBar.css">
<title>Hello, world!</title>
</head>
<body>
<!----------------------------- nav bar ------------------------------>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="?p=#"><img src="https://png.pngtree.com/element_pic/17/01/01/93b5a86a0836ef7f1a078d48ab3bc32f.jpg" alt="BizarroNEWS" width="50%"></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 nav mr-auto mt-2 mt-lg-0 ml-3 textoNavbar dropMenuHoverColor">
<li class="nav-item pr-5">
<a class="nav-link" href="?p=#">pincipal</a>
</li>
<li class="nav-item pr-5">
<a class="nav-link" href="?p=#">pincipal</a>
</li>
<li class="nav-item pr-5">
<a class="nav-link" href="?p=#">pincipal</a>
</li>
<li class="nav-item pr-5">
<a class="nav-link" href="?p=#">pincipal</a>
</li>
<li class="nav-item pr-5">
<a class="nav-link" href="?p=#">pincipal</a>
</li>
</ul>
<div class="col-sm-12 col-md-12 col-lg-3 my-1">
<form action="?p=pesquisa" method="post" value="" enctype="multipart/form-data">
<div class="input-group">
<input class="form-control searchInput" id="cxnome" name="cxnome" type="text" placeholder="Pesquisar" aria-label="Search" required="required">
<button type="submit" name="pesquisar" class="input-group-append button">
<img src="img/searchIcon.png">
</button>
</div>
</form>
</div>
</div>
</nav>
<!----------------------------- end nav bar ------------------------------>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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>