i have manually downloaded and added the bootstrap library into my code and trying to click my bootstrap navbar-toggler button it is not working, but when i try to add the CDN Bootstrap Librabry it is working fine please somebody help me ho do i solve this issue for manual downloaded bootstrap library
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" >
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
<title>Bootstrap Navbar</title>
<link rel="stylesheet" href="font_awesome/css/font-awesome.min.css" />
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css"/>
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/#popperjs/core/dist/umd/popper.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-sm navbar-light bg-light">
<img src="img/logo/logo.png" width="150px" height="auto" style="border: 1px solid lightgrey; border-radius: 3px"></img>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navber-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Menu 1</a>
</li>
</ul>
</div>
</nav>
<script></script>
</body>
</html>
Try to add the jquery, proper & bootstrap js file at the end of the "body"
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" >
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
<title>Bootstrap Navbar</title>
<link rel="stylesheet" href="font_awesome/css/font-awesome.min.css" />
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css"/>
</head>
<body>
<nav class="navbar navbar-expand-sm navbar-light bg-light">
<img src="img/logo/logo.png" width="150px" height="auto" style="border: 1px solid lightgrey; border-radius: 3px"></img>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navber-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Menu 1</a>
</li>
</ul>
</div>
</nav>
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/#popperjs/core/dist/umd/popper.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script></script>
</body>
</html>
download files form here:
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js
put anywhere in your project (generally where js's and css's are kept)
provide a path to them in html via script tag :
<script src='<absolutepath>/<file_name>'> </script>
If you are using Bootstrap 5 use this: data-bs-toggle data-bs-target and insert into the button HTML tag like so:
<button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
Related
I currently am using bootstrap to create a navbar filled with links. One of the links I have is a button and the button is causing the other links to not vertically align properly.
body{
background: rgb(27, 25, 25);
}
.btn{
border-radius: 3em;
}
<!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>Adam Farrow </title>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<link rel="stylesheet" href="data/styles.css" type="text/css">
<link rel="stylesheet" href="styles.css" type="text/css">
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<div class="container-xxl">
<a href="#" class="navbar-brand">
<span class="fw-bold text-secondary">
Adam Farrow
</span>
</a>
<button class="navbar-toggler button" type="button" data-bs-toggle="collapse" data-bs-target="#main-nav"
aria-controls="main-nav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end align-center" id="main-nav">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link " href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#skills-link">Skills</a></li>
<li class="nav-item"><a class="nav-link" href="#glider">Projects</a></li>
<li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>
<li class="nav-item ms-2 d-none d-md-inline">
<a class="btn btn-secondary" href="https://github.com/Adamfarrow1/">Github</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- JavaScript Bundle with Popper -->
<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>
</html>
As you can see if you run the code, it will have the items slightly unaligned.
I have tried using "text-center" on the ul tag surrounding the problem. As well as I tried creating a class and using "top = 50%" for the items inside the list.
use padding-bottom or padding-top : 2px to position your github link
I have a problem with a navbar from Bootstrap. I don't understand why but when I put this webpage on mobile view the Bootstrap Navbar collapse doesn't show when i click on the button on the right ...
Here is my code :
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="home.css">
<link rel="stylesheet" href="nav.css">
<link rel="icon" href="favicon.ico">
<title>SmartHorse | Accueil</title>
<script src="https://smtpjs.com/v3/smtp.js"></script>
<script src="https://kit.fontawesome.com/f7131c55f8.js" crossorigin="anonymous"></script>
</head>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<img src="Logo_V2.jpeg" alt="cheval" class="nav-logo image-logo">
<button class="navbar-toggler"
type="button"
data-toggle="collapse"
data-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" href="index.html">Accueil</a>
</li>
<li class="nav-item">
<a class="nav-link" href="blockchain.html">La technologie blockchain</a>
</li>
<li class="nav-item" style="background-color: white; height: 23px; width: 23px; margin-top: 8px; margin-left: 8px">
<img src="https://www.makrea.com/img_pngs/RS03.png" alt="logo linkedin" style="width: 25px; padding-bottom: 5px">
</li>
</ul>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>
</html>
Thanks a lot in advance for your help !
I copied the code to my editor and opened the file, I don't see any issue here, works as expected. What Browser are you viewing the file on? Or perhaps you don't have a body tag? You only seem to have the closing body tag.
Tablet - https://imgur.com/gX0SFxv.jpg
Mobile - https://imgur.com/rl12X8r.jpg
Thanks guys !
The problem came from my CSS I put the property (position: absolute left 74%) to my ul hence the problem on mobile view.
I cannot figure out how to get my button for my collapsible navbar not to appear all the time. I have followed various online tutorials with almost the exact same code as mine however I am not achieving the same result.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pentakill - About</title>
<link rel="icon" href="images/pentakilllogo.ico">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script type="text/javascript" src="script.js"></script>
<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>
<link href='https://fonts.googleapis.com/css?family=Metal Mania' rel='stylesheet'>
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<nav class="navbar navbar-expand-sm sticky-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#myCollapsibleNavbar">
<span class="icon-bar metal">Options</span>
</button>
<a class="navbar-brand pentaicon"><img src="images/pentakilllogo.ico"></a>
<span class="navbar-brand metal">Pentakill</span>
</div>
<div class="collapse navbar-collapse" id="myCollapsibleNavbar">
<ul class="nav navbar-nav">
<li>
<a class="metal" href="index.php">Home</a>
</li>
<li>
<a class="metal" href="about.php">About</a>
</li>
<li>
<a class="metal" href="music.php">Music</a>
</li>
<li class="active">
<a class="metal" href="tour.php">Tour</a>
</li>
<li class="nav-item">
<a class="metal" href="members.php">Members</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a class="metal" href="login.php"><span class="glyphicon glyphicon-user"></span>Login/Sign Up</a></li>
</ul>
</div>
</div>
</nav>
I have tried adding and removing various divs but nothing seems to make a difference.
I also tried removing the word "Options" in case that was the culprit, but with no luck.
Are you intentionally using the Bootstrap 3.4 CDN instead of the most recent version? Following along on a tutorial such as https://getbootstrap.com/docs/4.0/components/navbar/ may cause issues. I placed your code into a codepen linked to the latest version and don't see the button, just spacing issues then.
Hello I was recently hired by a kid at my school to make a website for him. I'm new to bootstrap and I'm not very good, but I thought i was getting the hang of it when my navbar button(right, top when collapsed.) wouldn't work. Please help.
here is my code:
<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">
<link href="bootstrap.min.css" rel="stylesheet">
<link type="text/css" href="jack.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-inverse navbar navbar-static-top" id="my-navbar">
<div class="container">
<div class="navbar-header"></div>
<button type="button" class="navbar-toggle" data-toggle="collapse" data- target="#navbar-collapse" >
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" id="orange" href="">JackMagic7</a>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav">
<li>Blog</li>
<li>Magic</li>
<li>Home</li>
<li>Pics</li>
</ul>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.1/jquery.min.js"> </script>
<script src="bootstrap-3.3.6-dist/js/bootstrap.min.js"></script>
</body>
</html>
You forgot to close the nav Tag, here is the correct code, I also fixed some small failures
I would recomend you an Editor/IDE, which supports syntax hihlighting, to prevent such Failures, another cool tool for debugging is the Extension "Firebug" for Firefox
<!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">
<link href="bootstrap.min.css" rel="stylesheet">
<link type="text/css" href="jack.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-inverse navbar navbar-static-top" id="my-navbar">
<div class="container">
<div class="navbar-header"></div>
<button type="button" class="navbar-toggle" data-toggle="collapse" target="#navbar-collapse" >
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" id="orange" href="">JackMagic7</a>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav">
<li>Blog</li>
<li>Magic</li>
<li>Home</li>
<li>Pics</li>
</ul>
</div>
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.1/jquery.min.js"> </script>
<script src="bootstrap-3.3.6-dist/js/bootstrap.min.js"></script>
</body>
</html>
I am trying to make a collapsable navbar with bootstrap, the nav does collapse but when I click on it it does not dropdown here is all the code I have in my index html page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Honk</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="public/stylesheets/styles.css">
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="public/stylesheets/custom.css">
</head>
<body>
<nav class="navbar navbar-fixed-top navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img class="logo" src="public/images/honklogoo.png" alt="">
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a class="discrip" href="#">About</a></li>
<li>Commuters</li>
<li>Travelers</li>
<li>On Demand</li>
<li>Safety</li>
<li>Download</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
you dont have the the bootstrap js script in your html (you just have the css)
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
its working here: http://jsfiddle.net/swm53ran/26/
btw, make sure you put it after your jquery script since bootstrap is dependent on jquery