dropdown-item class works fine only when used dropdown class but not worked in dropup class.
Dropup not works after clicks the all sub-menu item. Because all dropdown-item becomes active and show after every clicks.
Code Snippet and Scenario Images of problem given below.
1. First Image: All Submenu Active and Show
2. Second Image: Inspect Element
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<title>DropUp bootstrap</title>
</head>
<body>
<ul class="nav flex-column">
<li class="nav-item dropdown mb-5">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">DropDown</a>
<div class="dropdown-menu">
<a class="dropdown-item" data-toggle="tab" href="#hello1">Hello1</a>
<a class="dropdown-item" data-toggle="tab" href="#hello2">Hello2</a>
<a class="dropdown-item" data-toggle="tab" href="#hello3">Hello3</a>
</div>
</li>
<li class="nav-item dropup mt-5">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">DropUp</a>
<div class="dropdown-menu">
<a class="dropdown-item" data-toggle="tab" href="#hello1">Hello1</a>
<a class="dropdown-item" data-toggle="tab" href="#hello2">Hello2</a>
<a class="dropdown-item" data-toggle="tab" href="#hello3">Hello3</a>
</div>
</li>
</ul> <!-- End nav -->
<div class="tab-content mt-1">
<div class="tab-pane fade" id="hello1">
<h1>Hello 1</h1>
</div> <!-- End hello1 -->
<div class="tab-pane fade" id="hello2">
<h1>Hello 2</h1>
</div> <!-- End hello2 -->
<div class="tab-pane fade" id="hello3">
<h1>Hello 3</h1>
</div> <!-- End hello3 -->
</div> <!-- End tab-content -->
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>
</html>
This is a known issue in Bootstrap 4.0.0: https://github.com/twbs/bootstrap/issues/25759
A workaround is to use both dropdown and dropup classes for the "dropdown" element.
https://www.codeply.com/go/YiXNLqAzwL
<li class="nav-item dropdown dropup mt-5">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">DropUp</a>
<div class="dropdown-menu">
<a class="dropdown-item" data-toggle="tab" href="#hello1">Hello1</a>
<a class="dropdown-item" data-toggle="tab" href="#hello2">Hello2</a>
<a class="dropdown-item" data-toggle="tab" href="#hello3">Hello3</a>
</div>
</li>
Related
I've been trying to implement wow.js into my HTML code but I'm having trouble making it work. Am I missing script loads or loading the wrong scripts? What might I be doing wrong? Maybe I couldn't initiate wow.js the right way? The code is given below, I could've excluded the nav part out since it will not use animations, but I didn't want to cut any code out. The animation is called in the bottom div part.
Thanks for any help in advance.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta hhtp-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Okan Sen</title>
<link rel="shortcut icon" type="image/jpg" href="OKANSENLogoWineRed.jpg">
<!-- ANIMATE CSS LINK (REQUIRED) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="global.css">
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.3.0/animate.css"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://unpkg.com/#popperjs/core#2.4.0/dist/umd/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- WOW ANIMATION LIB LINK -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
<script>
// WOW INIT
new WOW().init();
</script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-transparent">
<div class="container-fluid">
<a class="navbar-brand" href="#">OKAN</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>
<div class="container-fluid bg animated wow zoomIn">
</div>
<section class="sec1 animated wow zoomIn">
<h1>LELELELELEL</h1>
</section>
</body>
</html>
I have created vary basic working example
<head>
<link rel="stylesheet" type="text/css"
href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/animatecss/3.5.2/animate.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
<script>
new WOW().init();
</script>
</head>
<body>
<div class="wow bounce">
Content to Reveal Here
</div>
</body>
Edit: Your Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta hhtp-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Okan Sen</title>
<link rel="shortcut icon" type="image/jpg" href="OKANSENLogoWineRed.jpg">
<!-- ANIMATE CSS LINK (REQUIRED) -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/animatecss/3.5.2/animate.min.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" type="text/css" href="global.css">
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://unpkg.com/#popperjs/core#2.4.0/dist/umd/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- WOW ANIMATION LIB LINK -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
<script>
// WOW INIT
new WOW().init();
</script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-transparent">
<div class="container-fluid">
<a class="navbar-brand" href="#">OKAN</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>
<div class="container-fluid bg animated wow zoomIn">
</div>
<section class="sec1 animated wow zoomIn">
<h1>LELELELELEL</h1>
</section>
</body>
</html>
Edit 2: Some Explanation
When I looked at the version of animate.css 4.1.1, as per link it's not compatible. and this
So I used a bit older version.
Some recommended AOS for animation
And for your last question, you can use your own styles as long as we
are not overriding some original styles from animation
I was trying to create a navbar component in a .js file so I can use it on multiple pages(not allowed to use react or other libraries for this project). I copied the navbar from bootstrap and pasted it in my navBar.js.
The CSS style worked fine but when I clicked the button the dropdown menu didn't show up.
Could anyone tell me what's the problem and how can I solve it?
another question, I saw some online comments say don't use web components. Should I keep on using it or just pasted the navbar into my index.html(in where the dropdown button works fine)
Here is my navBar.js:
const navTemplate = document.createElement('template');
navTemplate.innerHTML =
`
<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">
<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>
`;
class NavBar extends HTMLElement{
constructor(){
super();
this.attachShadow({mode:'open'});
this.shadowRoot.appendChild(navTemplate.content);
}
connectedCallback(){
}
}
window.customElements.define('nav-bar', NavBar);
And this is my index.html:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<nav-bar></nav-bar>
<script src='../components/navBar.js'></script>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.1/dist/umd/popper.min.js" integrity="sha384-SR1sx49pcuLnqZUnnPwx6FCym0wLsk5JZuNx2bPPENzswTNFaQU1RDvt3wT4gWFG" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/js/bootstrap.min.js" integrity="sha384-j0CNLUeiqtyaRmlzUHCPZ+Gy5fQu0dQ6eZ/xAww941Ai1SxSY+0EQqNXNE6DZiVc" crossorigin="anonymous"></script>
-->
</body>
</html>
I solved this problem by adding below to carousel.css, Shadow DOM works now!
.dropdown:hover .dropdown-menu {display: block;}
The problem seems to be that the dropdowns aren't initialized correctly. You could do that yourself with new bootstrap.Dropdown(dropdownToggleEl) in connectedCallback,
but that leaves you with work for opening, closing and triggering events on clicks and such. The "culprit" is Shadow DOM.
This is one of those cases where we would suggest to not use Shadow DOM. You are just wraping the layout into a component and even importing the CSS. Unless there is a reason to use Shadow DOM (like custom CSS encapsulation), skip it. It's fine to have components without Shadow DOM alongside others that do.
Or you could alternatively use slots. Replace the li tags in your components template
...
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<slot></slot>
</ul>
...
</div>
...
and declare them with the markup of your component in the index.html:
<nav-bar>
<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>
</nav-bar>
I am having an issue implementing a tab with a drop-down nav as demonstrated in the Bootswatch examples. I should note that this does not work on the demo page either for me, but the way it seems to be written implies that it should work.
My end goal is that on one of my tabs I have a drop-down and populate the tab body by the selection made. The other tabs work as expected, but the drop-down doesn't display the expected div contents.
Below is basically the demo code from the Bootswatch page, with some of the fluff pulled out to simplify it.
<!doctype html>
<html lang="en" class="h-100">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Title</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootswatch/4.4.1/cerulean/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css">
</head>
<body class="d-flex flex-column h-100">
<header>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<a class="navbar-brand" href="/">Title</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01"
aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarColor01">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#">Settings <span class="sr-only">(current)</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Help</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</span></a>
</li>
</ul>
</div>
</nav>
</header>
<main role="main" class="flex-shrink-0">
<div class="container" id="settingsapp">
<div class="page-header" id="banner">
<h1>Settings</h1>
</div>
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#profile">Profile</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button"
aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" style="">
<a class="dropdown-item" data-toggle="tab" href="#dropdown1">Action</a>
<a class="dropdown-item" data-toggle="tab" href="#dropdown2">Another action</a>
</div>
</li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade show active" id="home">
<p>Home tab content.</p>
</div>
<div class="tab-pane fade" id="profile">
<p>Profile tab content.</p>
</div>
<div class="tab-pane fade" id="dropdown1">
<p>Dropdown 1 content.</p>
</div>
<div class="tab-pane fade" id="dropdown2">
<p>Dropdown 2 content.</p>
</div>
</div>
</div>
</main>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>
My ability to work with Bootstrap and Bootswatch is limited to finding something which does what I need and then editing it to look as I want, so this is a little out of my depth. I am learning, however, each time.
With Bootstrap there is usually Jquery.js and bootstrap.js <script> tags included that takes care of the user interactions . I think you might be missing those .
<head>
<meta charset="utf-8">
<title>Bootswatch: Cerulean</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="../4/cerulean/bootstrap.css" media="screen">
<link rel="stylesheet" href="../_assets/css/custom.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" ></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" ></script>
A collaborator helped me figure this out. I was missing the "data-toggle" argument within the dropdown-menu div:
<div class="dropdown-menu" style="">
<a class="dropdown-item" href="#dropdown1">Action</a>
<a class="dropdown-item" href="#dropdown2">Another action</a>
</div>
becomes:
<div class="dropdown-menu" style="">
<a class="dropdown-item" data-toggle="tab" href="#dropdown1">Action</a>
<a class="dropdown-item" data-toggle="tab" href="#dropdown2">Another action</a>
</div>
Now I guess I'll see how I can submit a PR over on Bootswatch since this came off their examples.
I have edited the question above to include the corrected HTML.
I am new to this so please bear with me. I copied this navbar code from Bootstrap and tweaked it to fit my code.
I have a dropdown list with three dropdown items. I want the user to have two options. They can go to the portfolio page and find the links there or they can use the dropdown menu.
The link to the portfolio page does not work when the last script that contains bootstrap.min.js is in the code. Not sure why this is not working. If I take out the dropdown and make it a regular link it goes to the portfolio page. Here is my code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<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">
<link rel ="stylesheet" type="text/css" href="style.css">
<title>Do You Know Jennipher</title>
</head>
<nav class="navbar sticky-top navbar-expand-lg">
<a class="navbar-brand" href="index.html">Do You Know Jennipher</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="index.html">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="aboutme.html">About Me</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" href="previous_work.html">Portfolio</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="previous_work.html">Egyptian Petrdise</a>
<a class="dropdown-item" href="previous_work.html">Movie Madness</a>
<a class="dropdown-item" href="previous_work.html">George's Safari Adventure</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="gallery.html">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="say_hello.html">Say Hello</a>
</li>
</ul>
</div>
</nav>
<header>
<div class="flex-container">
<img src="images/banner_ad.jpg" class="banner" alt="banner ad">
</div>
</header>
<body>
<section class="intro">
<div class="container">
<div class="row">
<div class="col-6">
<img src="images/mountains.jpg" alt="rocky mountains" class="mountain" width="500px">
</div>
<div class="col-6">
<p class="intro-text">Hello, my name is Jennipher </p>
</div>
</div>
</div>
</section>
<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.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
</script>
</body>
<footer>
<p class="footer">© Copyright 2019 Jennipher Samms</p>
</footer>
</html>
There's nothing wrong with min.js library. Only you should follow perfect body layout and syntax. It's better to always keep your <script> files before </body> tag ends. End you forgot write some elements inside the body instead you wrote them outside body tag. I just adjusted some of your code. Check it once.
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel ="stylesheet" type="text/css" href="style.css">
<title>Do You Know Jennipher</title>
</head>
<body>
<nav class="navbar sticky-top navbar-expand-lg">
<a class="navbar-brand" href="index.html">Do You Know Jennipher</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="index.html">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="aboutme.html">About Me</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" href="previous_work.html">Portfolio</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="previous_work.html">Egyptian Petrdise</a>
<a class="dropdown-item" href="previous_work.html">Movie Madness</a>
<a class="dropdown-item" href="previous_work.html">George's Safari Adventure</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="gallery.html">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="say_hello.html">Say Hello</a>
</li>
</ul>
</div>
</nav>
<header>
<div class="flex-container">
<img src="images/banner_ad.jpg" class="banner" alt="banner ad">
</div>
</header>
<section class="intro">
<div class="container">
<div class="row">
<div class="col-md-6">
<img src="images/mountains.jpg" alt="rocky mountains" class="mountain" width="500px">
</div>
<div class="col-md-6">
<p class="intro-text">Hello, my name is Jennipher </p>
</div>
</div>
</div>
</section>
<footer>
<p class="footer text-center">© Copyright 2019 Jennipher Samms</p>
</footer>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>
For better practice please go through this link
I have html code working with bootstrap 4. In my case when navbar toggle button clicked the navbar open and hidden automatically. How to manually open and hidden navbar when clicked? Thanks anyone.
<title>SuperEvent</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<div class="header">
<div class="container">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<img src="img/iklan.JPG" class="iklan float-right">
</div>
</div>
<div class="cleafix"></div>
<nav class="navbar navbar-expand-lg " id="nav" >
<a class="navbar-brand" href="#">Super Event</a>
<button class="navbar-toggler custom-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="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact Us</a>
</li>
</ul>
</div>
</nav>
This can help:
<!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://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</nav>
<br>
<div class="container">
<h3>Collapsible Navbar</h3>
<p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).</p>
<p>Only when the button is clicked, the navigation bar will be displayed.</p>
<p>Tip: You can also remove the .navbar-expand-md class to ALWAYS hide navbar links and display the toggler button.</p>
</div>
</body>
</html>
For more details follow by link - https://www.w3schools.com/bootstrap4/bootstrap_navbar.asp
If you want to use Bootstrap 5, include just this in your HTML file:
<script src="js/bootstrap.js"></script>
Implementation example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Navbar</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<nav class="navbar navbar-expand-sm navbar-dark">
<div class="container-fluid">
<!--LOGO IMAGE-->
<a class="navbar-brand" href="#">
<img src="images/img_avatar1.png" alt="Avatar Logo" style="width:50px;" class=" rounded-pill">
</a>
<a class="navbar-brand" href="#"><span style="font-size: 30px;">Alex Luca</span></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar" aria-expanded="false" aria-controls="collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<!--Using justify-content-end, you can align the links at the right-->
<div class="collapse navbar-collapse justify-content-end text-center" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item px-3">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item px-3">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item px-3">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown px-3">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">Dropdown</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Another link</a></li>
<li><a class="dropdown-item" href="#">A third link</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid mt-3">
<h3>Navbar With Dropdown</h3>
<p>This example adds a dropdown menu in the navbar.</p>
</div>
<!--For the dropdown menu and collapsed meniu-->
<script src="js/bootstrap.js"></script>
<script src="js/script.js"></script>
</body>
</html>