I've got a problem with my Bootstrap 5.0.2 navbar both desktop and mobile when collapsed.
The point is to collapse after click on links.
Hrefs/links dont't work.
Can u guys tell me where I messed up?
<!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>My Portfolio</title>
<link rel="shortcut icon" href="img/favicon.ico" />
<link rel="icon" type="image/png" href="img/favico.png" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<style> .navbar {
background-color: black;
}
#home {
height: 30vh;
background-color: yellow;
}
#about {
height: 30vh;
background-color: red;
}
#my-skills {
height: 30vh;
background-color: green;
}
#work {
height: 30vh;
background-color: purple;
}
#work {
height: 30vh;
background-color: blue;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
<!-- nav -->
<nav id="wrap" class="navbar navbar-expand-lg navbar-dark menu fixed-top gradient-nav">
<div class="container">
<div class="row align-items-start">
<div class="col-2">
<a class="navbar-brand " href="#home">
<img src="img/logo.png" alt="logo">
</a>
</div>
</div>
<div class="row align-items-center">
<div class="collapse navbar-collapse col-8" id="navbarSupportedContent">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link active" aria-current="page" href="#home" data-bs-toggle="collapse"
data-bs-target=".navbar-collapse.show">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#about" data-bs-toggle="collapse"
data-bs-target=".navbar-collapse.show">About</a></li>
<li class="nav-item"><a class="nav-link" href="#my-skills" data-bs-toggle="collapse"
data-bs-target=".navbar-collapse.show">My Skills</a></li>
<li class="nav-item"><a class="nav-link" href="#work" data-bs-toggle="collapse"
data-bs-target=".navbar-collapse.show">Work</a></li>
<li class="nav-item"><a class="nav-link" href="#contact" data-bs-toggle="collapse"
data-bs-target=".navbar-collapse.show">Contact</a></li>
</ul>
</div>
</div>
<div class="row align-items-end">
<div class="collapse navbar-collapse col-2" id="navbarSupportedContent">
<ul class="navbar-nav text-center">
<li class="socials-top"><a href="#" data-bs-toggle="collapse"
data-bs-target=".navbar-collapse.show"><i class="fab fa-facebook"></i></a>
</li>
<li class="socials-top"><a href="#" data-bs-toggle="collapse"
data-bs-target=".navbar-collapse.show"><i class="fab fa-git-alt"></i></a>
</li>
<li class="socials-top"><a href="#" data-bs-toggle="collapse"
data-bs-target=".navbar-collapse.show"><i class="fab fa-linkedin"></i></a>
</li>
</ul>
</div>
</div>
<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>
</nav>
<section id="home"></section>
<section id="about"></section>
<section id="my-skills"></section>
<section id="work"></section>
<section id="contact"></section>
<script src="https://kit.fontawesome.com/ccbb5f75d7.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js"
integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous">
</script>
</body>
</html>
Related
I'm trying to resolve a coding task. I have to pull the data from the https://jsonplaceholder.typicode.com/users using fetch API function, bootstrap and jquery. I used the array.map() to print the data in a div element. Below is the vanilla version of the code - JS is running in the script tags in the HTML element.
However, the second part of the task is to hide the element on Delete button click and this is where I struggle to find a solution. I tried the callback function or button 'onclick' but that didn't work. Can someone please point me in the right direction?
Thanks!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>UI Demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.min.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
</script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font- awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<div class="container-fluid">
<span class="navbar-brand" href="#">Test App</span>
<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 bg-light" >
<a class="nav-link dropdown-toggle text-dark" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Menu
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Menu 1</a></li>
<li><a class="dropdown-item" href="#">Menu 2</a></li>
<li><a class="dropdown-item" href="#">Menu 3</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<main>
<div class="container" id="box">
<h3>Showing </h3>
<div class="row">
<!-- Fetched data gets inserted here -->
</div>
</div>
</main>
<script>
fetch('https://jsonplaceholder.typicode.com/users').then((data) => {
// console.log(data);
return data.json();
}).then((jsondata) => {
const names = jsondata.map((values)=> {
return `<div class="col col-lg-4 col-md-4 gx-4 gy-4">
<div id="card" class="card p-2">
<h2 id="user">${values.name}</h2>
<div class="card-body">
<p><strong>Street:</strong> ${values.address.street}</p>
<p><strong>Suite:</strong> ${values.address.suite}</p>
<p><strong>City:</strong> ${values.address.city}</p>
<p><strong>Zip Code:</strong> ${values.address.zipcode}
</p>
<button "class="btn btn-primary float-end"><span><i class="fa-solid fa-trash-can"></i> </span>Delete</button>
</div>
</div>
</div>`
})
// document.getElementById('user').innerHTML = names;
document.querySelector('.row').innerHTML = names;
</script>
You need to give id to card element.
Add click event that remove DOM element.
Also array.map returns array so If you don't want that comma you can use array.join()
Note that this will not delete items from backend/database,for that you need to make other api call.
final result :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>UI Demo</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font- awesome/6.1.1/css/all.min.css"
integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<div class="container-fluid">
<span class="navbar-brand" href="#">Test App</span>
<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 bg-light">
<a
class="nav-link dropdown-toggle text-dark"
href="#"
id="navbarDropdown"
role="button"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Menu
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Menu 1</a></li>
<li><a class="dropdown-item" href="#">Menu 2</a></li>
<li><a class="dropdown-item" href="#">Menu 3</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<main>
<div class="container" id="box">
<h3>Showing</h3>
<div class="row">
<!-- Fetched data gets inserted here -->
</div>
</div>
</main>
<script>
function deleteCard(id) {
document.getElementById(id).remove();
}
fetch("https://jsonplaceholder.typicode.com/users")
.then((data) => {
return data.json();
})
.then((jsondata) => {
console.log(jsondata);
const names = jsondata.map((values) => {
return `<div class="col col-lg-4 col-md-4 gx-4 gy-4" id="${values.id}">
<div id="card" class="card p-2">
<h2 id="user">${values.name}</h2>
<div class="card-body">
<p><strong>Street:</strong> ${values.address.street}</p>
<p><strong>Suite:</strong> ${values.address.suite}</p>
<p><strong>City:</strong> ${values.address.city}</p>
<p><strong>Zip Code:</strong> ${values.address.zipcode}</p>
<button onclick="deleteCard(${values.id})" "class="btn btn-primary float-end"><span><i class="fa-solid fa-trash-can"></i> </span>Delete</button>
</div>
</div>
</div>`;
});
document.querySelector(".row").innerHTML = names.join("");
});
</script>
</body>
</html>
I am trying to make a webpage using Bootstrap. I am using .container-lg so that the content get 100% width when max-width is 767px. But is it not getting 100% width on screens with width less than 768px.
My Code:
<!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>Module 09 - Panda Ecommerce usign Bootstrap</title>
<!-- Bootstrap CSS CDN -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- My Custom CSS Link -->
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="container-lg">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="./images/logo.png" alt="Panda-ECommerce-Logo">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#shoes">Shoes</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#backpack">Backpack</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact Us</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
<!-- Bootstrap JavaScript CDN-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
</body>
</html>
How to fix this problem?
How can I get 100% width on screens less than 768px?
in Bootstrap we have this CSS style:
.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
width: 100%;
padding-right: var(--bs-gutter-x,.75rem);
padding-left: var(--bs-gutter-x,.75rem);
margin-right: auto;
margin-left: auto;
for getting 100% width you should remove the padding, so you should use padding: 0 in your CSS style
I hope this solve your problem
Fixed this with the code below (SASS) so we can keep the padding.
/* Fix for bootstrap container */
.container-lg{
#include media-breakpoint-down(lg){
width: auto;
}
}
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
<header class="container">
<div class="container pt-3 col-md-5 col-sm-5 col-xs-6 text-center">
<img src="#">
<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>
<nav class="navbar navbar-expand-lg navbar-light bg-light col-xl-6 col-lg-7 col-md-9 container text-center">
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">work</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">about</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">artwork</a>
</li>
</ul>
</div>
</nav>
</header>
The .navbar-toggler-icon does not appear on the .navbar-toggler button when the menu is collapsed for mobile responsiveness.
I want the Navbar button above the left
Use this body code only...... for your bootstrap.
<!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.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<!--Main Navigation-->
<header>
<nav class="navbar navbar-expand-lg navbar-light bg-light col-xl-6 col-lg-7 col-md-9 container text-center">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<img src="#">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item">
<a class="nav-link" href="#">work</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">about</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">artwork</a>
</li>
</ul>
</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>
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>